2021-06-16

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”)

在给定的祖先元素下匹配所有的后代元素,用于匹配元素的选择器，

并且它是第一个选择器的后代元素

1. 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  选择所有没有兄弟元素，且具有相同的元素名称的元素