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对象的方法集锦
Dec 24 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
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抓取页面的几种方法详解
2013/06/17 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
python采集博客中上传的QQ截图文件
2014/07/18 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
python计算方程式根的方法
2015/05/07 Python
详解Python爬虫的基本写法
2016/01/08 Python
python 以16进制打印输出的方法
2018/07/09 Python
Django实现单用户登录的方法示例
2019/03/28 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
Python实现时间序列可视化的方法
2019/08/06 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
python re模块常见用法例举
2021/03/01 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
公司活动策划方案
2014/01/13 职场文书
十佳护士先进事迹
2014/05/08 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
muduo TcpServer模块源码分析
2022/04/26 Redis