`
superseven
  • 浏览: 109120 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

【转】 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")   [size=medium][/size]

过滤掉: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" /> ]

转自:http://blog.csdn.net/majin_com/article/details/6565208
分享到:
评论

相关推荐

    jQuery选择器总结之常用元素查找方法

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $(“#myELement”) 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $(“div”) 选择...

    Jquery常用方法总结

    在本文中,我们将深入探讨 jQuery 的一些常用方法,以帮助开发者更好地理解和应用这些功能。 1. **选择器**: - `$("标签名")`:通过标签名选择元素,如 `$("div")` 会选择所有 div 元素。 - `$("#ID")`:通过 ID...

    jquery常用查询总结

    - `jQuery.fn.extend()`:扩展 jQuery 对象,添加新的方法,这些方法针对单个 DOM 元素。 - `$.extend()`:扩展 jQuery 命名空间,添加全局方法,这些方法作用于所有 DOM 元素。 例如: ```javascript // 扩展 ...

    jQuery为动态生成的select元素添加事件的方法

    8. 总结:通过使用jQuery的事件委托技术,开发者可以有效地为动态生成的元素添加事件处理器。这种方式不仅节省了资源,还提高了代码的效率和可维护性。在实际开发中,这种方法被广泛应用于各种需要动态内容更新的...

    jquery 学习笔记总结

    本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在实际项目中的应用。 ### 1. 选择器 选择器是 jQuery 的精髓,它们允许我们高效地选取页面上的 HTML 元素。jQuery 支持多种 CSS 选择器,如 ID ...

    jquery查找父元素、子元素(个人经验总结)

    本篇文章将深入解析jQuery中用于查找父元素和子元素的方法,以及如何在实际应用中灵活运用。 首先,jQuery提供了多种方法来查找父元素: 1. `closest()`:这个方法用于查找匹配给定选择器的最近的父元素。它返回一...

    jQuery 常见操作实现方式和常用函数方法总结

    ### 其他常用方法 除了上述功能外,jQuery还提供了许多其他有用的函数方法,例如: - `find("选择器")`:在指定元素内部查找与给定选择器匹配的元素。 - `end()`:结束当前链中的过滤操作,回到上一步的操作。 - `...

    Jquery调用iframe父页面中的元素及方法

    本文将详细介绍如何使用jQuery来查找和操作iframe父页面中的元素和方法。 首先,需要明确iframe元素可以被视为一个小型的浏览器窗口,它有自己的文档对象模型(DOM)。要与iframe中的DOM交互,需要通过iframe的...

    jQuery常用函数总结

    ### jQuery常用函数总结 在现代Web开发中,jQuery作为一个轻量级、功能强大的JavaScript库,极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。下面将详细介绍jQuery中的一些常用函数及其应用场景,...

    jQuery 查找元素操作实例小结

    此外,文章最后提到的其他jQuery相关内容专题,如《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》等,都是对jQuery核心功能的拓展,涵盖了事件处理、插件使用、JSON数据操作、扩展技巧以及特效制作...

    课题-js和jquery获取父级元素、子级元素、兄弟元素的方法.pdf

    总结来说,JavaScript和jQuery在处理DOM元素关系时有各自的特点。JavaScript原生方法虽然灵活,但需要处理更多细节,而jQuery提供了简洁且强大的API,减少了开发者的工作量。根据项目需求和对性能的影响,开发者可以...

    浅析jQuery中常用的元素查找方法总结

    - **ID选择器**:通过元素的ID来选择元素,例如$("#myElement")将选择ID为"myElement"的元素,这是jQuery中最基本且常用的选择器之一。需要注意的是,在HTML文档中,ID应该是唯一的,因此使用ID选择器通常返回一个...

    jquery常用的标签

    - **`.find()`方法**:查找匹配元素下的后代元素。 - 示例:`$("form#id").find("#childID").end()`:先找到`form`下的`childID`元素,然后返回到原来的`form`元素。 - **`.end()`方法**:返回到上一次选择的元素...

    jQuery的Document元素选择

    本文将详细介绍jQuery中用于选择Document元素的方法,包括基本的选择器语法、XPath与CSS结合使用的方式以及自定义选择器的运用。 #### 二、从`$`开始 在jQuery中,选择元素通常以`$`符号开头。例如,要选择ID为`...

    综合性的jQuery路径查找库插件

    而针对更复杂的页面元素查找需求,jQuery提供了一系列路径查找方法,形成了一个综合性的路径查找库插件。本文将深入探讨这个插件的功能、使用方法以及它在实际开发中的应用。 一、jQuery的基本选择器 jQuery的选择...

    jQuery查找节点方法完整实例

    在学习jQuery的过程中,推荐关注相关的jQuery教程和专题,例如文中提到的“jQuery操作DOM节点方法总结”等,这将有助于深入理解和掌握jQuery的各种用法。 总之,jQuery查找节点的方法是其强大功能的关键组成部分,...

    JQuery查找子元素find()和遍历集合each的方法总结

    本文主要介绍了 JQuery 中两个常用的方法:find() 和 each()。这两个方法分别用于查找子元素和遍历集合。 首先,find() 方法用于在给定的元素集合中查找匹配的后代元素。它只会在给定元素的后代中进行查找,不会...

    Jquery全集 Jquery总结

    使用 `on()` 方法可以处理动态加载的元素的事件。 ### 3. 动画效果 jQuery 的动画功能非常强大,包括 `fadeIn()`, `fadeOut()`, `slideToggle()`, `animate()` 等: ```javascript $("#myElement").fadeIn(1000);...

Global site tag (gtag.js) - Google Analytics