锋利的Jquery【读书笔记】 -- 第二章 jQuery选择器

最新推荐文章于 2024-09-23 08:37:48 发布

CherishLyf

最新推荐文章于 2024-09-23 08:37:48 发布

阅读量509

点赞数

分类专栏：锋利的jQuery【读书笔记】文章标签： jquery javascript

本文链接：https://blog.csdn.net/cherishlyf/article/details/48402589

版权

锋利的jQuery【读书笔记】专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第二章 jQuery选择器

第二章 jQuery选择器
- jQuery选择器

jQuery选择器

jQuery选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素才生效。
比如：

<script>
    function demo(){
        alert("JavaScript demo!");
    }
 </script>
</head>
<body>
    <p onclick="demo()">点击我</p>
</body>

jQuery的写法：

<script>
    $(".demo").click(function(){
        alert("jQuery demo!");
    })
</script>

jQuery获取到元素的代码如下：

$(".demo").click(function(){       //给class名为demo的元素添加行为

})

jQuery的优势

简洁的写法
用 $("#ID") 来代替 document.getElementById();
用$("tagName") 用来代替document.getElementsByTagName() ;
完善的处理机制
比如：

$("#tt") 获取的永远是对象，即使网页并没有这个元素。

因此要检查jQuery中某个元素是否存在，不能使用下面代码：

if($("#tt")){
    //  do something
}

而应该判断获取到元素的长度来判断：

if($("#tt").length >0){
    //   do something
}

基本选择器

选择器	描述	返回	示例
id	根据给定ID匹配一个元素	单个元素	`$("#test")`选取ID为test的元素
.class	根据给定类名匹配元素	集合元素	`$(".test")`选取所有class名为test的元素
element	根据给定元素名匹配元素	集合元素	`$("p")`选取所有`<p>`标签
*	匹配所有元素	集合元素	`$("*")`选取所有元素
selector1,selector2,…selecteorN	将每个选择器匹配到的元素合并后一起返回	集合元素	`$("div,span,p.myClass")` 选取所有div和span和拥有class名为myClass的p标签的一组元素

选择器实例：
改变Id为one的元素的背景色：

$("#one")
        .css("background","#bbffaa");

改变class名为mini的所有元素的背景色：

$(".mini")
         .css("background","#bbffaa");

改变<div> 所有元素的背景色

$("div")
        .css("background","#bbffaa");

层次选择器

选择器	描述	返回	示例
`$("ancestor descendant")`	选取ancestor元素里面的所有descendant（后代）元素	集合元素	`$("div span")` 选取`<div>`中所有的`<span>`元素
`$("parent > child")`	选取parent元素下的child（子）元素，与`$("ancestor descendant")` 有区别， `$("ancestor descendant")` 选择的是后代元素	集合元素	`$("parent > child")`选取`<div>` 元素下的元素名为`<span>` 的子元素
`$("prev+next")`	选取紧接在prev元素后面的next元素	集合元素	`$(".one+div")`选取class为one的下一个`<div>` 同辈元素
`$("prev~siblings")`	选取prev元素之后的所有siblings元素	集合元素	`$("#two~div")`选取id为two的元素后面的所有`<div>` 同辈元素

注意：层级选择器中前两个比较常用，后两个可以用更加简单的方法代替，使用几率较低。

可以使用 next()方法来代替 $("prev+next") 选择器，比如：

$(".one+div") 等价于 $(".one").next("div");

可以使用 nextAll()方法代替$("prev~sibling") 选择器，比如：

$("#prev~div") 等价于 $("#prev").nextAll("div");

siblings()方法与前后位置无关，只要是同辈几点就能匹配。

基本过滤选择器

选择器	描述	返回
:first	选取第一元素	集合元素
:last	选取最后一个元素	集合元素
:not(selector)	去除所有与给定选择器匹配的元素	集合元素
:even	选取索引为偶数的所有元素，索引从0开始	集合元素
:odd	选取索引为奇数的所有元素，索引从0开始	集合元素
:eq(index)	选取索引等于index的元素，索引从0开始	单个元素
:gt(index)	选取索引大于index的所有元素(不包括index)，索引从0开始	集合元素
:lt(index)	选取索引小于index的所有元素(不包括index)，索引从0开始	集合元素
:header	选取所有标题元素,例如h1,h2等	集合元素
:animated	选区正在执行动画的所有元素	集合元素
:focus	选取当前获取焦点的元素	集合元素

