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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
Javascript Global对象
Aug 13 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 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
5.PHP的其他功能
2006/10/09 PHP
php数组总结篇(一)
2008/09/30 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
php输出xml属性的方法
2015/03/19 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
js表格分页实现代码
2009/09/18 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
简单叙述一下MYSQL的优化
2016/05/09 面试题
《蚕姑娘》教学反思
2014/04/15 职场文书
经典演讲稿开场白
2014/08/25 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
优秀创业计划书分享
2019/07/19 职场文书