锋利的jQuery 要点归纳(一) jQuery选择器


Posted in Javascript onMarch 21, 2010

1 基本选择器

$(#id)
    根据给定的id匹配一个元素
$(.class)
    根据给定的类名匹配元素
$(element)
    根据给定的元素名匹配元素
$(*)
    匹配所有元素
$(selector1,selector2,...,selectorN)
    将每一个选择器匹配到的元素合并后一起返回

2 层次选择器

$("ancestor descendant")
    选取ancestor元素里的所有descendant(后代)元素
$("parent > child")
    只选取parent元素下的child(子层级)元素,与$("ancestor descendant")有区别,前者选择所有后代元素(含且不限于子层级)
$('prev + next')
    选取紧接在prev元素后的next元素
$('prev ~ siblings')
    选取prev元素之后的next元素

3 过滤选择器

3.1 基本过滤选择器

$("selector:first")
    选取第一个元素
$("selector:last")
    选取最后一个元素
$("selector:not(selector2)")
    去除所有与给定选择器匹配的元素
$("selector:even")
    选取索引是偶数的所有元素,索引从0开始
$("selector:odd")
    选取索引是奇数的所有元素,索引从0开始
$("selector:eq(index)")
    选取索引等于index的元素,index从0开始
$("selector:gt(index)")
    选取索引大于index的元素,index从0开始
$("selector:lt(index)")
    选取索引小于index的元素,index从0开始
$(":header")
    选取所有的标题元素,如h1,h2,h3等等
$(":animated")
    选取当前正在执行动画的所有元素

3.2 内容过滤选择器

$(":contains(text)")
    选取含有文本内容为"text"的元素
$(":empty")
    选取不包含子元素或者文本的空元素
$(":has(selector2)")
    选取含有选择器所匹配的元素的元素
$(":parent")
    选取含有子元素或者文本的元素

3.3 可见性过滤选择器

$(":hidden")
    选取所有不可见的元素
$(":visible")
    选取所有可见的元素

3.4 属性过滤选择器

$("selector[attribute]")
    选取拥有此属性的元素
$("selector[attribute=value]")
    选取属性的值为value的元素
$("selector[attribute!=value]")
    选取属性的值不等于value的元素
$("selector[attribute^=value]")
    选取属性的值以value开始的元素
$("selector[attribute$=value]")
    选取属性的值以value结束的元素
$("selector[attribute*=value]")
    选取属性的值含有value的元素
$("selector[selector2][selectorN]")
    用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围,如$("div[id][title$='test']")选取拥有属性id,并且属性title以"test"结束的<div>元素

3.5 子元素过滤选择器

$(":nth-child(index/even/odd/equation)")
    选取每个父元素下的第index个子元素或者奇偶元素,index从1算起
$("selector:first-child")
    选取每个父元素的第一个子元素
$("selector:last-child")
    选取每个父元素的最后一个子元素
$("selector:only-child")
    如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配

3.6 表单对象属性过滤选择器

$("selector:enabled")
    选取所有可用元素
$("selector:disabled")
    选取所有不可用元素
$("selector:checked")
    选取所有被选中的元素(radio,checkbox)
$("selector:selected")
    选取所有被选中的选项元素(select)

4 表单选择器

$(":input")
    选取所有的<input>,<textarea>,<select>,<button>元素
$(":text")
    选取所有的单行文本框
$(":password")
    选取所有的密码框
$(":radio")
    选取所有的单选框
$(":checkbox")
    选取所有的复选框
$(":submit")
    选取所有的提交按钮
$(":image")
    选取所有的图像按钮
$(":reset")
    选取所有的重置按钮
$(":button")
    选取所有的按钮
$(":file")
    选取所有的上传域
$(":hidden")

    选取所有不可见元素

Javascript 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
javascript实现表单验证
Jan 29 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
vue-loader教程介绍
Jun 14 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 #Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 #Javascript
javascript qq右下角滑出窗口 sheyMsg
Mar 21 #Javascript
js 居中漂浮广告
Mar 21 #Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 #Javascript
javascript中的new使用
Mar 20 #Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 #Javascript
You might like
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
详解在Python程序中使用Cookie的教程
2015/04/30 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python实现简单的代理服务器
2015/07/25 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
python中requests和https使用简单示例
2018/01/18 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python中实现词云图的示例
2020/12/19 Python
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
金讯Java笔试题目
2013/06/18 面试题
网络教育自我鉴定
2013/11/01 职场文书
企业口号大全
2014/06/12 职场文书
经验交流材料格式
2014/12/30 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
党校培训学习心得体会
2016/01/06 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android