Jquery选择器简明版Jquery选择器实用版

发布时间:2023-05-04

  

根据id名称进行选择:

  选择器:$(#id)

  

  <div id=id>选中 </div>

  

根据类名进行选择:

  选择器:

  

  $(.class)

  <div class=class> 选中</div>

  

根据标签进行选择:

  选择器:$(p)

  

  <p>选中 </p>

  

选择div所有p后代:

  选择器:$(div p)

  

  <div>

   <p>选中</p>

   <div>

   <p>选中</p>

   </div>

  </div>

  

选择选择div单层直系后代元素:

  选择器:$(div > p)

  

  <div>

   <p>选中</p>

   <article>

   <p>不会选中</p>

   </article>

  </div>

  

选择div后面紧挨的一个p元素:

  选择器:$(div + p) 或者$(div).next(p)

  

  <div>

  </div>

  <p>选中</p>

  

选择div后面的所有p元素:

  选择器:$(div ~ p)或者$(div).nextAll(p)

  

  <div>

  </div>

  <p>选中</p>

  <p>选中</p>

  

选择兄弟姐妹级别的所有p元素:

  选择器:siblings(p)

  

  <p>选中</p>

  <p>选中</p>

  <div>

  </div>

  <p>选中</p>

  <p>选中</p>

  

选择第一个满足条件的元素:

  选择器:$(div:first)

  

  <div>

  选中

  </div>

  <div>

  非选中

  </div>

  

选择最后一个满足条件的元素:

  选择器:$(div:last)

  

  <div>

  非选中

  </div>

  <div>

  选中

  </div>

  

反向选择条件

  选择器:$(div:not(.is-active))

  

  <div class=is-active>

  非选中

  </div>

  <div>

  选中

  </div>

  

选择次序是偶数的元素:

  选择器:$(div:even)

  

  <div>非选中</div>

  <div>选中</div>

  <div>非选中</div>

  <div>选中</div>

  

选择索引是奇数的元素:

  选择器:$(div:odd)

  

  <div>选中</div>

  <div>非选中</div>

  <div>选中</div>

  <div>非选中</div>

  

选择第k个元素:

  选择器:$(div:eq(k))

  

  <div>第一个</div>

  <div>第K个(选中)</div>

  

选择从第K个开始的所有元素:

  选择器:$(div:gt(k))

  

  <div>第一个</div>

  <div>第K个</div>

  <div>第K+1个(选中)</div>

  <div>第K+2个(选中)</div>

  

选择第1-K个元素

  选择器:$(div:lt(k))

  

  <div>第K-21个(选中)</div>

  <div>第K-1个(选中)</div>

  <div>第K个</div>

  <div>第K+1个</div>

  <h1>选中</h1>

  <h2>选中</h2>

  <h3>选中</h3>

  <h4>选中</h4>

  <h5>选中</h5>

  <h6>选中</h6>

  

选择所有标题标签:$(:header)

  查找到h1-h6,并遍历它们,打印出内容

  

  

?

  

1

  

2

  

3

  

4

  

5

  

6

  

7

  

8

  

9

  

10

  

11

  

12

  

13

  

14

  

15

  

16

  

17

  

18

  

19

  

20

  

21

  

22

  

23

  

24

  

25

  

26

  

27

  

<!DOCTYPE html>

  

<html>

  

<head>

  

<meta charset=utf-8/>

  

<title>查找标题</title>

  

<script type=text/javascriptsrc=js/jquery-2.2.3.js></script>

  

<script>

  

$(function(){

  

//查找h1-h6

  

$(:header).each(function(){

  

$(this).click(function(event){

  

console.info(event.target.innerText);

  

console.log(event.currentTarget.innerHTML);

  

});

  

});

  

});

  

</script>

  

</head>

  

<body>

  

<h1>Hello H1</h1>

  

<h2>Hello H2</h2>

  

<h3>Hello H3</h3>

  

<h4>Hello H4</h4>

  

<h5>Hello H5</h5>

  

<h6>Hello H6</h6>

  

</body>

  

</html>

  

  

  选择所有正在进行动画的div标签:$(div:animated)

  

内容过滤

  <div>text(选中)</div>

  <div>xxx(非选中)</div>

  

  选择含“text”文字的div元素:$(div:contains( text ))

  

  <!-- 选中 -->

  <div></div>

  

  选择不含文字或者元素的div:$(div:empty)

  

  <!-- 选中 -->

  <div>111</div>

  

  选择含文字或者元素的div:$(div:parent)

  

  <!-- 选中 -->

  <div>

  <p></p>

  </div>

  

  选择含有某特性的div元素(与not相反):$(div:has(p))

  

可见性过滤

  <div style=display:none;>选中</div>

  

  选择所有隐藏的元素:$(div:hidden)

  

  <div>选中</div>

  

  选择所有可见的元素:$(div:visible)

  

属性过滤

  <div id=id>选中</div>

  

  选择含有id的div元素:$(div[id])

  

  <div title=test>选中</div>

  

  选择title是test的div:$(div[title=test])

  

  <div title=aaa>选中</div>

  

  选择title不是test的div:$(div[title!=test])

  

  <div title=test1>选中</div>

  <div title=test2>选中</div>

  

  选择title属性值以test开头的div:$(div[title^=test])

  

  <div title=Atest>选中</div>

  <div title=Btest>选中</div>

  

  选择title元素以test结尾的div:$(div[title$=test])

  

  <div title=AtestB>选中</div>

  <div title=Btest>选中</div>

  

  选择title元素中包含test的div:$(div[title*=test])

  

  <div title=test id=id>选中</div>

  <div title=test>非选中</div>

  

  混合选择属性:$(div[id=id][title=test])

  

子元素过滤

  批量选择class是aaa的元素的所有第2个元素:$(.aaa:nth-child(2))

  批量选择class是aaa的元素的所有偶数项元素:$(.aaa:nth-child(even))

  批量选择class是aaa的元素的所有奇数项元素:$(.aaa:nth-child(odd))

  选择选择class是aaa的元素的0,3,6,9``元素:$(.aaa:nth-child(3n))

  选择选择class是aaa的元素的1,4,7,10``元素:$(.aaa:nth-child(3n+1))

  选择所有ul的第一个li:$(ul li:first-child)

  选择所有ul的最后一个li:$(ul li:last-child)

  选择所有ul仅含一个li的子元素:$(ul li:only-child)

  

表单对象属性过滤

  选择所有可用的div元素:$(div:enabled)

  选择所有不可用的div:$(div:disabled)

  选择所有被选中的单选或复选框:$(input:checked)

  选择被选中的下拉列表:$(select:selected)

  

表单选择器

  选择所有的input:$(:input)

  选择所有的单行文本框:$(:text)

  选择所有密码框:$(:password)

  选择所有的单选框:$(:radio)

  选择所有的多选框:$(:checkbox)

  选择所有的提交按钮$(:submit)

  选择所有的图像按钮$(:image)

  选择所有的重置按钮$(:reset)

  选择所有的按钮:$(:button)

  选择所有的上传域:$(:file)

  选择所有不可见的元素:$(:hidden)

  补充

  jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript的dom。

  

一般选择器

1).基本选择器

  ·#id 根据给定的ID匹配一个元素。例如:$(#id)
