1 派生選擇器：在s1內部獲得全部的s2節點(不考慮層次)
$(“div span”)// 派生選擇器
<div>
<span></span>//找到
<p>
<span></span>//找到
</p>
</div>
<span></span>//找不到
2 $(s1 > s2) [父子]
直接子元素選擇器:在s1內部獲得s2的子元素節點
$(“div > span”)
<div>
<span></span>//找到
<p>
<span></span>
</p>
<span></span>//找到
</div>
<span></span>
3 $(s1 + s2) [兄弟]
直接兄弟選擇器：在s1后邊獲得緊緊挨着的第一個兄弟關系的s2節點
$(“div + span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>//找到
<span></span>
<div></div>
<span></span>//找到
4 $(s1 ~ s2) [兄弟]
后續全部兄弟關系節點選擇器：在s1后邊獲得全部兄弟關系的s2節點
$(“div ~ span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
<span></span>
<p></p>
<span></span>
5 並且(過濾)選擇器
/**************************************************/
<script type="text/javascript">
function f1(){
//$("li").css('background-color','blue');
//① :first 找到第一個
//li元素同時，還需要是第一個
$("li:first").css('background-color','blue');
//② :last 找到最后一個
$("li:last").css('background-color','green');
//③ :eq(下標) 下標從0計算, equal()
$("li:eq(4)").css('background-color','pink');
//④ :gt(索引值) 下標大於條件索引值, great than
$("li:gt(4)").css('color','red');
//⑤ :lt(索引值) 下標小於條件索引值, less than
$("li:lt(3)").css('color','orange');
//⑥ :even 下標索引值等於偶數的
$("li:even").css('background-color','gray');
//⑦ :odd 下標索引值等於奇數的
$("li:odd").css('color','red');
//⑧ :not(選擇器) 去除與“選擇器”匹配的元素
$("li:not(#zhao,#zhang)").css('color','red');
//⑨ :header 獲得h1/h2/h3...的標題元素
$(":header").css('color','blue');
}
</script>
</head>
<body>
<h1>並且選擇器</h1>
<h2>並且選擇器</h2>
<h3>並且選擇器</h3>
<h4>並且選擇器</h4>
<ul>
<li>劉備</li>
<li id="zhang">張飛</li>
<li>關羽</li>
<li id="zhao">趙雲</li>
<li>孫權</li>
<li>周瑜</li>
<li>黃蓋</li>
<li>呂蒙</li>
</ul>
<input type="button" value="觸發" onclick="f1()" />
</body
/**************************************************/
function f1(){
//許多選擇器都可以作為“並且”選擇器使用
//$(s1s2s3s4s5)----->並且選擇器(保證不會產生歧義)
//$(s1,s2,s3,s4,s5)----->聯合選擇器
$("li.hero").css('color','blue');
$(".heroli").css('color','blue'); //產生歧義
$(':header.hero').css('background-color','green');//沒有歧義
$('.hero:header').css('color','red');//沒有歧義
}
<h1>並且選擇器</h1>
<h2 class="hero">並且選擇器</h2>
<h3 class="hero">並且選擇器</h3>
<h4>並且選擇器</h4>
<ul>
<li>劉備</li>
<li id="zhang">張飛</li>
<li class="hero">關羽</li>
<li id="zhao">趙雲</li>
<li class="hero">孫權</li>
<li>周瑜</li>
<li class="hero">黃蓋</li>
<li>呂蒙</li>
</ul>
/**************************************************/
6 內容過濾選擇器
:contains(內容)
包含內容選擇器，獲得節點內部必須通過標簽包含指定的內容
$(“div:contains(beijing)”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
:empty
獲得空元素(內部沒有任何元素/文本(空) )節點對象
$(“div:empty”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>含有<img>節點
<div> </div>//含有 空格實心節點
:has(選擇器)
內部包含指定元素的選擇器
$(“div:has(#apple)”)
<div>hello</div>
<div><p></p></div>
<div><span id=”apple”></span></div>//id選擇器
<div><span class=”apple”></span></div>
:parent
尋找的節點必須作為父元素節點存在
$(“div:parent”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div> </div>
/********************************************/
function f1(){
//① $(":contains(text)")
$("div:contains(beijing)").css('background-color','red');
//② $(":empty")
$("div:empty").css('width','200px');
$("div:empty").css('height','100px');
$("div:empty").css('background-color','pink');
//③ $(":has(selector)")
console.log($("div:has(.orange)"));
//④ $(":parent")
console.log($("div:parent"));
}
<h1>內容過濾選擇器</h1>
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div> </div>
<div><p class="orange"></p></div>
<div><span class="orange"></span></div>
<input type="button" value="觸發" onclick="f1()" />
/*********************************************/