JQuery的选择器和过滤器汇总

最新推荐文章于 2022-03-11 21:04:14 发布

T型人小付

最新推荐文章于 2022-03-11 21:04:14 发布

阅读量703

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Victor2code/article/details/106757438

版权

前端专栏收录该内容

26 篇文章 2 订阅

订阅专栏

这里记录一下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元素

特殊符号

基本上只要注意一下，不要在元素的属性里面出现特殊符号即可。如果真的有特殊符号，可以用\\进行转义

T型人小付

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JQuery的选择器和过滤器汇总

这里记录一下JQuery中的常用选择器和过滤器，以及使用示例，以便查找使用。我是T型人小付，一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我，如果有问题欢迎在底下的评论区交流，谢谢。文章目录JQuery和原生JS的转换基本选择器层次选择器简单过滤器内容过滤器可见性过滤器表单对象属性过滤器子元素过滤器属性选择器表单选择器注意事项JQuery和原生JS的转换一定要注意，JQ中的方法和原生JS中完全不同，不要混淆。JQ的选择器返回的结果是一个类似数组的对象，可以通过[n]来将其中某
复制链接

扫一扫