·element 根据给定的元素名匹配所有元素。例如:$(div)
·.class 根据给定的类匹配元素。例如:$(.style1);
·* 匹配所有元素。例如:$(*)
·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如:$(#id,div,.style1)

  

2).表单选择器

  ·:button 匹配所有按钮。例如:$(:button)
·:checkbox 匹配所有复选框。例如:$(:checkbox)
·:file 匹配所有文件域。例如:$(:file)
·:hidden 匹配所有不可见元素,或者type为hidden的元素。例如:$(input:hidden)
·:image 匹配所有图像域。例如:$(:image)
·:input 匹配所有 input, textarea, select 和 button 元素。例如:$(:input)
·:password 匹配所有密码框。例如:$(:password)
·:radio 匹配所有单选按钮。例如:$(:radio)
·:reset 匹配所有重置按钮。例如:$(:reset)
·:submit 匹配所有提交按钮。例如:$(:submit)
·:text 匹配所有的单行文本框。例如:$(:text)
·:header 匹配如 h1, h2, h3之类的标题元素。例如:$(:header).css(background, #EEE);

  

2.筛选条件选择器

1).jQuery属性选择器

  ·[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如:$(input[name*=man)
·[attribute!=value] 匹配所有含有指定的属性,但属性不等于特定值的元素。例如:$(input[name!=man);
·[attribute$=value] 匹配给定的属性是以某些值结尾的元素。例如:$(input[name$=man])
·[attribute=value] 匹配给定的属性是某个特定值的元素。例如:$(input[name=man]);
·[attribute] 匹配包含给定属性的元素。例如:$(div[id])
·[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如:$(input[name^=man])
·[selector1][selector2][selectorN] 同时满足多个条件。例如:$(input[id][name$=man])
·:hidden 匹配所有的不可见元素。例如:$(tr:hidden)
·:visible 匹配所有的可见元素。例如:$(tr:visible)
·:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)。例如:$(input:checked)
·:disabled 匹配所有不可用元素。例如:$(input:disabled)
·:enabled 匹配所有可用元素。例如:$(input:enabled)
·:selected 匹配所有选中的option元素。例如:$(select option:selected)

  

2).jQuery内容选择器

  ·:contains(text) 匹配包含给定文本的元素。例如:$(div:contains(John))
·:empty 匹配所有不包含子元素或者文本的空元素。例如:$(td:empty)
·:has(selector) 匹配含有选择器所匹配的元素的元素。例如:$(div:has(p));
·:parent 匹配含有子元素或者文本的元素。例如:$(td:parent)

  

3).jQuery层级选择器

  ·ancestor descendant 在给定的祖先元素下匹配所有的后代元素。例如:$(form input)
·parent > child 在给定的父元素下匹配所有的子元素。例如:$(form > input)
·prev + next 匹配所有紧接在 prev 元素后的 next 元素。例如:$(label + input)
·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如:$(form ~ input)
·:first-child 匹配第一个子元素。例如:$(ul li:first-child)
·:last-child 匹配最后一个子元素。例如:$(ul li:last-child)
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。例如:$(ul li:nth-child(2))
·:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配。例如:$(ul li:only-child)

  

4).jQuery方法选择器

  ·:animated 匹配所有正在执行动画效果的元素。例如:$(div:animated);
