jquery中有哪几种类型的选择器?

jQuery选择器

一、基本选择器

基本选择器是jQuery中最常用也是最简单的选择器,它通过元素的id、class和标签名等来查找DOM元素。

1、ID选择器 #id

描述:根据给定的id匹配一个元素, 返回单个元素(注:在网页中,id名称不能重复)

示例:$("#test") 选取 id 为 test 的元素

2、类选择器 .class

描述:根据给定的类名匹配元素,返回元素集合

示例:$(".test") 选取所有class为test的元素

3、元素(标签)选择器 element

描述:根据给定的元素名匹配元素,返回元素集合

示例:$("p") 选取所有的<p>元素 $("div") :选取所有的div标签

4、*

描述:匹配所有元素,返回元素集合

示例:$("*") 选取所有的元素

5、selector1,selector2,...,selectorN(并集选择器)

描述:将每个选择器匹配到的元素合并后一起返回,返回合并后的元素集合

示例:$("p,span,p.myClass") 选取所有<p>,<span>和class为myClass的<p>标签的元素集合

二、层次选择器

层次选择器根据层次关系获取特定元素。

1、后代选择器

示例:$("p span") 选取<p>元素里的所有的<span>元素(注:后代选择器选择父元素所有指定选择的元素,不管是儿子级,还是孙子级)

2、子选择器 $("parent>child")

示例:$("p>span") 选择<p>元素下的所有<span>元素 (注:子选择器只选择直属于父元素的子元素)

3、同辈选择器 $("prev+next")

描述:选取紧接在prev元素后的next元素,返回元素集合

示例:$(".one+p") 选取class为one的下一个<p>同辈元素集合

4、同辈选择器 $("prev~siblings")

描述:选取prev元素后的所有siblings元素,返回元素集合

示例:$("#two~p")选取id为two的元素后所有<p>同辈元素集合

三、过滤选择器

1>基本过滤选择器

1、 :first

描述:选取第一个元素,返回单个元素

示例:$("p:first") 选取所有<p>元素中第一个<p>元素

2、 :last

描述:选取最后一个元素,返回单个元素

示例:$("p:last") 选取所有<p>元素中最后一个<p>元素

3、 :not(selector)

描述:去除所有与给定选择器匹配的元素,返回元素集合

示例:$("input:not(.myClass)") 选取class不是myClass的<input>元素

4、 :even

描述:选取索引是偶数的所有元素,索引从0开始,返回元素集合

5、 :odd

描述:选取索引是奇数的所有元素,索引从0开始,返回元素集合

6、 :eq(index)

描述:选取索引等于index的元素,索引从0开始,返回单个元素

7、 :gt(index)

描述:选取索引大于index的元素,索引从0开始,返回元素集合

8、 :lt(index)

描述:选取索引小于于index的元素,索引从0开始,返回元素集合

9、 :focus

描述:选取当前获取焦点的元素

2>内容过滤选择器

1、:contains(text)

描述:选取含有文本内容为text的元素,返回元素集合

示例:$("p:contains('我')") 选取含有文本“我”的元素

2、:empty

描述:选取不包含子元素或者文本元素的空元素,返回元素集合

示例:$("p:empty") 选取不包含子元素或者文本元素的空<p>元素(<p></p>)

3、:has(selector)

描述:选取含有选择器所匹配的元素的元素,返回元素集合

示例:$("p:has(p)") 选取含有<p>元素的<p>元素(<p><p/></p>)

4、:parent

描述:选取含有子元素或者文本的元素,返回元素集合

示例:$("p:parent") 选取含有子元素或者文本元素的<p>元素(<p><p/></p>或者<p>文本</p>)

3>可见性过滤选择器

1、:hidden

描述:选取所有不可见的元素,返回元素集合

2、:visible

描述:选取所有可见的元素,返回元素集合

4>属性过滤选择器(返回元素集合)

1、[attribute]

示例:$("p[id]") 选取拥有id属性的p元素

2、[attribute=value]

示例:$("input[name=text]") 选取拥有name属性等于text的input元素

3、[attribute!=value]

示例:$("input[name!=text]") 选取拥有name属性不等于text的input元素

4、[attribute^=value]

示例:$("input[name^=text]") 选取拥有name属性以text开始的input元素

5、[attribute$=value]

示例:$("input[name$=text]") 选取拥有name属性以text结束的input元素

6、[attribute*=value]

示例:$("input[name*=text]") 选取拥有name属性含有text的input元素

7、[attribute~=value]

示例:$("input[class~=text]") 选取拥有class属性以空格分割的值中含有text的input元素

8、[attribute1][attribute2][attributeN]

描述:合并多个属性过滤选择器

5>表单对象属性过滤选择器(返回元素集合)

1、:enabled

描述:选取所有可用元素

2、:disabled

描述:选取所有不可用元素

3、:checked

描述:选取所有被选中的元素(单选框,复选框)

示例:$("input:checked") 选取所有被选中的<input>元素

4、:selected

描述:选取所有被选中的选项元素(下拉列表)

示例:$("select option:selected") 选取所有被选中的选项元素

四、表单选择器(返回元素集合,使用相似)

1、:text

描述:选择所有的单行文本框

示例:$(":text")选取所有的单行文本框

2、:password

描述:选择所有的密码框

3、:button

描述:选择所有的按钮

4、:checkbox

描述:选择所有的多选框

Image placeholder
前端答疑
未设置
  24人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery有几种选择器?

