jQuery 層次選擇器

時間 2019-12-14

標籤 jquery 層次選擇器欄目 JQuery 简体版

原文原文鏈接

1　　 派生選擇器：在s1內部得到所有的s2節點(不考慮層次)javascript

　　$(「div span」)// 派生選擇器css

　　<div>java

　　<span></span>//找到app

　　<p>less

　　<span></span>//找到spa

　　</p>對象

　　</div>blog

　　<span></span>//找不到索引

2 $(s1 > s2) [父子]ip

直接子元素選擇器:在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()" />

/*********************************************/

相關文章

相關標籤/搜索

Pipelines選擇器

jQuery Mobile 教程

瀏覽器信息

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<