jquery中的选择器用法与归类

最新推荐文章于 2023-03-06 11:14:57 发布

chen_晨风

最新推荐文章于 2023-03-06 11:14:57 发布

阅读量1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_37674616/article/details/82750954

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

选择器

基本选择器

通配符选择器	*	$("*")选取所有元素
id选择器	#id	$("#one")选取id为one的元素
类选择器	.class	$(".two")选取所有class为two的元素
标签选择器	标签名	$("p")选取所有<p>标签
群组选择器	#one,.two	$("#one,.two") 选取id为one和class为two的元素
复合选择器	div.one 取交集	$(".one")选取div中class为one的元素

层次选择器

后代选择器	$(div span) 选取<div>中所有的<span>元素
子代选择器	$(div>span) 选取<div>元素下元素名为<span>的子元素
兄弟选择器	$('.one + div')选取class为one的下一个<div>元素(.one与div是兄弟)
兄弟选择器	$('.one ~ div')选取class为one的元素后面的所有<div>兄弟元素

过滤器

主要是通过特定的过滤规则来筛选出所需要的DOM元素,过滤规则与css中的伪类选择器语法相同，即选择器都以冒号开头.

基本过滤器

:first	选取第一个元素	$('.outer:first') 选取第一个class为one中的第一个元素（只返回第一个class为one的第一个元素）
:last	选取最后一个元素	$('.outer:last') 选取最后一个class为one中的最后一个元素
:even	选取索引是偶数的所有元素，索引从0开始	$('p:even')选取索引为偶数的<p>元素
:odd	选取索引是奇数的所示元素, 索引从0开始	$('p:odd')选取索引为奇数数的<p>元素
:eq(index)	获取索引为index的元素	$('p:eq(3)')选取索引为3的<p>元素
:lt(num)	选取索引大于index的元素	$('p:lt(3)')选取索引小于3的<p>元素
:gt(num)	/选取索引小于index的元素	$('p:lt(3)')选取索引大于3的<p>元素
:not(sleector2)	去除所有与给定选择器匹配的元素	$(input:not(.one))选取class不是one的<input>元素
:header	选取所有h1-h6标题	$(:header)选取网页中所有标题元素

案例:选取索引大于2 小于5的元素

   var $temp=$('p:lt(5):gt(2)');

内容过滤器

:contains(text)
选择文本中包含"text"的元素


<body>
	<div>one</div>
	<div>two</div>
	<div>three</div>
	<div>hello <p>world</p></div>
	<div></div>
<script>
    var $temp=$('div:contains("e")');
    console.log($temp);
</script>
</body>

selector:empty
选择没有内容页或者没有子元素

var $temp=$('div:empty');
console.log($temp);

selector:parent
选择非空元素，有内容或者有子元素

var $temp=$('div:parent');
console.log($temp);

selector:has(选择器)
选取含有选择器所匹配的元素的元素

var $temp=$('div:has(p)');
console.log($temp);

可见性过滤器

:hidden

选择不占据屏幕空间的选择,即body体中不占据屏幕空间

css或html属性有如下设置：

display:none
input type="hidden"

:visible

选择占据屏幕空间的元素

visibility:hidden
opacity:0

属性过滤器

[attrKey]	有某个属性名的元素被选中	$('body *[title]') 选择拥有title属性的元素
[attrKey=attrVal]	选中这个属性并且属性值等于value	$('p[title=one]') 选择属性值等于one的元素
[attrKey^=attrVal]	选择这个属性并且属性值以attrVal开始	$('p[title^=t]') 选择属性以t开头的元素
[attrKey$=attrVal]	选择这个属性并且属性值以attrVal结束	$('p[title$=e]')选择属性以e结尾的元素
[attrKey*=attrVal]	选择这个属性并且属性值中包含atttrVal	$('p[title*=h]')选择属性包含h的元素
[attrKey!=attrVal]	选择这个属性并且属性值不等于attrVal或者没有属性值的元素。	$('p[title!=one]')选择属性值不等于one，或者没有tittle属性的

**:上面测试的html代码如下:

<body>
	<p title='one'>one</p>
	<p title='two'>two</p>
	<p title='three'>three</p>
	<p>four</p>
	<div title="one">divOne</div>
</body>

后代过滤器

:first-child	获取每个父元素中的第一个孩子节点	$('.outer *:first-child') 匹配class为outer下的第一个子元素
:last-child	获取每个父元素中最后一个孩子节点	$('.outer *:last-child') 匹配class为outer下的最后一个子元素
:nth-child(index)	获取每个父元素中的第index个孩子节点 index从1开始	$('.outer *:nth-child(2)')匹配outer下索引为2的元素
:only-child	获取每个父元素中的独生子元素	$('.outer *:only-child')匹配outer下独生子元素(即outer中只有一个子元素)
:last-of-type	获取每个父元素中每中类型中的最后一个元素	$('.outer *:last-of-type')匹配outer下每种类型的最后一个元素，如果outer只有一个子元素则和only-child等价

**：后代选择器是可以不断往下追溯只要满足条件的，而基本过滤器中:first、:last、eq(index)中只返回单个元素。

表单过滤选择器

表单属性

:enabled	选取所有可用元素	$(form:enabled) 选择form表单下所有可用元素
:disabled	选取所有不可用元素	$(form:disabled) 选择form表单下所有不可用元素
:checked	选取所有被选中的元素(单选框、复选框)	$(input:checked)选取input中被选中的元素
:selected	选取所有被选中的选项元素(下拉列表)	$(select:selected)选择下拉列表中被选中的元素
:input	选取所有可输入与可选择的元素(input、textarea、select、button)	$(from:input)选取form表单中可输入与可选择的元素(input、textarea、select、button)
:text	选取所有单行文本框	$('input:text')选取所有单行文本框
:password	选取所有的密码框	$('input:password')选取所有密码框
:radio	选取所有的多选框	$('input:radio')选取所有单选框
:checkbox	选取所有的多选框	$('input:checkbox')选取所有复选框
:submit	选取所有提交按钮	$('input:submit')选取所有input中type等于‘submit’
:image	选取所有图片按钮	$('input:image')选取input中type等于‘image’
:reset	选取所有的重置按钮	$('input:reset')选取input中type等于‘reset’
:button	选取所有的按钮	$('input:button')选取input中type等于‘button’的元素
:file	选取所有的上传域	$(input:submit)选取input中type为file的元素

chen_晨风

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery中的选择器用法与归类

目录选择器基本选择器层次选择器过滤器基本过滤器内容过滤器可见性过滤器属性过滤器后代过滤器表单过滤选择器选择器基本选择器通配符选择器 * $("*")选取所有元素 id选择器 #id $("#one")选取id为one的元素类选择器 .class $(".two")选取所有class为two...
复制链接

扫一扫