浅析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 相关文章推荐
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
浅析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
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
深入探讨前端框架react
2015/12/09 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
使用Python构造hive insert语句说明
2020/06/06 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
生日宴会答谢词
2014/01/09 职场文书
导购员的岗位职责
2014/02/08 职场文书
农村婚礼主持词
2014/03/13 职场文书
村党支部书记承诺书
2014/05/29 职场文书
银行自荐信怎么写
2015/03/05 职场文书
毕业实习证明范本
2015/06/16 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书