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 操作/获取table具体代码
Jun 13 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
Vue的props父传子的示例代码
May 20 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
JS实现4位随机验证码
Oct 19 Javascript
vue keep-alive的简单总结
Jan 25 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
文件上传类
2006/10/09 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python 多线程的实例详解
2017/09/07 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
你们项目是如何进行变更控制的
2015/08/26 面试题
祖国在我心中演讲稿600字
2014/09/23 职场文书
实习介绍信模板
2015/01/30 职场文书
考勤制度通知
2015/04/25 职场文书