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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
Highcharts入门之简介
Aug 02 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
深入了解js原型模式
May 30 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 imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
符合标准的js表单提交的代码
2007/09/13 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
办加油卡单位介绍信
2014/01/09 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript