jquery选择器使用详解

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 代码:

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:

$("form input")
结果:

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

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

HTML 代码:
 

代码如下:

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />

jQuery 代码:


代码如下:

$("form > input")

结果:


代码如下:

[ <input name="name" /> ]

3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在 label 后面的 input 元素

HTML 代码:


代码如下:

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />

jQuery 代码:
 

代码如下:

$("label + input")

结果:


代码如下:

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

4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的 input 元素

HTML 代码:


代码如下:

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />

jQuery 代码:


代码如下:

$("form ~ input")

结果:


代码如下:

[ <input name="none" /> ]

(0)

相关推荐

  • jQuery 属性选择器element[herf*='value']使用示例

    一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解: 复制代码 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <style typ

  • jQuery的选择器中的通配符使用介绍

    1.选择器 (1)通配符: 复制代码 代码如下: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']");//id属性以code结束的所有input标签 $("input[id*='code']");//id属性包含code的所有input标签 (2)根据索引选择 复制代码 代码如下: $("tbody tr:even"); //选择索引为偶数

  • jquery获取css中的选择器(实例讲解)

    开始写之前先复习一下元素和节点的区别: 元素是W3C文档对象模型(DOM)当中使用最广泛的节点之一. 元素拥有关联的"属性". XmlElement类拥有许多方法来访问它的"属性"(GetAttribute, SetAttribute, RemoveAttribute, GetAttributeNode, 等等). 你也可以使用"Attributes"属性来返回一个支持"名字"或者"序号"访问的"

  • 关于jquery的多个选择器的使用示例

    复制代码 代码如下: <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#add,#edit").bind("click&

  • jQuery选择器中含有空格的使用示例及注意事项

    此文摘自<锋利的jQuery>,另外添加了一点自己的东西 选择器中的空格是不容忽视的,多一个空格或少一个空格也许得到的结果会截然不同的.下面来看一个例子. 先构建如下的HTML代码: 复制代码 代码如下: <div class="test"> <div style="display:none;">Jquery教程</div> <div style="display:none;">Jque

  • jquery选择器-根据多个属性选择示例代码

    根据多个属性选择E[attr=val][attr=val] $("div[title='ttt'][class='aaaa']").click()................ 所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素

  • jquery选择器、属性设置用法经验总结

    本人是一名小白,应届毕业生,以前没用过jquery,最近做项目用到了jquery.在做的过程中走了很多弯路,不停的搜索.总结出了一些用法,供大家参考: 最基本的选择器语法包括:id.class.标签.属性,这和css选择器是一致的. ID选择器要在ID前加#,比如要选择一个ID为myDivID的div元素(<div id="myDivID"></div>)可以这样写: 复制代码 代码如下: $("#myDivID"); D是不能重复的,所以I

  • jquery选择器之内容过滤选择器详解

    先写出DOM元素的HTML结构: 复制代码 代码如下: <style type="text/css">    /*高亮显示*/    .highlight{               background-color: gray    }</style> 复制代码 代码如下: <div>John Resign</div><div>George Martin</div><div>Malcom John

  • jQuery中选择器小问题(新人难免遇到)

    今天照着jQuery手册学习,了解了选择器的使用,准备试试写个用户注册验证,没想到还没开始一个很小的问题把我难住了! 新人难免遇到很小的细节问题,在此文仅供自勉: 测试部分代码如下: 复制代码 代码如下: <script type="text/javascript" src="jquery.1.11.0.min.js"></script> <script type="text/javascript"> func

  • jQuery选择器全面总结

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 jQuery选择器使得获得页面元素变得更加容易.更加灵活,从而大大减轻了开发人员的压力.如同盖楼一样,没有砖瓦,就盖不起楼房.得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性.当然想一下子掌握所有选择器也是很困难的,这个得靠实践和积累. 现在我们正式进入jQuery选择器的学习.我们将jQuery选择器进行分类学习,将jQuery选择器分为以下几种: 1.基本选择器 ◦id                 

  • jquery的选择器的使用技巧之如何选择input框

    下面的方法是选择name是redthree的 并且选中了的input 里面的 title属性的内容 <input name="redTrdd" title='xiaoming'> 复制代码 代码如下: xtest = $(":input[name='radThree'][checked]").attr("title");

  • jquery选择器之基本过滤选择器详解

    复制代码 代码如下: <style type="text/css">  /*高亮显示*/  .highlight{      background-color: gray  } </style> 复制代码 代码如下: <body>   <h3>各省市行政区划</h3>   <table border="1" width="50%">    <thead>     

  • jquery属性选择器not has怎么写 行悬停高亮显示

    复制代码 代码如下: $(function(){ /* //$("html body div table.table_list tbody tr").not(":has('td a img[src*=tj.gif]')").mouseover(function(){ $("html body div table.table_list tbody tr:not(':has('td a img[src*=tj.gif]')')").mouseover

  • jquery选择器之层级过滤选择器详解

    复制代码 代码如下: $("ancestor descendant"):选取parent元素后所有的child元素$("parent > child"):选取parent元素后所有的直属child元素,何谓"直属",也就是第一级的意思了$("prev + next"):prev和next是两个同级别的元素. 选中在prev元素后面的next元素$("prev ~ siblings"):选择prev后面

  • jquery选择器大全 全面详解jquery选择器

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点:1.简化代码的编写2.隐式迭代3.无须判断对象是否存在其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的.如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式.现在我们正式进入j

  • jquery选择器原理介绍($()使用方法)

    每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同. 当我们使用选择器的时候$(selector,content),就会执行init(sel

  • Jquery中的层次选择器与find()的区别示例介绍

    复制代码 代码如下: $("#anaylseBody tr").find("td:eq(" + $("#analyse th:contains(" + $(this).val() + ")").index() + ")").hide(); ("#anaylseBody tr") find作为根基 复制代码 代码如下: $("#anaylseBody tr td") 以

随机推荐