锋利的 jQuery (第二版) jQuery 选择器

2024年4月6日 178次阅读 来源: water_law

2.1 jQuery 选择器的概念

1. CSS 选择器
常用 CSS 选择器（几乎所有浏览器都支持的 CSS 选择器）
标签选择器、ID选择器、类选择器、 群组选择器（多个选择器组合）、后代选择器（写法: E F{ }）、通配选择器（写法: *{ }）；

其他 CSS 选择器
伪类选择器（E:PseudoElements{}）、子类选择器（E>F{}）、邻近选择器（E+F{}）和属性选择器（E[attr]{}）。主流浏览器并非支持所有的 CSS 选择器。
1. jQuery 选择器
jQuery 选择器拥有跨浏览器兼容性。

2.2 jQuery 选择器的优势

1. 简洁
$() 为多种 javascript 库作为选择器函数使用。
2. 完善的事件处理机制
jQuery 在获取网页中并不存在的元素不会报错。
$(”)获取的永远是对象，即使网页中并不存在该元素。因而检查某元素在网页是否存在时，不可使用

if ($("#a")) {
}

应该根据获取元素的长度来判断，

if ($("#a").length > 0) {
}

或者转化为 DOM 对象

if ($("#a")[0]) {
}

2.3 jQuery 选择器

2.3.1 基本选择器

$("#ID"), $(".class"), $("tagName"), $("*"), 群组选择器

2.3.2 层次选择器

$("ancestor descendant"), $("parent> child"), $("prex + next"), $("prex ~ siblings")。

2.3.3 过滤选择器

…

2.3.4 表单选择器

…

2.5 选择器中的注意事项

2.5.1 选择器带有特殊符号， 需要转义

$("#id#b") 换成 $("#id\\#b")

2.5.2 选择器带有空格

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script src="../jquery-1.8.3.js"></script>
</head>

<body>
    <div class="div">
        <div style="display:none;"></div>
        <div style="display:none;"></div>
        <div style="display:none;"></div>
        <div class="div" style="display:none;"></div>
    </div>
    <div class="div">
        <div class="div" style="display:none;"></div>
        <div class="div" style="display:none;"></div>
    </div>
</body>
<script>
$(function() {
    var $a = $(".div :hidden");
    var $b = $(".div:hidden");
    var a_len = $a.length;     // 6
    var b_len = $b.length;     // 3
    alert(a_len);
    alert(b_len);
});
</script>

</html>

//后代选择器
var $a = $(".div :hidden");   // 选取 class 为 div 的元素里面的隐藏元素。
//过滤选择器
var $b = $(".div:hidden");   // 选取隐藏的 class 为 div 的元素。
    原文作者：water_law
    原文地址: https://segmentfault.com/a/1190000008127132
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