JQuery中的选择器

JQ中的选择器

image.png

 如图,JQ中存在大量的选择器供我们使用,选择器是为了定位到一个或一组DOM元素而存在的功能。

 选择器是JQuery的重中之重,对于绑定时间,操作DOM元素和其它都以来与选择器。如果能够灵活的使用JQuery选择器可以简化代码、提高效率等。

JavaScript和JQuery中获取Dom对象

HTML代码:

<p id="p_id" name="p_name" class="p_class">这是一个p标签</p>

javascript获取DOM对象

// 根据id获取
document.getElementById("p_id")

// 根据标签名获取
document.getElementsByTagName("p")

// 根据name值获取
document.getElementsByName("p_name")

// 根据class获取
document.getElementsByClassName("p_class")

// 根据标签元素获取

JQuery中获取DOM对象

// 根据id获取
$("#p_id")

// 根据class获取
$(".p_class")

// 根据标签名获取
$("p")

 这里只是使用了两种方式进行对比,大概了解一下Jquery获取DOM阶段的便捷,起码在代码上省略了繁琐的document.getElements……,下面正式介绍JQuery中的选择器。

基本选择器

选择器描述返回示例
#id根据给定的id匹配一个元素单个$("#test") 选取idtest的元素
.class根据给定的类名匹配元素集合元素$(".test") 选取classtest的元素
element根据给定的元素名称匹配元素集合元素$("p") 获取所有的<p>元素
*匹配所有的元素集合元素$("*") 选取所有的元素
selector1,selector2,……多个选择器共同使用集合元素$("div,span,p.test")

 对于第五个说明一下,示例的内容是选取div、span、类名为test的p标签作为一个集合返回出去,也就是获取匹配到的元素集合。

层次选择器

 如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代原则其、子元素、相邻元素或者同级元素等,那么就可以用到层次选择器。

选择器描述返回示例
$("an des")选取an元素里的所有des(后代)元素集合元素$("div span") 选取div中所有span元素
$("parent>child")选取parent元素下的child(子)元素集合元素$("div>span") 选取div元素下的span元素
$("prev+next")选取仅接在prev后的next元素集合元素$("div+p") 选取紧接在div元素后的span元素
$("prev~sib")选取prev后的所有sib元素集合元素$("div~.test")选取div后的所有class为test元素

过滤选择器

 过滤选择器主要通过过滤规则获取所需要的DOM元素,过滤规则和CSS中的伪类选择器语法相同,即都是通过 开头。

 按照不同的过滤规则,过滤选择器可以分为基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。

基本过滤选择器

选择器描述返回示例
:first选取第1个元素集合元素$(".test:first")
:last选取最后一个元素集合元素$(".test:last")
:not(selector)排除selector匹配的元素集合元素$("input:not(".test")")
:even选取索引是偶数的元素集合元素$("input:even")
:odd选取索引书奇数的元素集合元素$("input:odd")
:eq(index)选取索引等于index的元素集合元素$("p:eq(1)")
:gt(index)选取索引大于index的元素集合元素$("p:gt(1)")
:lt(index)选取索引小于index的元素集合元素$("p:lt(1)")
:header选取所有标题元素,如H1、h2等集合元素$(":header")
:animated选取所有正在执行的动画元素集合元素$("div:animated")
:focus选取当前获得焦点的元素集合元素$(":focus")

注意:

  • :gt(index):lt(index)都是不包括索引 index

内容过滤选择器

 内容选择器的过滤规则在于它所包含的子元素或者文本内容。

选择器描述返回示例
:contains(text)选取含有文本内容为text的元素集合元素$("div:contains('我')")
:empty选取不包含子元素或文本元素集合元素$("div:empty")
:has(selector)选取含有选择器所匹配的元素集合元素$("div:has(p)")
:parent选取含有子元素或文本元素集合元素$("div:parent")

可见性过滤选择器

 可见性过滤选择器是根据元素的可见性不可见性状态来选择相应的元素。

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

示例:
$(".myClass:hidden"):选取所有class为myClass并且不可见的元素

属性过滤选择器

选择器描述返回示例
[attribute]选取拥有此元素集合元素$("div[title]")
[attribute=value]选取属性为value的元素集合元素$("div[title=test]")
[attribute!=value]选取属性不等于value的元素集合元素$("div[title!=test]")
[attribute^=value]选取属性以value开头的元素集合元素$("div[title^=test]")
[attribute$=value]选取属性以value结尾的元素集合元素$("div[title$=test]")
[attribute*=value]选取属性值含有value的元素集合元素$("div[title*=test]")
[attribute|=value]选取属性以value_拼接的元素集合元素$("div[title|='en']")
[attribute~=value]选取属性用空格分隔的值中包含value的元素集合元素$("title~='uk'")
[attribute1][attributeN]多个属性过滤器的组合形式集合元素$("div[id][title$='test']")

子元素过滤选择器

选择器描述返回示例
:nth-child(index)选取每个父元素下的第index个子元素或者奇偶元素集合元素$("div.one :nth-child(1)")从1开始
:first-child选取每个父元素的第1个子元素集合元素$("ul li:first-child")
:last-child选取每个父元素的最后一个子元素集合元素$("ul li:last-child")
:only-child如果某个元素只有一个子元素则会匹配,反之不会集合元素$("ul li:only-child")

:nth-child()选择器(索引从1开始):

  • :nth-child(even):选取每个父元素下的索引值为偶数的元素
  • :nth-child(odd):选取每个父元素下的索引值为奇数的元素
  • :nth-child(2):选取每个父元素的索引值等于2的元素
  • :nth-child(3n):选取每个父元素的索引值书3的倍数元素(n从1开始)
  • :nth-child(3n+1):选取每个父元素的索引值是(3n+1)的元素(n从1开始)

表单对象属性过滤选择器

 此选择器主要是对所选择的表单元素进行过滤,例如选择被选中的下拉框,多选框等元素。
|选择器|描述|返回|示例|
|-------|-------|-------|-------|
|:enabled|选取所有可用元素|集合元素|$("#form1 :enabled")|
|:disabled|选取所有不可用元素|集合元素|$("#form2 :disabled")|
|:checked|选取所有被选中的元素(单选框,复选框)|集合元素|$("input:checked")|
|:selected|选取所有被选中的选项元素(下拉列表)|集合元素|$("select option:selected")|

表单选择器

选择器描述返回示例
:input选取所有input,textarea,'select','btuuon'宣肃集合元素$(":input")
:text选取所有的单行文本框集合元素$(":text")
:password选取所有的密码框集合元素$(":password")
:radio选取所有的单选框集合元素$(":radio")
:checkbox选取所有的多选框集合元素$(:checkbox)
:submit选取所有的提交按钮集合元素$(":submit")
:image选取所有的图片按钮集合元素$(":image")
:reset选取所有的重置按钮集合元素$(":reset")
:button选取所有的按钮集合元素$(":button")
:file选取所有的上传域集合元素$(":file")
:hidden选取所有的不可见元素集合元素$(":hidden")
# jquery 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×