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 相关文章推荐
javascript preload&lazy load
May 13 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 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变量可用字符
2014/05/28 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PDO::query讲解
2019/01/29 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
js实现购物车功能
2018/06/12 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
python获取糗百图片代码实例
2013/12/18 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python模块WSGI使用详解
2018/02/02 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
智能钱包:Ekster
2019/11/21 全球购物
房屋出租协议书
2014/04/10 职场文书
个人自我剖析材料
2014/09/30 职场文书
2014年工程部工作总结
2014/11/25 职场文书
关于学习的决心书
2015/02/05 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
清明扫墓感想
2015/08/11 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
create-react-app开发常用配置教程
2022/06/25 Javascript