·:eq(index) 匹配一个给定索引值的元素。例如:$(tr:eq(1))
·:even 匹配所有索引值为偶数的元素,从 0 开始计数。例如:$(tr:even)
·:first 匹配找到的第一个元素。例如:$(tr:first)
·:gt(index) 匹配所有大于给定索引值的元素,从 0 开始计数。例如:$(tr:gt(0))
·:last 匹配找到的最后一个元素。例如:$(tr:last)
·:lt(index) 匹配所有小于给定索引值的元素。例如:$(tr:lt(2))
·:not(selector) 去除所有与给定选择器匹配的元素。例如:$(input:not(:checked))
·:odd 匹配所有索引值为奇数的元素,从 0 开始计数。例如:$(tr:odd)

  看下面这张表格:

  

选择器实例选取
*$(*)所有元素
#id$(#lastname)id=lastname 的元素
.class$(.intro)所有 class=intro 的元素
element$(p)所有 <p> 元素
.class.class$(.intro.demo)所有 class=intro 且 class=demo 的元素
:first$(p:first)第一个 <p> 元素
:last$(p:last)最后一个 <p> 元素
:even$(tr:even)所有偶数 <tr> 元素
:odd$(tr:odd)所有奇数 <tr> 元素
:eq(index)$(ul li:eq(3))列表中的第四个元素(index 从 0 开始)
:gt(no)$(ul li:gt(3))列出 index 大于 3 的元素
:lt(no)$(ul li:lt(3))列出 index 小于 3 的元素
:not(selector)$(input:not(:empty))所有不为空的 input 元素
:header$(:header)所有标题元素 <h1> - <h6>
:animated所有动画元素
:contains(text)$(:contains(W3School))包含指定字符串的所有元素
:empty$(:empty)无子(元素)节点的所有元素
:hidden$(p:hidden)所有隐藏的 <p> 元素
:visible$(table:visible)所有可见的表格
s1,s2,s3$(th,td,.intro)所有带有匹配选择的元素
[attribute]$([href])所有带有 href 属性的元素
[attribute=value]$([href=#])所有 href 属性的值等于 # 的元素
[attribute!=value]$([href!=#])所有 href 属性的值不等于 # 的元素
[attribute$=value]$([href$=.jpg])所有 href 属性的值包含以 .jpg 结尾的元素
:input$(:input)所有 <input> 元素
:text$(:text)所有 type=text 的 <input> 元素
:password$(:password)所有 type=password 的 <input> 元素
:radio$(:radio)所有 type=radio 的 <input> 元素
:checkbox$(:checkbox)所有 type=checkbox 的 <input> 元素
:submit$(:submit)所有 type=submit 的 <input> 元素
:reset$(:reset)所有 type=reset 的 <input> 元素
:button$(:button)所有 type=button 的 <input> 元素
:image$(:image)所有 type=image 的 <input> 元素
:file$(:file)所有 type=file 的 <input> 元素
:enabled$(:enabled)所有激活的 input 元素
:disabled$(:disabled)所有禁用的 input 元素
:selected$(:selected)所有被选取的 input 元素
:checked$(:checked)所有被选中的 input 元素

选择器大全

  jQuery的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法

  $(#myELement) 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$(div) 选择所有的div标签元素,返回div元素数组
$(.myClass) 选择使用myClass类的css的所有元素
$(*) 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$(#myELement,div,.myclass)

  层叠选择器:
$(form input) 选择所有的form元素中的input元素
$(#main > *) 选择id值为main的所有的子元素
$(label + input) 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$(#prev ~ div) 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

  基本过滤选择器:
$(tr:first) 选择所有tr元素的第一个
$(tr:last) 选择所有tr元素的最后一个
$(input:not(:checked) + span)

  过滤掉:checked的选择器的所有的input元素

  $(tr:even) 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)

  $(tr:odd) 选择所有的tr元素的第1,3,5... ...个元素
$(td:eq(2)) 选择所有的td元素中序号为2的那个td元素
$(td:gt(4)) 选择td元素中序号大于4的所有td元素
$(td:ll(4)) 选择td元素中序号小于4的所有的td元素
$(:header)
$(div:animated)
内容过滤选择器:

  $(div:contains(John)) 选择所有div中含有John文本的元素
$(td:empty) 选择所有的为空(也不包括文本节点)的td元素的数组
$(div:has(p)) 选择所有含有p标签的div元素
$(td:parent) 选择所有的以td为父节点的元素数组
可视化过滤选择器:

  $(div:hidden) 选择所有的被hidden的div元素
$(div:visible) 选择所有的可视化的div元素
属性过滤选择器:

  $(div[id]) 选择所有含有id属性的div元素
$(input[name=newsletter]) 选择所有的name属性等于newsletter的input元素

  $(input[name!=newsletter]) 选择所有的name属性不等于newsletter的input元素

  $(input[name^=news]) 选择所有的name属性以news开头的input元素
$(input[name$=news]) 选择所有的name属性以news结尾的input元素
$(input[name*=man]) 选择所有的name属性包含news的input元素

  $(input[id][name$=man]) 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

  子元素过滤选择器:

  $(ul li:nth-child(2)),$(ul li:nth-child(odd)),$(ul li:nth-child(3n + 1))

  $(div span:first-child) 返回所有的div元素的第一个子节点的数组
$(div span:last-child) 返回所有的div元素的最后一个节点的数组
$(div button:only-child) 返回所有的div中只有唯一一个子节点的所有子节点的数组

  表单元素选择器:

  $(:input) 选择所有的表单输入元素,包括input, textarea, select 和 button

  $(:text) 选择所有的text input元素
$(:password) 选择所有的password input元素
$(:radio) 选择所有的radio input元素
$(:checkbox) 选择所有的checkbox input元素
$(:submit) 选择所有的submit input元素
$(:image) 选择所有的image input元素
$(:reset) 选择所有的reset input元素
$(:button) 选择所有的button input元素
$(:file) 选择所有的file input元素
$(:hidden) 选择所有类型为hidden的input元素或表单的隐藏域

  表单元素过滤选择器:

  $(:enabled) 选择所有的可操作的表单元素
$(:disabled) 选择所有的不可操作的表单元素
$(:checked) 选择所有的被checked的表单元素
$(select option:selected) 选择所有的select 的子元素中被selected的元素

  选取一个name为”S_03_22″的input text框的上一个td的text值
$(”input[@name=S_03_22]“).parent().prev().text()

  名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@name^=S_]“).not(”[@name$=_R]“)

  一个名为radio_01的radio所选的值

  $(”input[@name=radio_01][@checked]“).val();

  $(A B) 查找A元素下面的所有子节点,包括非直接子节点
$(A>B) 查找A元素下面的直接子节点
$(A+B) 查找A元素后面的兄弟节点,包括非直接子节点
$(A~B) 查找A元素后面的兄弟节点,不包括非直接子节点

  1. $(A B) 查找A元素下面的所有子节点,包括非直接子节点

  例子:找到表单中所有的 input 元素

  HTML 代码:

  

  

?

  

1

  

2

  

3

  

4

  

5

  

6

  

7

  

8

  

9

  

<form>

  

<label>Name:</label>

  

<inputname=name/>

  

<fieldset>

  

<label>Newsletter:</label>

  

<inputname=newsletter/>

  

</fieldset>

  

</form>

  

<inputname=none/>

  

  

  jQuery 代码:

  $(form input)

  结果:

  [ <input name=name />, <input name=newsletter /> ]

  2. $(A>B) 查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。

  HTML 代码:

  

  

?

  

1

  

2

  

3

  

4

  

5

  

6

  

7

  

8

  

9

  

<form>

  

<label>Name:</label>

  

<inputname=name/>

  

<fieldset>

  

<label>Newsletter:</label>

  

<inputname=newsletter/>

  

</fieldset>

  

</form>

  

<inputname=none/>

  

  

  jQuery 代码:

  $(form > input)
结果:

  [ <input name=name /> ]

  3. $(A+B) 查找A元素后面的兄弟节。

注册即送1000元现金券