jquery有几种选择器?很多种,大概归纳为9种。1、基本的有id、标签、类、通配符选择器:#id element .class *2、层次选择器:ancestordescendant parent>

jquery基本过滤选择器有哪些?

jquery基本过滤选择器:1、first()或者:first选取第一个元素//选择第一个div元素 $('div:first') $('div').first()2、last()或者:last选取最

jquery表单选择器有哪些?

jquery表单选择器有哪些?jquery虽然可以使用常规选择器来对表单的元素进行定位,但有时还是不能满足开发者灵活多变的需求。所以,jQuery为表单提供了专用的选择器。:input:选取所有inp

jquery内容过滤选择器有哪些?

:contains(text):empty:has(seletor):parent先写几个DOM元素的HTML结构:JohnResign GeorgeMartin MalcomJohnSinclair

jquery可见性过滤选择器有哪些?

jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素。主要有两个:过滤器名jQuery语法说明返回:hidden$(':hidden')选取所有不可见元素集合元素:visible$

css样式有哪几种?

CSS即层叠样式表(CascadingStyleSheets),是一种用来表现HTML或XML等文件样式的计算机语言。CSS主要用来设计网页的样式,美化网页;它不仅可以静态地修饰网页,还可以配合各种脚

jquery有哪四种表单过滤器?

jQuery提供了四种表单过滤器,分别在是否可以用、是否选定来进行表单字段的筛选过滤。名称说明解释:enabled匹配所有可用元素查找所有可用的input元素:$("input:enabled"):d

jQuery选择器的的优点是什么

jQuery选择器的的优点1、简洁的写法,说道简洁的写法,给大家列举一下例子,看看jQ和原生哪个更方便。。2、提供了完善的处理机制(完善的兼容处理)3、jQuery选择器判断dom节点存在的方法:4、

三种类型的物联网平台分析

企业依靠其物联网平台提供许多服务。其中最重要的是分析。通俗地说,物联网分析是一门科学和艺术,它试图在连接资产生成的海量数据中找到模式。MachNation的物联网平台测试实验室给出更详尽地定义,分析是

css常见选择器有哪些?优先级是什么?

选择器也称为选择符,所有的html语言中的标记都是通过css选择器控制的。常见的css选择器有标签选择器、类选择器、id选择器、通配符选择器。1、标签选择器标签选择器,也称为元素选择器。标签选择器的基

css属性选择器有哪些?

css属性选择器有哪些?[attribute]用于选取带有指定属性的元素。该选择器选择包含attribute属性的所有元素,不论attribute的值为何。[attribute=value]用于选取带

jquery和jquery ui的区别?

jquery和jqueryui的区别?区别有:1、jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 2、jQueryUI则是在jQuery的基础上,利用jQuery的扩展性,

jquery中deferred对象是什么?

jquery中deferred对象是什么?Deferred是JQuery的一个延迟对象,意思是函数延迟到某个点才开始执行,改变执行状态的方法有两个(成功:resolve和失败:reject),分别对应

jquery中slider是什么?

slider(滑块)是jqueryUI中的一个小插件。jQueryUI滑块(Slider)插件允许通过滑块进行选择。有各种不同的选项,比如多个手柄和范围。手柄可通过鼠标或箭头按键进行移动。滑块部件(S

jQuery中this和$(this)的区别是什么?

jQuery中this和$(this)的区别是什么?●$(this)相当于jQuery(this),是一个jQuery对象,只能使用jQuery的属性和方法;●this中存放的是DOM元素,属于jav

jquery中each()怎么用?

jquery中each()怎么用?在jquery中的each有两种用法,分别是$.each()和$(selector).each()。$(selector).each()用于jquery对象的遍历$.

jQuery中attr()和prop()的区别?

attr():attr()方法设置或返回被选元素的属性和值。当该方法用于返回属性值,则返回第一个匹配元素的值。当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。prop():prop()方

jQuery中click()方法如何使用?

jQuery中click()方法如何使用?作用:click()方法触发click事件,或规定当发生click事件时运行的函数。语法:$(selector).click() $(selector).cl

jQuery中#是什么意思?

jQuery中#是什么意思?#是jquery选择器的一种形式,匹配任意html中id的对象。$("#idvalue"):这个代码选中html文档中,即;jQuery元素选择器和属性选择器允许您通过标签

jquery中on()和click()的区别是什么?

on()和click()的区别:click()属于静态加载,当页面加载完,就不在为新增加的元素添加点击事件。on()属于动态加载,当页面加载完,可以为新增加的元素添加事件。但是必须选定负级元素。二者在

jquery中bind与on的区别是什么?

jquery中bind与on的区别bind和on都是事件绑定,都是给元素绑定事件用的,但是两者却又有着一个大区别:事件冒泡(事件代理)。事件冒泡也是委托事件的原型,事件委托就是子类的事情委托给父类的去

jquery中children()和find()的区别是什么?

jquery中children()和find()的区别children(selector)方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行

jquery中prop()和attr()之间有什么区别?

1、操作对象不同很明显,attr和prop分别是单词attribute和property的缩写,并且它们均表示"属性"的意思。不过,在jQuery中,attribute和property却是两个不同的

jquery中size()与length的区别是什么?

jQuerylength和size()区别length是属性,size()是方法。如果你只是想获取元素的个数,两者效果一样既("img").length和("img").size()获取的值是一样的。

jquery中文乱码怎么解决?

jquery中文乱码怎么解决?最近使用jQuery遇到中文乱码问题,其实他的中文乱码就是因为contentType没有指定编码,只需在jQuery.js中搜索‘contentType’然后在appli