基礎(chǔ)選擇器
| 選擇器 |
名稱(chēng) |
描述 |
返回 |
示例 |
| #id |
id選擇器 |
根據(jù)給定的id匹配一個(gè)元素 |
單個(gè)元素 |
$("#box");選取id為box元素 |
| .class |
類(lèi)選擇器 |
根據(jù)給定的類(lèi)名匹配元素 |
集合元素 |
$(".box");選取所有類(lèi)名為box元素 |
| element |
元素選擇器 |
根據(jù)給定的元素名稱(chēng)匹配元素 |
集合元素 |
$("p");選取所有<p>元素 |
| * |
通配符選擇器 |
匹配所有元素 |
集合元素 |
$("*");選取所有元素 |
| selector1,selector2,selectorN |
并集選擇器 |
將所有選擇器匹配到的元素合并后一起返回 |
集合元素 |
$("div,p,.box");選取所有<div>元素,所有<p>元素和所有類(lèi)名為box元素 |
層次選擇器
| 選擇器 |
名稱(chēng) |
描述 |
返回 |
示例 |
| $("ancestor descendant") |
后代選擇器 |
選取ancestor元素的所有descendant后代標(biāo)簽(不光是兒子,包括孫子/重孫子等) |
集合元素 |
$("div span");選取<div>元素里所有的<span>元素 |
| $("parent > child") |
子元素選擇器 |
找到選取parent 元素中所有直接子元素child(只有兒子,不包括孫子/重孫子等) |
集合元素 |
$("div>span");選取<div>元素下元素名稱(chēng)是<span>的子元素 |
| $("prev + next") |
相鄰兄弟選擇器 |
選取prev元素后面緊跟的那個(gè)next元素 |
集合元素 |
$(".one+div");選取類(lèi)名為one的下一個(gè)同級(jí)的<div>元素 |
| $("prev ~ siblings") |
通用兄弟選擇器 |
選取prev元素后面的所有next元素 |
集合元素 |
$("#two~div");選取id名為two元素后面所有同級(jí)的<div>元素 |
序選擇器
如上內(nèi)容不再一一贅述,觀看第十章-CSS選擇器,使用時(shí)查詢(xún)文檔即可
做開(kāi)發(fā)是腦力活,我們需要掌握的是解決問(wèn)題的方法,而不是死記硬背
屬性選擇器
如上內(nèi)容不再一一贅述,觀看第十章-CSS選擇器,使用時(shí)查詢(xún)文檔即可
做開(kāi)發(fā)是腦力活,我們需要掌握的是解決問(wèn)題的方法,而不是死記硬背
內(nèi)容過(guò)濾選擇器
| 選擇器 |
描述 |
返回 |
| :empty |
選取不包含子元素或文本為空的元素 |
集合元素 |
| :parent |
選取含有子元素或文本的元素 |
集合元素 |
| :contains(text) |
選取含有文本內(nèi)容為text的元素 |
集合元素 |
| :has(selector) |
選取含有選擇器所匹配的元素的元素 |
集合元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-jQuery選擇器</title>
<script src="代碼/js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 找到所有div中不包含文本內(nèi)容或子元素的元素
var $res = $("div:empty");
console.log($res.length); // 找到1個(gè)元素
$res.each(function (idx,ele) {
console.log(idx, ele); // one
});
});
</script>
</head>
<body>
<div class="one"></div>
<div class="two">zs</div><!--包含內(nèi)容不會(huì)被找到-->
<div class="three"><!--包含子元素不會(huì)被找到-->
<span>lnj</span>
</div>
<span class="five"></span><!--不是指定元素不會(huì)被找到-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-jQuery選擇器</title>
<script src="代碼/js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 找到所有div中包含文本內(nèi)容或子元素的元素
var $res = $("div:parent");
console.log($res.length);
$res.each(function (idx, ele) {
console.log(idx, ele);
});
});
</script>
</head>
<body>
<div class="one"></div>
<div class="two">zs</div><!--有文本內(nèi)容會(huì)被找到-->
<div class="three"><!--有子元素會(huì)被找到-->
<span>lnj</span>
</div>
<span class="five"></span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-jQuery選擇器</title>
<script src="代碼/js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 找到所有div中包含文本內(nèi)容為lnj的元素
var $res = $("div:contains('lnj')");
console.log($res.length);// 找到2個(gè)元素
$res.each(function (idx, ele) {
console.log(idx, ele);// one,three,four
})
});
</script>
</head>
<body>
<div class="one">lnj</div>
<div class="two">zs</div>
<div class="three">lnj</div>
<div class="four"><!--子元素中包含該文本也會(huì)被找到-->
<span>lnj</span>
</div>
<span class="five"></span>
</body>
</html>
-
:has(selector)
- 和:parent區(qū)別,parent只要有子元素就會(huì)被找到,:has(selector)不僅要有子元素,而且子元素還必須滿(mǎn)足我們的條件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-jQuery選擇器</title>
<script src="代碼/js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 找到所有div中包含后代元素為span的元素
var $res = $("div:has('span')");
console.log($res.length);
$res.each(function (idx, ele) {
console.log(idx, ele);
});
});
</script>
</head>
<body>
<div class="one"> <!--后代中包含span元素會(huì)被找到-->
<span>jjj</span>
</div>
<div class="two"><!--后代中不包含span元素不會(huì)被找到-->
<p>zs</p>
</div>
<div class="three"><!--后代中包含span元素會(huì)被找到-->
<p>
<span>lnj</span>
</p>
</div>
</body>
</html>
