JQuery筛选器全系列介绍


Posted in Javascript onAugust 27, 2013

1.选择对象

1).基本

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

2).表单

·:button 匹配所有按钮。例如:$(":button")
·:checkbox 匹配所有复选框。例如:$(":checkbox")
·:file 匹配所有文件域。例如:$(":File")
·:hidden 匹配所有不可见元素,或者type为hidden的元素。例如:$("input:hidden")
·:image 匹配所有图像域。例如:$(":image")
·:input 匹配所有 input, textarea, select 和 button 元素。例如:$(":input")
·:password 匹配所有密码框。例如:$(":password")
·:radio 匹配所有单选按钮。例如:$(":radio")
·:reset 匹配所有重置按钮。例如:$(":reset")
·:submit 匹配所有提交按钮。例如:$(":submit")
·:text 匹配所有的单行文本框。例如:$(":text")
·:header 匹配如 h1, h2, h3之类的标题元素。例如:$(":header").css("background", "#EEE");

2.筛选条件

1).属性筛选

·[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如:$("input[name*='man'")
·[attribute!=value] 匹配所有含有指定的属性,但属性不等于特定值的元素。例如:$(input[name!='man');
·[attribute$=value] 匹配给定的属性是以某些值结尾的元素。例如:$("input[name$='man']")
·[attribute=value] 匹配给定的属性是某个特定值的元素。例如:$("input[name='man']");
·[attribute] 匹配包含给定属性的元素。例如:$("div[id]")
·[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如:$("input[name^='man']")
·[selector1][selector2][selectorN] 同时满足多个条件。例如:$("input[id][name$='man']")
·:hidden 匹配所有的不可见元素。例如:$("tr:hidden")
·:visible 匹配所有的可见元素。例如:$("tr:visible")
·:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)。例如:$("input:checked")
·:disabled 匹配所有不可用元素。例如:$("input:disabled")
·:enabled 匹配所有可用元素。例如:$("input:enabled")
·:selected 匹配所有选中的option元素。例如:$("select option:selected")

2).内容筛选

·:contains(text) 匹配包含给定文本的元素。例如:$("div:contains('John')")
·:empty 匹配所有不包含子元素或者文本的空元素。例如:$("td:empty")
·:has(selector) 匹配含有选择器所匹配的元素的元素。例如:$("div:has(p)");
·:parent 匹配含有子元素或者文本的元素。例如:$("td:parent")

3).层级筛选

·ancestor descendant 在给定的祖先元素下匹配所有的后代元素。例如:$("form input")
·parent > child 在给定的父元素下匹配所有的子元素。例如:$("form > input")
·prev + next 匹配所有紧接在 prev 元素后的 next 元素。例如:$("label + input")
·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如:$("form ~ input")
·:first-child 匹配第一个子元素。例如:$("ul li:first-child")
·:last-child 匹配最后一个子元素。例如:$("ul li:last-child")
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。例如:$("ul li:nth-child(2)")
·:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配。例如:$("ul li:only-child")

4).方法筛选

·:animated 匹配所有正在执行动画效果的元素。例如:$("div:animated");
·:eq(index) 匹配一个给定索引值的元素。例如:$("tr:eq(1)")
·:even 匹配所有索引值为偶数的元素,从 0 开始计数。例如:$("tr:even")
·:first 匹配找到的第一个元素。例如:$("tr:first")
·:gt(index) 匹配所有大于给定索引值的元素,从 0 开始计数。例如:$("tr:gt(0)")
·:last 匹配找到的最后一个元素。例如:$("tr:last")
·:lt(index) 匹配所有小于给定索引值的元素。例如:$("tr:lt(2)")
·:not(selector) 去除所有与给定选择器匹配的元素。例如:$("input:not(:checked)")
·:odd 匹配所有索引值为奇数的元素,从 0 开始计数。例如:$("tr:odd")

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
原生js实现照片墙效果
Oct 13 Javascript
记一次vue跨域的解决
Oct 21 Javascript
ant design vue的form表单取值方法
Jun 01 Vue.js
HTML Color Picker(js拾色器效果)
Aug 27 #Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 #Javascript
javascript:void(0)使用探讨
Aug 27 #Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 #Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 #Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 #Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 #Javascript
You might like
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
php实用代码片段整理
2016/11/12 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
Python实现决策树C4.5算法的示例
2018/05/30 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
python 求定积分和不定积分示例
2019/11/20 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
小班幼儿评语大全
2014/04/30 职场文书
法律系毕业生求职信
2014/05/28 职场文书
机电系毕业生求职信
2014/07/11 职场文书
劳资员岗位职责
2015/02/13 职场文书
小学体育课教学反思
2016/02/16 职场文书
python 爬取天气网卫星图片
2021/06/07 Python