jQuery选择器
这是关于jQuery选择器的详细概况
jQuery选择器和CSS选择器非常相似,在jQuery的撰写中,选择器是不可离开的,首先,jQuery选择器非常多,每一种都带着特定的含义
*:匹配所有元素 $(“*”),三个标签都可匹配到
<div></div>
<li></li>
<p></p>
ID选择器:#ID jQuery代码 $(“#ID”)
类选择器:一个用以搜索的类,一个元素可以有多个类,只要有一个符合就能被匹配到 jQuery代码:$(“.class”)
element:一个用于搜索的元素。指向 DOM 节点的标签名 在CSS中,叫作标签选择器 <div></div> $(“div”)
Div p $(“div p”)
在给定的祖先元素下匹配所有的后代元素,用于匹配元素的选择器,
并且它是第一个选择器的后代元素
- B $(“form>input”)
在给定父元素匹配所有的子元素
<form>
<label></label><input></input><input></input>
</form>
:first 获取第一个元素
<ul>
<li></li><li></li><li></li>
</ul>
$(“li:first”)
:even 匹配所有的索引值为偶数的元素,从0开始计数,查找1、3、5行(即索引值0、2、4)
<table>
<tr></tr>
<tr></tr>
</table>
$(“tr:even”)
:odd 匹配所有的索引值为奇数的元素,从0开始计数 ,查找2、4、6行(即索引值1、3、5)
$(“tr:odd”)
:eq(number) 匹配一个给定索引值的元素,从0开使计数
$(“tr :eq(number)”)
:gt(number) 匹配所有大于给定索引值的元素
:lt(number) 匹配所有小于给定索引值的元素
:lang选择器匹配有一个语言值等于所提供的语言代码,或以提供的语言代码开始,后面马上跟一个“ - ”的元素。例如,选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">(和他们的后代<div>),但不包括<div lang="fr">
对于HTML元素,语言值由lang属性决定,也可能由来自meta元素或HTTP头信息决定。
:last 获取最后一个元素
:header 匹配如h1 h2 h3 之类的标签元素
:animated 匹配所有正在执行动画效果的元素,只有对不在执行动画效果的元素执行一个动画特效
:focus 匹配当前获取焦点的元素,添加一个"focused"的类名给那些有focus方法的元素
:contains(text) 匹配包含给定文本的元素,test(一个用以查找的字符串)
:empty 查找所有不包含子元素或者文本的空元素
:has(selector) 一个用于筛选的选择器
:parent 查找所有含有子元素或者文本的元素
:visible 匹配所有的可见元素
:hidden 匹配所有不可见元素,或者type为hidden的元素
查找所有含有ID属性的div元素 $(“div[ID]”)
[name=value]匹配给定的属性是某个特定值的元素
<input type=”checkbox”name=”state”></input>
<input type=”checkbox”name=”state”></input>
<input type=”checkbox”name=”fliud”></input>
$(“input[name=’state’]”).
[name!=value]匹配所有不含有指定的属性,查找所有name属性不是state的input元素
$(“input[name!=’state’]”).
[name^=value] 匹配给定的属性是以某些值开始的元素
查找所有name以’sta’开始的input元素
$(“input[name^=‘sta’]”)
[name$=value]
查找某些值结尾的元素
[name*=value]
匹配给定的属性是以包含某些值的元素
[selector1] 选中范围
[selector2] 缩小范围
[selectorN] 任意多个属性选择器
复合属性选择器,需要同时满足多个条件时使用
找到所有含有ID属性,并且它的name属性是以某些值结尾
$(“input[id][name$=’某些值’]”)
:first-child 匹配选择器的第一个选择器,类似于:first(匹配的第一个元素),但是:firs-child选择器可以匹配多个,相当于nth-child(1)
:last-child 选择到最后一个子元素
:nth-child() 选择父元素的子元素 从1开始计算,而不是从0开始
:nth-last-child() 选择父元素的子元素,从最后一个到第一个
:nth-last-of-type() 选择父元素的子元素,从最后一个到第一个
:only-child 选择到唯一一个子元素的标签
<ul>
<li></li><li></li>
</ul>
<ul>
<li></li><li></li>
/ul>
则会选择到第二个ul下面的li标签
:onlu-of-type 选择所有没有兄弟元素,且具有相同的元素名称的元素