这里记录一下JQuery中的常用选择器和过滤器,以及使用示例,以便查找使用。
我是T型人小付,一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我,如果有问题欢迎在底下的评论区交流,谢谢。
JQuery和原生JS的转换
一定要注意,JQ中的方法和原生JS中完全不同,不要混淆。
JQ的选择器返回的结果是一个类似数组的对象,可以通过[n]
来将其中某个标签转为原生JS标签,例如下面就是用JQ查询出所有p标签,然后使用下标1来返回第二个p标签的原生JS。之后就可以用原生JS的方法来操作了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="box">
<p>Hello jQuery1</p>
<p>Hello jQuery2</p>
<p>Hello jQuery3</p>
</div>
<script type="text/javascript">
$(document).ready(()=>{
console.log($('p')[1].innerText);
})
</script>
</body>
</html>
如果只有一个JQ元素,用
[0]
来转换
原生JS转JQ就更简单些,直接加$符号即可**,例如
var div = document.getElementById('box');
var $box = $(div);
console.log($box);
JQ的变量建议使用$开头,便于区分
那么现在问题就来了,我用JQ的选择器一下子返回了3个p标签,我只想选择其中第二个p标签,但是又不能用中括号,该怎么样用JQ去操作呢?这就需要用到后面的过滤器了。
基本选择器
JQ中的选择器和css中的基本一致。
-
ID选择器
$('#box')
-
元素选择器
$('p')
-
类选择器
$('.classname')
-
复合选择器
将多个选择器用逗号连接,只要满足其中任意一个选择器就满足匹配,例如
$('.class1,#box')
匹配类名为class1或者id为box的标签 -
通配符选择器
$('*')
,匹配页面上的所有元素
选择到目标标签以后就可以通过text()
,html()
或者val()
去获取和设置内容,或者通过attr()
去设置属性,例如
var $box=$('#box');
$box.attr('name','test');
$box.html('<p>This is new me</p>');
注意,如果JQ匹配到多个元素,设置的时候是对JQ中的全部元素同时操作,而读取的时候只是对第一个元素
层次选择器
层次选择器也和css的一样。
-
后代选择器
$('#box p')
表示id为box下的所有p标签 -
子元素选择器
$('#box>p')
表示id为box下的p标签子元素,孙子元素往下就不匹配了 -
相邻选择器
$('prev+next')
表示紧挨着prev元素的next元素,其中prev和next都是有效选择器,且为同级别元素 -
兄弟选择器
$('prev~siblings')
表示prev元素后面所有同辈的siblings元素
简单过滤器
过滤器附加在选择器后面,用于对选择器匹配的元素进行进一步筛选。注意选择器和过滤器之间没有空格,例如
$('selector:filter')
,当然,过滤器也是一种选择器,可以单独使用
-
:first
第一个元素
-
:last
最后一个元素
-
:even
偶数位的元素
-
:odd
奇数位的元素
-
:eq(index)
下标为index的元素,注意下标是从0开始
-
:gt(index)
下标大于index的元素
-
:lt(index)
下标小于index的元素
-
:header
所有的标题元素,也就是
h1
到h6
-
:not(selector)
剔除掉满足条件的某些元素
-
:animated
所有的动画元素
内容过滤器
-
:contains(text)
包含指定字符串的所有元素
-
:empty
没有任何子元素的元素,例如剔除所有空元素
$(:not(:empty))
-
:has(selector)
含有满足条件的某些元素的元素
-
:parent
父元素
可见性过滤器
-
:visible
可见的元素
-
:hidden
不可见元素,不管是通过何种方式设置为不可见都满足
表单对象属性过滤器
- :checked
- :disabled
- :enabled
- :selected
子元素过滤器
-
:first-child
-
:last-child
-
:only-child
如果只有这么唯一一个子元素,就选出这个子元素
-
:nth-child(index/even/odd)
属性选择器
-
[attribute]
带该属性的元素都被选择
-
[attribute=value]
-
[attribute!=value]
-
[attribute*=value]
属性的值含有指定的内容就被选择
-
[attribute^=value]
属性的值以指定的内容开头就被选择
-
[attribute$=value]
属性的值以指定内容结尾就被选择
-
[selector1][selector2][selector3]
复合选择器,需要同时满足多个条件才会被选择
表单选择器
-
:input
所有的input标签,注意这也包括form外面的,可以通过
$("form :input")
来单独匹配form内部的 -
:button
所有
type="button"
的input标签,也有可能匹配到form外的,后面的类似,不再重复 -
:checkbox
-
:file
-
:hidden
-
:image
-
:password
-
:radio
-
:reset
-
:submit
-
:text
注意事项
- 空格
空格表示子元素,因为过滤器也可以单独使用,所以千万要注意区分下面两种情况
$(div :hidden)
和$(div:hidden)
分别表示div下隐藏的子元素和隐藏的div元素
- 特殊符号
基本上只要注意一下,不要在元素的属性里面出现特殊符号即可。如果真的有特殊符号,可以用\\
进行转义