内容过滤选择器

选择器	描述	返回
:contains(text)	选取含有文本内容为”text”的元素	集合元素
:empty	选取不含子元素或者文本的空元素	集合元素
:has(selector)	选择含有选择器所匹配的元素的元	集合元素
:paresnt	选取含有子元素或者文本的元素	集合元素

可见性过滤器

选择器	描述	返回	示例
:hidden	选取所有不可见的元素	集合元素
:visible	选取所有可见的元素	集合元素

注意：选择器:hidden，它不仅包括样式属性display为”none”的元素，也包含隐藏域` 和 visibility：hidden 之类的元素。

属性过滤选择器

选择器	描述	返回
[attribute]	选取拥有此属性的元素	集合元素
[attribute=value]	选取属性的值为value的元素	集合元素
[attribute!=value]	选取属性的值不是value的元素	集合元素
[attribute^=value]	选取属性的值以value开始的元素	集合元素
[attribute$=value]	选取属性的值以value结束的元素	集合元素
[attribute*=value]	选取属性的值含有value的元素	集合元素
[attribute\|=value]	选取属性等于给定字符串以该字符串为前缀（或者字符串后跟一个连字符”-“的元素）	集合元素
[attribute~=value]	选取属性用空格分隔的值中包含一个给定值的元素	集合元素

子元素过滤选择器

选择器	描述	返回
:nth-child(index/even/odd/equation)	选取将为每一个父元素下第index个子元素或者奇偶元素（index从1算起）	集合元素
:first-child	选取将为每一个父元素下的第1个子元素	集合元素
:last-child	选取将为每一个父元素下的最后一个子元素	集合元素
:only-child	如果某个元素是它父级元素中唯一的子元素，那么将会匹配。如果父元素含有其他元素，就不会被匹配	集合元素

:nth-child()选择器是个很常用的子元素过滤选择器：

:nth-child(even)能选择每个父元素下的索引值是偶数的元素。
:nth-child(odd)能选择每个父元素下的索引值是奇数的元素。
:nth-child(2)能选择每个父元素下的索引值是2的元素。
:nth-child(3n)能选择每个父元素下的索引值是3的倍数的元素。（n从1开始）
:nth-child(3n+1)能选择每个父元素下的索引值是（3n+1）的元素。（n从1开始）

注意：eq(index) 只匹配一个元素，而 :nth-child() 将为每一个符合条件的父元素匹配子元素。并且eq(index)从0开始，:nth-child()的index是从1开始。同理:first和:first-child,:last和:last-child。

表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤，例如被选中的下拉框，多选框等。

选择器	描述	返回
:enabled	选取所有可用元素	集合元素
:disabled	选取所有不可用元素	集合元素
:checked	选取所有被选中的元素(单选框，复选框)	集合元素
:selected	选取所有被选中的选项元素(下拉列表)	集合元素

表单对象属性过滤选择器示例

作用	代码	执行后
改变表单内可用`<input>` 元素的值	`$("#form1 input:enabled").val("这里变化了！")`
改变表单内不可用`<input>` 元素的值	`$("#form1 input:disabled").val("这里变化了！")`
获取多选框选中个数	`$("input:checked").length`
获取下拉框选中内容	`$("select:selected").text()`

表单选择器

选择器	描述	返回
:input	选取所有`<input>、<textarea>、<select>和<button>` 元素	集合元素
:text	选取所有单行文本框	集合元素
:radio	选取所有单选框	集合元素
:checkbox	选取所有多选框	集合元素
:submit	选取所有的提交按钮	集合元素
:image	选取所有的图像按钮	集合元素
:button	选取所有的按钮	集合元素
:file	选取所有的上传域	集合元素
:hidden	选取所有不可见元素	集合元素