jQuery學習之基本選擇器、層次選擇器和並且選擇器
阿新 • • 發佈：2018-12-26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery學習</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/**
* jQuery是對JavaScript的封裝，跨瀏覽器
* 前期jQuery主要側重於對於節點的查詢
* 後期jQuery增加了事件的處理以及ajax的操作
*/
//換色對比體驗
function f () {
//JavaScript實現變色
//document.getElementsByTagName("h1")[0].style.color="red";
//jQuery實現變色
$('h1').css('color','red');
}
//1.基本選擇器
function fn () {
//id選擇器
$("#username").css('color','blue');
//標籤選擇器
$('h2').css('background-color','green');
//class選擇器
$(".username").css('color','blue');
//萬用字元選擇器
$('*').css('background-color','lightcyan');
//聯合選擇器
$('h2,#username,.username').css('font-size','20px');
}
//2.層次選擇器
function f1 () {
//派生選擇器(父子關係)--不考慮層次
//$('div span').css('color','red');
//直接子元素選擇器(父子關係)--考慮層次
//$('div >span').css('background-color','lightcoral');
//直接兄弟選擇器(兄弟關係)
//$('div +span').css('font-size','30px');
//後續全部兄弟關係結點選擇器(兄弟關係)
$('div~span').css('font-family','微軟雅黑');
}
//3.並且選擇器
function f2 () {
//$('li').css('color','aquamarine');
//:first第一個和最後一個:last
//$('li:first').css('color','red');
//$('li:last').css('color','red');
//eq(下標索引號),索引從0開始
//$('li:eq(3)').css('color','red');
//gt(索引號)--greet than 結點索引值大於索引號；lt(索引號)--less than 結點索引值小於索引號
//$('li:gt(3)').css('background-color','pink');
//$('li:gt(1):lt(3)').css('color','red');
//even 匹配索引值為偶數的結點；odd 匹配索引值為奇數的結點
//$('li:odd').css('background-color','lightgreen');
//not(選擇器)去除某個結點
//$('li:not(#sunquan)').css('color','blue');
//：header選擇所有的h標籤，如h1,h2....
/*$(':header').css('color','red');
$(':header.pear').css('background-color','lightcyan');*/
/**總結：
* 1.並且關係的多個選擇器沒有先後順序，但是要避免產生歧義
* 2.並且選擇器可以單獨使用
* 3.並且選擇器可以使用多個，每個選擇器使用前要歸位
* 4.各種選擇器都可以構成並且關係
*/
}
</script>
</head>
<body>
<h1>jQuery學習</h1>
<input type="button" value="變色" onclick="f()" />
<h2>選擇器學習</h2>
<input type="text" id="username" value="qiuzhiwen" /><br /><br />
<input type="text" class="username" value="qiuzhiwen" /><br /><br />
<input type="text" class="username" value="qiuzhiwen" /><br /><br />
<input type="button" value="觸發" onclick="fn()" />
<div>
<span>劉備</span>
<p><span>張飛</span></p>
<span>關羽</span>
</div>
<span>劉禪</span>
<span>妲己</span>
<div>呂布</div>
<span>赤兔馬</span><br /><br />
<input type="button" value="觸發1" onclick="f1()"/>
<h3 class="pear">並且選擇器</h3>
<ul>
<li>趙玉</li>
<li>小喬</li>
<li>周瑜</li>
<li>黃蓋</li>
<li>大喬</li>
<li id="sunquan">孫權</li>
</ul>
<input type="button" value="觸發2" onclick="f2()" />
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery學習</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/**
* jQuery是對JavaScript的封裝，跨瀏覽器
* 前期jQuery主要側重於對於節點的查詢
* 後期jQuery增加了事件的處理以及ajax的操作
*/
//換色對比體驗
function f () {
//JavaScript實現變色
//document.getElementsByTagName("h1")[0].style.color="red";
//jQuery實現變色
$('h1').css('color','red');
}
//1.基本選擇器
function fn () {
//id選擇器
$("#username").css('color','blue');
//標籤選擇器
$('h2').css('background-color','green');
//class選擇器
$(".username").css('color','blue');
//萬用字元選擇器
$('*').css('background-color','lightcyan');
//聯合選擇器
$('h2,#username,.username').css('font-size','20px');
}
//2.層次選擇器
function f1 () {
//派生選擇器(父子關係)--不考慮層次
//$('div span').css('color','red');
//直接子元素選擇器(父子關係)--考慮層次
//$('div >span').css('background-color','lightcoral');
//直接兄弟選擇器(兄弟關係)
//$('div +span').css('font-size','30px');
//後續全部兄弟關係結點選擇器(兄弟關係)
$('div~span').css('font-family','微軟雅黑');
}
//3.並且選擇器
function f2 () {
//$('li').css('color','aquamarine');
//:first第一個和最後一個:last
//$('li:first').css('color','red');
//$('li:last').css('color','red');
//eq(下標索引號),索引從0開始
//$('li:eq(3)').css('color','red');
//gt(索引號)--greet than 結點索引值大於索引號；lt(索引號)--less than 結點索引值小於索引號
//$('li:gt(3)').css('background-color','pink');
//$('li:gt(1):lt(3)').css('color','red');
//even 匹配索引值為偶數的結點；odd 匹配索引值為奇數的結點
//$('li:odd').css('background-color','lightgreen');
//not(選擇器)去除某個結點
//$('li:not(#sunquan)').css('color','blue');
//：header選擇所有的h標籤，如h1,h2....
/*$(':header').css('color','red');
$(':header.pear').css('background-color','lightcyan');*/
/**總結：
* 1.並且關係的多個選擇器沒有先後順序，但是要避免產生歧義
* 2.並且選擇器可以單獨使用
* 3.並且選擇器可以使用多個，每個選擇器使用前要歸位
* 4.各種選擇器都可以構成並且關係
*/
}
</script>
</head>
<body>
<h1>jQuery學習</h1>
<input type="button" value="變色" onclick="f()" />
<h2>選擇器學習</h2>
<input type="text" id="username" value="qiuzhiwen" /><br /><br />
<input type="text" class="username" value="qiuzhiwen" /><br /><br />
<input type="text" class="username" value="qiuzhiwen" /><br /><br />
<input type="button" value="觸發" onclick="fn()" />
<div>
<span>劉備</span>
<p><span>張飛</span></p>
<span>關羽</span>
</div>
<span>劉禪</span>
<span>妲己</span>
<div>呂布</div>
<span>赤兔馬</span><br /><br />
<input type="button" value="觸發1" onclick="f1()"/>
<h3 class="pear">並且選擇器</h3>
<ul>
<li>趙玉</li>
<li>小喬</li>
<li>周瑜</li>
<li>黃蓋</li>
<li>大喬</li>
<li id="sunquan">孫權</li>
</ul>
<input type="button" value="觸發2" onclick="f2()" />
</body>
</html>