基础选择器
视频参考第十章-CSS选择器
| 选择器 | 名称 | 描述 | 返回 | 示例 |
|---|---|---|---|---|
| #id | id选择器 | 根据给定的id匹配一个元素 | 单个元素 | $("#box");选取id为box元素 |
| .class | 类选择器 | 根据给定的类名匹配元素 | 集合元素 | $(".box");选取所有类名为box元素 |
| element | 元素选择器 | 根据给定的元素名称匹配元素 | 集合元素 | $("p");选取所有<p>元素 |
| * | 通配符选择器 | 匹配所有元素 | 集合元素 | $("*");选取所有元素 |
| selector1,selector2,selectorN | 并集选择器 | 将所有选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,p,.box");选取所有<div>元素,所有<p>元素和所有类名为box元素 |
层次选择器
视频参考第十章-CSS选择器
| 选择器 | 名称 | 描述 | 返回 | 示例 |
|---|---|---|---|---|
| $("ancestor descendant") | 后代选择器 | 选取ancestor元素的所有descendant后代标签(不光是儿子,包括孙子/重孙子等) | 集合元素 | $("div span");选取<div>元素里所有的<span>元素 |
| $("parent > child") | 子元素选择器 | 找到选取parent 元素中所有直接子元素child(只有儿子,不包括孙子/重孙子等) | 集合元素 | $("div>span");选取<div>元素下元素名称是<span>的子元素 |
| $("prev + next") | 相邻兄弟选择器 | 选取prev元素后面紧跟的那个next元素 | 集合元素 | $(".one+div");选取类名为one的下一个同级的<div>元素 |
| $("prev ~ siblings") | 通用兄弟选择器 | 选取prev元素后面的所有next元素 | 集合元素 | $("#two~div");选取id名为two元素后面所有同级的<div>元素 |
序选择器
视频参考第十章-CSS选择器
如上内容不再一一赘述,观看第十章-CSS选择器,使用时查询文档即可
做开发是脑力活,我们需要掌握的是解决问题的方法,而不是死记硬背
属性选择器
视频参考第十章-CSS选择器
如上内容不再一一赘述,观看第十章-CSS选择器,使用时查询文档即可
做开发是脑力活,我们需要掌握的是解决问题的方法,而不是死记硬背
内容过滤选择器
| 选择器 | 描述 | 返回 |
|---|---|---|
| :empty | 选取不包含子元素或文本为空的元素 | 集合元素 |
| :parent | 选取含有子元素或文本的元素 | 集合元素 |
| :contains(text) | 选取含有文本内容为text的元素 | 集合元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 |
:empty
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>05-jQuery选择器</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="代码/js/jquery-1.12.4.js"></script>
<script>
$(function () { // 找到所有div中不包含文本内容或子元素的元素
var $res = $("div:empty"); console.log($res.length); // 找到1个元素
$res.each(function (idx,ele) { console.log(idx, ele); // one
});
}); </script></head><body><div class="one"></div><div class="two">zs</div><!--包含内容不会被找到--><div class="three"><!--包含子元素不会被找到-->
<span>lnj</span></div><span class="five"></span><!--不是指定元素不会被找到--></body></html>:parent
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>05-jQuery选择器</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="代码/js/jquery-1.12.4.js"></script>
<script>
$(function () { // 找到所有div中包含文本内容或子元素的元素
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><!--有文本内容会被找到--><div class="three"><!--有子元素会被找到-->
<span>lnj</span></div><span class="five"></span></body></html>:contains(text)
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>05-jQuery选择器</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="代码/js/jquery-1.12.4.js"></script>
<script>
$(function () { // 找到所有div中包含文本内容为lnj的元素
var $res = $("div:contains('lnj')"); console.log($res.length);// 找到2个元素
$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"><!--子元素中包含该文本也会被找到-->
<span>lnj</span></div><span class="five"></span></body></html>:has(selector)
和:parent区别,parent只要有子元素就会被找到,:has(selector)不仅要有子元素,而且子元素还必须满足我们的条件
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>05-jQuery选择器</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="代码/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元素会被找到-->
<span>jjj</span></div><div class="two"><!--后代中不包含span元素不会被找到-->
<p>zs</p></div><div class="three"><!--后代中包含span元素会被找到-->
<p>
<span>lnj</span>
</p></div></body></html>
作者：极客江南
链接：https://www.jianshu.com/p/1f4090e59e6c
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