$("#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" /> ]

文章收集于:http://www.jb51.net/article/39484.htm

jQuery中常用的元素查找方法的更多相关文章

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

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  2. jQuery中常用的元素查找方法总结

    $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div&q ...

  3. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

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

    新年第一编文章 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法   $("#myELement")    选择id值等于myElement的元素,id值 ...

  5. jQuery常用的元素查找方法总结

    $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("di ...

  6. jquery元素查找方法集锦

    jQuery常用的元素查找方法总结 $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到 ...

  7. jQuery中常用的函数方法

    jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...

  8. js中常用追加元素的几种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. WebDriver元素查找方法摘录与总结

    WebDriver元素查找方法摘录与总结 整理By:果冻迪迪 selenium-webdriver提供了强大的元素定位方法,支持以下三种方法. • 单个对象的定位方法 • 多个对象的定位方法 • 层级 ...

随机推荐

  1. 文件上传限制大小 dotnet/C#

    private void Button1_Click(object sender, System.EventArgs e) { if (File1.PostedFile != null) { //上传 ...

  2. 一致性哈希算法(consistent hashing)【转】

    一致性哈希算法 来自:http://blog.csdn.net/cywosp/article/details/23397179       一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希 ...

  3. URL 学习总结

    1.绝对路径(以"/"斜线开头的路径,代表相对于当前Web应用): a)地址给服务器用,web应用名称可以省略. 请求包含:request.getRequestDispatcher ...

  4. boost 1.56.0 编译及使用

    boost的编译和使用,经过搜集资料和总结,记录成文.感谢文后所列参考资料的作者. 1 下载 地址:http://sourceforge.net/projects/boost/files/boost/ ...

  5. mono+jexus 之连接数据库

    System.ArgumentException Unable to find the requested .Net Framework Data Provider. It may not be in ...

  6. make no mistake, we are the last line of defense.

    make no mistake, we are the last line of defense.

  7. 读书笔记_Effective_C++_条款四十九:了解new_handler的行为

    本章开始讨论内存分配的一些用法,C/C++内存分配采用new和delete.在new申请内存时,可能会遇到的一种情况就是,内存不够了,这时候会抛出out of memory的异常.有的时候,我们希望能 ...

  8. Query Object--查询对象模式(下)

    回顾 上一篇对模式进行了介绍,并基于ADO.NET进行了实现,虽然现在ORM框架越来越流行,但是很多中小型的公司仍然是使用ADO.NET来进行数据库操作的,随着项目的需求不断增加,业务不断变化,ADO ...

  9. Linux查看系统信息命令汇总

    # uname -a # 查看内核/操作系统/CPU信息 # /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostname # 查看计算 ...

  10. 清除SQL数据库的日志

    ALTER DATABASE [Fuliu_Test] SET RECOVERY SIMPLEALTER DATABASE [Fuliu_Test] SET RECOVERY FULLDBCC SHR ...