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


Posted in Javascript onJuly 04, 2013

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

Javascript 相关文章推荐
JQuery 风格的HTML文本转义
Jul 01 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 #Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 #Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 #Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 #Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 #Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 #Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 #Javascript
You might like
smtp邮件发送一例
2006/10/09 PHP
使用PHP的日期与时间函数技巧
2008/04/24 PHP
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
Angular工具方法学习
2016/12/26 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
Python 26进制计算实现方法
2015/05/28 Python
python 基础教程之Map使用方法
2017/01/17 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
python操作链表的示例代码
2020/09/27 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
创业计划书如何吸引他人眼球
2014/01/10 职场文书
关于人生的感言
2014/01/17 职场文书
2014年清明节寄语
2014/04/03 职场文书
工作目标责任书
2014/07/23 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
工程款申请报告
2015/05/15 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL