JQuery筛选器全系列介绍
基本选择器:
#id 根据Id匹配一个元素
$("#div1").css("background-color","red"); //匹配id为"div1"的元素
<div id="div1">我是一个DIV</div> //会选中该div元素
.class 根据给定的类名匹配一个元素
$(".important").removeClass(); //匹配所有class="important"元素
p class="important">我是一个p元素</p>
element 根据元素名匹配一个元素
$("p").css("background-color","red"); //匹配页面所有的p元素
<p>我是一个P</p>
* 匹配所有元素
$("*").css("background-color","red");
selecttor1,selector2 并集,返回两个选择器匹配到的元素
$(".div1,#span1").css("background-color","red");
层次选择器:
ancestor descendant 根据祖先匹配所有的后代元素
$("#div1 span").css("color","red");
<div id="div1">
<span>我是span1</span> ***会被选中,是#div1的后代span
<div>
<span>我是span3</span> ***会被选中,也是#div1的后代span
</div>
</div>
<span>我是span2</span> ***不会被选中,不是#div1的后代
parent>child 根据父元素匹配所有的子元素,直接后代
$("#div1 > span").css("color","red");
<div id="div1">
<span>我是span1</span> ***会被选中,是#div1的子元素span
<div>
<span>我是span3</span> ***不会被选中,是#div1的后代元素,但不是直接子元素
</div>
</div>
<span>我是span2</span> ***不会被选中,不是#div1的子元素
prev+next 匹配下一个兄弟元素 相当于next()方法
$(".p1 + p").css("color","red"); //此行代码相当于$(".p1").next().css("color","red");
<div>
<p>我是第一个P</p> ***不会被选中,是class为p1的上一个了
<p class="p1">我是第二个P</p> ***prev本身并不会被选中
<p>我是第三个P</p> ***会被选中,是class为p1的下一个相邻元素
<p>我是第四个P</p> ***不会被选中,不是class为p1的下一个,是下二个了
</div>
prev~siblings 匹配后面的兄弟元素 相当于nextAll()方法 siblings()方法为匹配所有的兄弟元素
$(".p1 + p").css("color","red"); //此行代码相当于$(".p1").nextAll("p").css("color","red");
<div>
<p>我是第一个P</p> ***不会被选中,是class为p1前面的元素
<p class="p1">我是第二个P</p> ***prev本身并不会被选中
<p>我是第三个P</p> ***会被选中,是class为p1后面的P兄弟元素
<p>我是第四个P</p> ***会被选中,也是class为p1后面的P兄弟元素
</div>
选中所有的兄弟元素 siblings() 方法
$(".p1").sibings("p").css("color","red");
<div>
<p>我是第一个P</p> ***会被选中,是class为p1的P兄弟元素
<p class="p1">我是第二个P</p> ***prev本身并不会被选中
<p>我是第三个P</p> ***会被选中,是class为p1的P兄弟元素
<p>我是第四个P</p> ***会被选中,也是class为p1的P兄弟元素
</div>
简单过滤选择器:
:first或first() 匹配第一个元素
$("#div1 > p:first").css("color","red") //此行代码相当于
$("#div1 > p").first().css("color","red");
<div id="div1">
<p>我是第一个P</p> ***会被选中,是id为#div1下的第一个P元素
<p>我是第二个P</p> ***不会被选中,是第二个P元素了
<p>我是第三个P</p> ***不会被选中,是第三个P元素了
</div>
:last或last() 匹配最后一个元素
$("#div1 > p:last").css("color","red"); //此行代码相当于
$("#div1 > p").last().css("color","red");
<div id="div1">
<p>我是第一个P</p> ***不会被选中,是第一个
<p>我是第二个P</p> ***不会被选中,是第二个
<p>我是第三个P</p> ***会被选中,id为#div1下的最后一个P元素
</div>
:not(selector) 匹配非selector能匹配到的元素
$("#div1 > p:not('.p1')").css("color","red");
<div id="div1">
<p>我是第一个P</p> ***会被选中
<p class="p1">我是第二个P</p> ***不会被选中,因为符合了:not里的条件 class="p1"
<p>我是第三个P</p> ***会被选中
</div>
:even 匹配索引值为偶数的元素,索引号从0开始
$("#div1 > p:even").css("color","red");
<div id="div1">
<p>我是第一个P</p> ***会被选中,索引号0
<p>我是第二个P</p> ***不会被选中,索引号1
<p>我是第三个P</p> ***会被选中,索引号2
<p>我是第四个P</p> ***不会被选中,索引号3
<p>我是第五个P</p> ***会被选中,索引号4
</div>
:odd 匹配索引值为奇数的元素,索引号从0开始
$("#div1 > p:odd").css("color","red");
<div id="div1">
<p>我是第一个P</p> ***不会被选中,索引号0
<p>我是第二个P</p> ***会被选中,索引号1
<p>我是第三个P</p> ***不会被选中,索引号2
<p>我是第四个P</p> ***会被选中,索引号3
<p>我是第五个P</p> ***不会被选中,索引号4
</div>
:eq(index) 匹配指定索引号的元素,索引号从0开始
$("#div1 > p:eq(1)").css("color","red");
<div id="div1">
<p>我是第一个P</p> ***不会被选中,索引号为0
<p>我是第二个P</p> ***会被选中,索引号为1
<p>我是第三个P</p> ***不会被选中,索引号为2
<p>我是第四个P</p> ***不会被选中,索引号为3
</div>
:gt(index) 匹配索引号大于给定索引值的元素,索引号从0开始
$("#div1 > p:gt(1)").css("color","red");
<div id="div1">
<p>我是第一个P</p> ***不会被选中,索引号为0
<p>我是第二个P</p> ***不会被选中,索引号为1
<p>我是第三个P</p> ***会被选中,索引号为2大于1了
<p>我是第四个P</p> ***会被选中,索引号为3大于1了
</div>
:lt(index) 匹配索引号小于给定索引值的元素,索引号从0开始
$("#div1 > p:lt(1)").css("color","red");
<div id="div1">
<p>我是第一个P</p> ***会被选中,索引号为0,小于1
<p>我是第二个P</p> ***不会被选中,索引号为1,不小于1
<p>我是第三个P</p> ***不会被选中,索引号为2大于1了
<p>我是第四个P</p> ***不会被选中,索引号为3大于1了
</div>
:header 匹配所有的标题元素 h1 h2 h3 h4 h5 h6
$("#div1 > :header").css("color","red");
<div id="div1">
<p>我是一个P</p> ***不会被选中,不是标题类型元素
<span>我是一个span</span> ***不会被选中,不是标题类型元素
<h1>我是一个h1</h1> ***会被选中,h1是标题类型元素
<h6>我是一个h6</h6> ***会被选中,h6是标题类型元素
</div>
:animated 匹配所有正在执行动画的元素
内容过滤选择器:
:contains(text) 匹配包含给定文本的元素
$("p:contains('三')").css("background-color","red");
<div>
<p>我是第一个P</p> ***不会被选中
<p>我是第二个P</p> ***不会被选中
<p>我是第三个P</p> ***会被选中,文本里包含了"三"
</div>
:empty 匹配所有不包含子元素或者文本的空元素
$(:empty).text("我是空元素");
<div>
<div><span></span></div> ***div不会被选中,因为有<span></span>子元素。
<span></span>会被选中,因为没有子元素也没有文本元素
<p></p> ***会被选中,没有子元素,也没有文本元素
<span>我是一个span</span> ***不会被选中,有文本元素
</div>
:has(selector) 匹配后代中含有selector能匹配上元素的元素
$("div:has('span')").css("background-color","red");
<div> ***此div会被选中,因为他的有孙子span
我是最外层div
<div><p>我是一个P</p></div> ***此div不会被选中,因为不含有后代span
<div><span>我是一个span</span></div> ***此div会被选中,含有后代span
</div>
:parent 匹配含有子元素或者文本的元素
$(":parent").text("不含子元素或文本元素");
<div>我是一个div</div> ***不会被选中,因为含有文本元素
<div><span>我是一个span</span></div> ***不会被选中,含有子元素。
<div></div> ***会被选中,不含子元素也不含有文本元素
可见性过滤选择器:
:hidden 匹配不可见元素,或者type="hidden"的元素 含有css样式:display:"none";的元素,无论CSS是内联,导入,链接式
$("span:hidden").css("display","block");
$("input:hidden").val("我是jQuery");
<span style="display:none">我是一个span</span> ***会被第一条规则选中
<input type="hidden" value="我是一个隐藏的input" /> ***会被第二条jQuery选中
<span class="span1">我是span1</span> ***会被第一条jQuery选中
:visible 获取所有的可见元素
属性过滤选择器:
[attribute] 匹配含有给定属性的元素
$("div[class]").css("font-size","30px");
<div>
<div class="div1">我是第一个div</div> ***会被选中,含有class属性
<div>我是第二个div</div> ***不会被选中,没含有class属性。
</div>
[attribute=value] 匹配含有属性=value的元素
$("div[class=div1]").css("font-size","30px");
<div>
<div class="div1">我是div1</div> ***会被选中,class属性等于div1。
<div class="div2">我是div2</div> ***不会被选中,class属性不等于div1。
</div>
[attribute!=value] 匹配含有属性但!=value的元素
$("div[class!=div1]").css("color","red");
<div>我是一个没有class属性的div</div> ***会被选中,没有class属性自然class属性不等于div1
<div class="div2">我是一个class属性等于div2的div</div> ***会被选中,class属性不等于div1
<div class="div1">我是一个class属性等于div1的元素</div> ***不会被选中,class属性等于div1
[attribute^=value] 匹配属性值是以value开始的元素
$("div[class^=div]").css("color","red');
<div class="div1">我是div1</div> ***会被选中,class属性以div开始
<div class="div2">我是div2</div> ***会被选中,class属性以div开始
<div class="abc">我是div3</div> ***不会被选中,class属性不以div开始
[attribute$=value] 匹配属性值是以value结束的元素
$("div[class$=div]").css("color","red");
<div class="1div">我是第一个div</div> ***会被选中,class属性以div结束
<div class="2div">我是第二个div</div> ***会被选中,class属性以div结束
<div class="abc">我是第三个div</div> ***不会被选中,class属性不以div结束
[attribute*=value] 匹配属性值包含某些值的元素,不分前后,中间有也算
$("div[class*=div]").css("font-size","30px");
<div class="div1">我是div1</div> ***会被选中,属性值包含div
<div class="1div">我是1div</div> ***会被选中,属性值包含div
<div class="1div1">我是1div1</div> ***会被选中,属性值包含div
<div class="abc">我是abc</div> ***会被选中,属性值包含div
[selector][selector] 匹配属性选择器的交集
$("div:[class][title=title1]").css("background-color","red");
<div class="div1" title="title1">我是div1,title1</div> ***会被选中,有class属性且title属性等于title1
<div class="div1" title=title2>我是div1,title2</div> ***不会被选中,虽然有class属性,但是title属性不等于title2
<div class="div3">我是div3</div> ***不会被选中,没有title属性
子元素过滤选择器:
:nth-child(eq|even|odd|index) 获取所有父元素特定位置的子元素
$("div>p:nth-child(1)").css("background-color","red"); //选中每一个父元素下的div下的第一个直接P元素
<div>
<p>我是第一个P</p> *** 会被选中,是div下的第一个子P元素
<p>我是第二个P</p> *** 不会被选中,是第二个了
</div>
<div>
<P>我是第三个P</P> *** 会被选中,是div下的第一个子P元素
<P>我是第四个P</P> *** 不会被选中,是第二个了
</div>
:first-child 获取所有父元素下的第一个子元素
$("p:first-child").css("background-color","red"); //选中每一个父元素下的第一个P元素
<div>
<p>我是第一个P</p> *** 会被选中,是div下的第一个子P元素
<p>我是第二个P</p> *** 不会被选中,是第二个了
</div>
<ul>
<li>
<P>我是第三个P</P> *** 会被选中,是div下的第一个子P元素
<P>我是第四个P</P> *** 不会被选中,是第二个了
</li>
</ul>
:last-child 获取所有父元素下最后一个子元素
$("p:last-child").css("background-color","red"); //选中每一个父元素下的第一个P元素
<div>
<p>我是第一个P</p> *** 不会被选中,不是某父元素的最后一个子P元素
<p>我是第二个P</p> *** 会被选中,是div元素下的最后一个子P元素
</div>
<ul>
<li>
<P>我是第三个P</P> *** 不会被选中,不是某父元素下的最后一个子P元素
<P>我是第四个P</P> *** 会被选中,是div元素下的最后一个P元素
</li>
</ul>
:only-child 获取所有父元素下唯一的一个元素
$("p:only-child").css("background-color","red");
<div>
<p>我是第一个P</p> ***不会被选中,不是某父元素下的唯一一个P元素
<p>我是第二个P</p> ***不会被选中,不是某父元素下的唯一一个P元素
</div>
<div>
<span>我是一个span</span> ***不会被选中,不是某父元素下的唯一一个P元素
<p>我是第三个P</p> ***不会被选中,不是某父元素下的唯一一个span元素
</div>
<div>
<p>我是一个P</p> ***会被选中,是div下的唯一一个P元素
</div>
表单对象属性过滤选择器:
:enabled 获取表单中所有可用的元素
$("input:enabled").val("jQuery表单对象属性过滤选择器");
<div>
<input type="text" value="我是一个可用的input" /> ***会被选中,是一个可用的表单元素
<input type="text" value="我是一个不可用的input" disabled="disabled" /> ***不会被选中,是不可用的表单元素
</div>
:disabled 获取表单中所有不可用的元素
$("input:enabled").val("jQuery表单对象属性过滤选择器");
<div>
<input type="text" value="我是一个可用的input" /> ***不会被选中,是一个可用的表单元素
<input type="text" value="我是一个不可用的input" disabled="disabled" /> ***会被选中,是不可用的表单元素 //注意,jQuery能够操作不可用 的表单元素
</div>
:checked 获取表单张所有被选中的元素
$("input:checked").val("jQuery");
<div>
<input type="checkbox" checked="checked" value="1">选中
<input type="checkbox" value="0">未选中
</div>
:selected 获取表单中所有被选中的option的元素
alert($("input:selected").text("")); //获取所有被选中的option元素
<div>
<selected>
<option value="0" selected="selected">option1</option> ***会被选中
<option value="1">option2</option> ***不会被选中,因为本option不是选中的。
</selected>
</div>
表单选择器:
:input 获取所有的表单元素<input开头的,还有textarea select
$(":input").val("jQuery");
<div>
<textarea>我是一个兵</textarea> ***会被选中
<input text="button" value="" /> ***会被选中
<p>我是一个P</p> ***不会被选中
</div>
:text 获取所有的单行文本框 <input type="text" />
$(":text").val("jQuery");
<div>
<input type="text" value="我是一个input" /> ***会被选中,是单行文本框
<input type="button" value="确定" /> ***不会被选中,不是单行文本框
<textarea>我是一个textarea</textarea> ***不会被选中,不是单行文本框
</div>
:password 获取所有的密码框元素 <input type="password" />
$(":password").hide(3000);
<div>
<input type="password" /> ***会被选中,是密码框
<input type="text" value="我是一个文本框" /> ***不会被选中,是文本框
</div>
:radio 获取所有的单选按钮 <input type="radio" />
$(":radio").hide(3000);
<div>
<input type="radio" />我是一个radio ***单选按钮会被选中,但是后面的文字不会
<input type="text" />我是一个文本框 ***不会被选中
</div>
:checkbox 获取所有的复选框 <input type="checkbox">
$(":checkbox").hide(3000);
<div>
<input type="checkbox" />我是一个checkbox ***复选框会被选中,文本不会
<input type="text" />我是一个文本框 ***不会被选中,不是复选框
</div>
:submit 获取所有的提交按钮 <input type="submit" />
$(":submit").hide(3000);
<div>
<input type="submit" value="提交"> ***会被选中,是提交按钮
<input type="text" value="我是一个文本框"> ***不会被选中,不是提交按钮
</div>
:image 获取所有的图像按钮 <input type="image" />
$(":image").attr("title","我是一个图片按钮");
<div>
<input type="image" src="http://www.baidu.com/img/baidu_sylogo1.gif" /> ***会被选中
<input type="text" value="我是一个文本框" /> ***不会被选中,不是图片按钮
</div>
:reset 获取所有的重置按钮 <input type="reset" />
$(":reset").hide(3000);
<div>
<input type="reset" value="重置"> ***会被选中,是重置按钮
<input type="text" value="我是一个文本框"> ***不会被选中,不是重置按钮
</div>
:button 获取所有的按钮 <input type="button">
$(":button").hide(3000);
<div>
<input type="button" value="确认" /> ***会被选中,是按钮元素
<input type="text" value="我是一个文本框" /> ***不会被选中,不是按钮元素
</div>
:file 获取所有的文件上传框 <input type="file" />
$(":file").hide(3000);
<div>
<input type="file" title="file" />
<input type="text" value="我是一个文本框" />
</div>
转至:https://www.cnblogs.com/zhouguowei/p/5194754.html
转载于:https://www.cnblogs.com/Andy-Blog/p/10775290.html
JQuery筛选器全系列介绍相关推荐
- jQuery筛选器常用总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 京东网页制作之TAB切换栏(内含jquary筛选器介绍)
前言: 购物网站点击购物菜单页基本相同,包含商品详情.累计评价等,之前学习了HTML.css.JavaScript和jQuary,今天写个菜单页简单练习下. 京东商品详情菜单页如下: 淘宝商品详情菜单 ...
- jQuery的常见选择器和筛选器
关于jQuery是前端方法库 特点: 1 优质的选择器和筛选方法 2 好用的饮食迭代 3 强大的链式编程 jQuery向外暴露两个变量:jQuery和$ (jQuery === $) 选择器 // j ...
- Tableau中的筛选器
Tableau中常用的筛选器类型有:数据提取筛选器.数据源筛选器.上下文筛选器.维度筛选器.度量筛选器和表计算筛选器.这些筛选器的执行优先级从高到低依次如下图所示.下面依次对各个筛选器进行介绍. ...
- jquery系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- 杰理下载器强制下载工具的使用介绍_AC695N696NAD14AD15全系列支持,看完此文就足够了
目录 一.常见的下载器造型-V2.0版本 二.常见的下载器造型-V4.0版本 三.常见的问题 第1步 ----- 按照接口连接好USB座子 第2步 ----- 插上下载器 第3步 ----- 双击批处 ...
- JQuery 基础(1)—— 基本介绍、选择器、筛选器(选择器的一种)
一.JQuery的基本概念 1.JQuery是什么? jquery是一款javaScript库,能更方便地处理HTML.事件.动画等,可以兼容多浏览器 2.如何选择版本? JQuery有三个大版本: ...
- JavaScript之jQuery够用即可(查找筛选器、属性操作、jQuery文档处理)
文章目录 一.筛选器补充 二.jQuery属性操作 三.jQuery文档处理 一.筛选器补充 1.过滤筛选器 就是查看某个标签中是否存在另外一个标签 // console.log($("di ...
- jquery 选择器、筛选器、事件绑定与事件委派
一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...
最新文章
- 分布式系统的事务处理(推荐)
- opencv环境搭建
- 如何在Marketing Cloud Launchpad里打开外部链接
- 巧用小程序·云开发实现邮件发送功能丨实战
- 风变python怎么样_Python取代Excel?风变编程带你了解如何更好地学Python!
- java开发技术有什么意义,零基础学Java开发技术有哪些优势和好处?
- 联网生活方式下,消费者的7大关键需求
- C++不能返回string局部引用
- pytorch提取softmax前的特征并保存为txt文件
- 中国石油大学计算机专业调剂信息,中国石油大学(北京)地球科学学院2020级硕士研究生招生缺额信息发布公告...
- Matlab取整函数: fix, floor, ceil, round.
- Python简答题编程题
- Torrent 文件图文解析
- 短域名Andy.ge 安迪哥的启用
- 华为鸿蒙系统的技术特性,华为鸿蒙系统来了,还有这四大技术特性
- matlab gevfit,基于MATLAB和Scipy-GEV-fi的不同参数估计
- css3 3d旋转图片立方体特效代码
- iass、pass、saas
- HashMap中的hash与rehash
- mysql set类型的用户变量,mysql用户变量的圈套
热门文章
- Http Handler 介绍
- 几种常见的数据库连接的URL写法(包括国产数据达梦DM)
- Postgres 数据库大批量单表导入数据引发性能故障的处理
- Linux中常用的目录(/home,/etc ,/opt)
- Eclipse,工程builed失败的原因。
- 【Linux】VMware连接CRT
- 成长笔记--解决Eclipse 变量名的自动补全问题
- XCode - 无法对iPhone真机调试的解决方法!
- springboot 项目中在普通类中调用dao层的mapper 出现空指针异常
- IDEA配置好maven后新建maven项目一直build失败的解决方法