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


Posted in Javascript onAugust 04, 2016

选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似。选择器具有如下特点:

1.简化代码的编写

2.隐式迭代

3.无须判断对象是否存在

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") 过滤掉: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") 选择所有标题元素,如h1,h2,h3等
$("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*='news']") 选择所有的name属性包含'news'的input元素
$("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且name属性以man结尾的元素

子元素过滤选择器:

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") 返回所有的div元素下的span元素,只取第一个
$("div span:last-child") 返回所有的div元素下的span元素,只取最后一个
$("div button:only-child") 返回所有的div下的所有的button元素中只有一个子元素的数组

表单元素选择器:

$(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button
$('input:text') 选择所有input元素中类型为text的input元素
$('input:password') 选择所有input元素中类型为password的input元素
$('input:radio') 选择所有input元素中类型为radio的input元素
$('input:checkbox') 选择所有input元素中类型为checkbox的input元素
$('input:submit') 选择所有input元素中类型为submit的input元素
$('input:image') 选择所有input元素中类型为image的input元素
$('input:button') 选择所有input元素中类型为button的input元素
$('input:file') 选择所有input元素中类型为file的input元素
$("input:hidden") 选择所有input元素中类型为hidden的input元素

表单元素过滤选择器:

$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素

以上所述是小编给大家介绍的jQuery选择器总结之常用元素查找方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js综合应用实例简单的表格统计
Sep 03 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
Vue精简版风格概述
Jan 30 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 #Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 #Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 #Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 #Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 #Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 #Javascript
JS 数字转换为大写金额的简单实例
Aug 04 #Javascript
You might like
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
JavaScript 布尔操作符解析  && || !
2012/08/10 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python中交换两个元素的实现方法
2018/06/29 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Python PyQt5整理介绍
2020/04/01 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
心理健康心得体会
2014/01/02 职场文书
十佳青年事迹材料
2014/08/21 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
《风筝》教学反思
2016/02/23 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle