jQuery选择器简明总结(含用法实例,一目了然)


Posted in Javascript onApril 25, 2014

本文现在对所有已知的 jquery 选择器做一个总结,深刻而熟练的掌握这些选择器,对我们快速的写各种 jquery 效果大有帮助!下面就对 jquery 各种选择做一个罗列吧!由于 jquery 用法非常简单,这里就不再举各种例子加深理解了。

元素 元素
选择器 实例 选取
* $("#item *") 选择 id 属性为 item 下的所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有

元素

.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
     
:first $("p:first") 第一个

元素

:last $("p:last") 最后一个

元素

:even $("tr:even") 所有偶数
:odd $("tr:odd") 所有奇数
:next $('.item').next('div') class为 item 的下一个 div 兄弟元素,等价于 $('.item + div')
:prev $('.item').prev('div') class为 item 的上一个 div 兄弟元素
:nextAll $('.item').nextAll('div') class 为 item 之后的所有的 div 兄弟元素,等价于 $('.inside ~ div')
:parent > child $('div > span') 选取 div 下的第一代 span 元素,又称直系子元素
:parent $('.item:parent') 选取 class 为 item 的元素的父级元素
     
:eq(index) $("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") $("input:not(.must)") 所有不为空的 input 元素;所有 class 属性不为 must 的元素
     
:header $(":header") 所有标题元素

-

:animated   所有动画元素
     
:contains(text) $("div:contains('www.phpernote.com')") 所有 div 元素中包含 www.phpernote.com 字符串的所有元素
:empty $(".item:empty") 所有 class 属性为 item 的元素中无子(元素)节点的所有元素
:hidden $("p:hidden") 所有隐藏的

元素

:has $('.item:has(span)') 所有 class 属性为 item 的元素中包含有 span 的所有元素(不分是否直系)
:visible $("table:visible") 所有可见的表格
     
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
     
[attribute] $("a[href]") 所有带有 href 属性的 a 标签元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
     
:input $(":input") 所有 元素
:text $(":text") 所有 type="text" 的 元素
:password $(":password") 所有 type="password" 的 元素
:radio $(":radio") 所有 type="radio" 的 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 元素
:submit $(":submit") 所有 type="submit" 的 元素
:reset $(":reset") 所有 type="reset" 的 元素
:button $(":button") 所有 type="button" 的 元素
:image $(":image") 所有 type="image" 的 元素
:file $(":file") 所有 type="file" 的 元素
     
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
Javascript 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
全面理解闭包机制
Jul 11 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 #Javascript
js动态移动滚动条至底部示例代码
Apr 24 #Javascript
javaScript如何处理从java后台返回的list
Apr 24 #Javascript
jquery如何扑捉回车键触发的事件
Apr 24 #Javascript
用unescape反编码得出汉字示例
Apr 24 #Javascript
标题过长使用javascript按字节截取字符串
Apr 24 #Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 #Javascript
You might like
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
js命名空间写法示例
2015/12/18 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
javascript自执行函数
2017/02/10 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
react router 4.0以上的路由应用详解
2017/09/21 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python字符串string的内置方法实例详解
2018/05/14 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
在python中修改.properties文件的操作
2020/04/08 Python
Python restful框架接口开发实现
2020/04/13 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
如何用Lucene索引数据库
2016/02/23 面试题
2014年迎新年活动方案
2014/02/19 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
物流管理专业推荐信
2014/09/06 职场文书
离婚财产处理协议书
2014/09/30 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
欠款证明
2015/06/24 职场文书
导游词之南京中山陵
2019/11/27 职场文书