jquery选择器(常用选择器说明)


Posted in Javascript onSeptember 28, 2010

基本选择器:

$("#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属性的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[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的元素

Javascript 相关文章推荐
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
解决vuecli3中img src 的引入问题
Aug 04 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 #Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 #Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 #Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 #Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 #Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 #Javascript
封装的原生javascript弹出层代码
Sep 24 #Javascript
You might like
PHP在Web开发领域的优势
2006/10/09 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
python删除特定文件的方法
2015/07/30 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
对python sklearn one-hot编码详解
2018/07/10 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
金讯Java笔试题目
2013/06/18 面试题
.NET程序员的几道面试题
2012/06/01 面试题
应聘编辑职位自荐信范文
2014/01/05 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
双十佳事迹材料
2014/01/29 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
mysql数据库入门第一步之创建表
2021/05/14 MySQL
javascript canvas实现雨滴效果
2021/06/09 Javascript
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers