jQuery匹配各种条件的选择器用法
:hidden
匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到
Matches all elements that are hidden, or input elements of type "hidden".
返回值
Array<Element>
示例
查找所有不可见的 tr 元素
HTML 代码:
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:hidden")
结果:
[ <tr style="display:none"><td>Value 1</td></tr> ]
---------------------------------------------------------------------------------------
:visible
匹配所有的可见元素
Matches all elements that are visible.
返回值
Array<Element>
示例
查找所有可见的 tr 元素
HTML 代码:
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:visible")
结果:
[ <tr><td>Value 2</td></tr> ]
---------------------------------------------------------------------------------------
[attribute]
匹配包含给定属性的元素
Matches elements that have the specified attribute.
返回值
Array<Element>
参数
attribute (String) : 属性名
示例
查找所有含有 id 属性的 div 元素
HTML 代码:
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代码:
$("div[id]")
结果:
[ <div id="test2"></div> ]
---------------------------------------------------------------------------------------
[attribute=value]
匹配给定的属性是某个特定值的元素
Matches elements that have the specified attribute with a certain value.
返回值
Array<Element>
参数
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
示例
查找所有 name 属性是 newsletter 的 input 元素
HTML 代码:
'<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name='newsletter']").attr("checked", true);
结果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
---------------------------------------------------------------------------------------
[attribute!=value]
匹配给定的属性是不包含某个特定值的元素
Matches elements that don't have the specified attribute with a certain value.
返回值
Array<Element>
参数
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
示例
查找所有 name 属性不是 newsletter 的 input 元素
HTML 代码:
'<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name!='newsletter']").attr("checked", true);
结果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
---------------------------------------------------------------------------------------
[attribute^=value]
匹配给定的属性是以某些值开始的元素
Matches elements that have the specified attribute and it starts with a certain value.
返回值
Array<Element>
参数
attribute (String) : 属性名
value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
示例
查找所有 name 以 'news' 开始的 input 元素
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery 代码:
$("input[name^='news']")
结果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
---------------------------------------------------------------------------------------
[attribute$=value]
匹配给定的属性是以某些值结尾的元素
Matches elements that have the specified attribute and it ends with a certain value.
返回值
Array<Element>
参数
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
示例
查找所有 name 以 'letter' 结尾的 input 元素
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
jQuery 代码:
$("input[name$='letter']")
结果:
[ <input name="newsletter" />, <input name="jobletter" /> ]
---------------------------------------------------------------------------------------
[attribute*=value]
匹配给定的属性是以包含某些值的元素
Matches elements that have the specified attribute and it contains a certain value.
返回值
Array<Element>
参数
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
示例
查找所有 name 包含 'man' 的 input 元素
HTML 代码:
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
jQuery 代码:
$("input[name*='man']")
结果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
---------------------------------------------------------------------------------------
[selector1][selector2][selectorN]
复合属性选择器,需要同时满足多个条件时使用。
Matches elements that have the specified attribute and it contains a certain value.
返回值
Array<Element>
参数
selector1 (Selector) : 属性选择器
selector2 (Selector) : 另一个属性选择器,用以进一步缩小范围
selectorN (Selector) : 任意多个属性选择器
示例
找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
HTML 代码:
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
jQuery 代码:
$("input[id][name$='man']")
结果:
[ <input id="letterman" name="new-letterman" /> ]
http://www.lzgame.com/zblog/archives/cat_1/2011/04/17.html
http://www.css88.com/jqapi-1.9/checkbox-selector/
jQuery匹配各种条件的选择器用法的更多相关文章
- jquery选择器用法
jquery的基础选择器 选择器的用法其实跟咱们当时讲css的选择器用法类似,只是代码书写的不同 <ul> <li id="brother" class=&quo ...
- jquery选择器用法笔记(第一部分)
由于我在项目中用jquery比较多,而且觉得jquery真的很不错,尤其是其灵活高效的选择器更是令人无法忘怀.那么,今天就来写一篇非常基础的关于jquery选择器的文章,路过的朋友可以收藏以作参考. ...
- jquery教程-Jquery 获取标签个数 size()函数用法
jquery教程-Jquery 获取标签个数 size()函数用法,size() 方法返回被 jQuery 选择器匹配的元素的数量. 语法 $(selector).size() jQuery ...
- JQuery系列(1) - 选择器、构造函数、实例方法
概述 JQuery是一个JavaScript库,jQuery的核心思想是“先选中某些网页元素,然后对其进行某种处理”(find something, do something),也就是说,先选择后处理 ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- 用Jquery做一个时间日期选择器
今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...
- jQuery插件制作之全局函数用法实例
原文地址:http://www.jb51.net/article/67056.htm 本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓 ...
- jQuery中first-child与first选择器区别
1.first-child first-child为每个父级元素匹配第一个子元素,可以匹配出多个元素: 示例代码: <!DOCTYPE html> <html lang=" ...
- jQuery常用方法(四)-选择器
JQuery Selectors 方法说明 基本选择器 $("#myDiv") 匹配唯一的具有此id值的元素 $("div") 匹配指定名称的所有元素 $(&q ...
随机推荐
- 利用ncurses库开发终端工具箱(1)—— ToDoList小工具开发
准备工作 腾讯云服务器(Ubuntu),C++编程语言 由于想输出界面中包含中文,所以安装库 libncursesw5,依次输入下面三行命令 sudo apt-get install libncurs ...
- JS获取 KindEditor textarea 标签 html内容失败的解决方法。
KindEditor 这个 东西 研究的不多,JS在通过调用getElementById 获取文本id的内容时候,KindEditor 尚未将内容同步,官方给的解决方法是afterBlur: func ...
- Linux搭建主从数据库服务器(主从复制)
配置主机数据库: 1.克隆linux操作系统 2.修改Linux系统主机IP地址 主机IP:192.168.247.150 从机IP:192.168.247.151 3.通过xshell连接Maste ...
- mocha测试es6问题
平时在写完正常的逻辑代码后,需要使用单元测试去测试逻辑代码,现在比较流行的是使用mocha进行测试 现在都是使用es6的写法,如果直接使用mocha test\某个文件,会出现下面的错误,原因是因为m ...
- 网易2019校招C++研发工程师笔试编程题
丰收? (忘了题目了QAQ) 题目描述: 又到了丰收的季节,恰逢小易去牛牛的果园里游玩. 牛午常说他对整个果园的每个地方都了如指掌,小易不太相信, 所以他想考考牛牛. 在果园里有N堆苹果,每堆苹果的数 ...
- python打印所有汉字
n=0 for ch in xrange(0x4e00, 0x9fa6): print unichr(ch), n = n+1 if(n%50==0): print '\n' print n
- 洛谷 P1352 没有上司的舞会【树形DP/邻接链表+链式前向星】
题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员都会增加一定的快乐指数Ri, ...
- SVN版本控制软件
一.版本控制软件 1.为什么需要版本控制软件 问题:① 团队开发 ② 异地协作 ③ 版本回退 2.解决之道 SCM(Software Configuration Management):软件配置管理 ...
- Linux基础系列-Day6
Samba服务(基于CentOS 7.0) Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成,Samba主要用于Linux或UNIX和Windows系统之 ...
- 数据库SQL归纳(三)
数据查询功能 单表查询 选择若干列 1. 指定列 SELECT 列名称 FROM 表名称 2. 全部列 SELECT * FROM 表名称 3. 经过计算的列 SELECT Sname, 2019-S ...