浅析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插件之自动添加删除行的实现
Oct 13 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 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面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
YII路径的用法总结
2014/07/09 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
python getopt 参数处理小示例
2009/06/09 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
Django model class Meta原理解析
2020/11/14 Python
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
食堂员工工作职责
2013/12/18 职场文书
客户表扬信范文
2014/01/10 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
高三物理教学反思
2016/02/20 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
python中的3种定义类方法
2021/11/27 Python
python单向链表实例详解
2022/05/25 Python