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 相关文章推荐
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
jquery随机展示头像代码
Dec 21 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
原生js的数组除重复简单实例
May 24 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
微信小程序实现刷脸登录
May 25 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
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对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
php获取远程文件大小
2015/10/20 PHP
用javascript实现点击链接弹出"图片另存为"而不是直接打开
2007/08/15 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
js实现交通灯效果
2017/01/13 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
vue中监听返回键问题
2019/08/28 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python实现读取Properties配置文件的方法
2018/03/29 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
一年级班主任感言
2014/03/08 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
调研汇报材料范文
2014/08/17 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
银行催款通知书
2015/04/17 职场文书
运动员代表致辞
2015/07/29 职场文书
2016年母亲节寄语
2015/12/04 职场文书