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 ...
随机推荐
- DevExpress控件-GridControl根据条件改变单元格(Dev GridControl 单元格着色)
DevExpress控件-GridControl根据条件改变单元格颜色,如下图: 解决办法:可以参考:http://www.cnblogs.com/zeroone/p/4311191.html 第一步 ...
- numpy及scipy的使用
numpy的使用 把list A转换为numpy 矩阵 np.array(A) np.array(A, 'int32') numpy加载txt文件里面的矩阵 matrix = np.loadtxt(t ...
- Django2.x版本路由系统的正则写法以及视图函数的返回问题
一.关于url.py urlpatterns每个元素的不再用url(),而是path(),最重要的一点是,正则的使用需要你自己手动导入re_path,并且在每个使用正则匹配的的元素用re_path() ...
- 在LoadRunner中转换字符串大小写的C语言函数
在LoadRunner中转换字符串大小写的C语言函数 . loadrunner语言ccharacterstringaction 封装ConvertToXXX函数: //ConvertToUpper f ...
- django使用MySQL时部分配置
若是Django中使用MySQL,需要在项目名文件目录下(而不是应用文件)的__init__.py文件中添加: import pymysqlpymysql.install_as_MySQLdb()
- 对TDD原则的理解
1,在编写好失败的单元测试之前,不要编写任何产品代码 如果不先写测试,那么各个函数就会耦合在一起,最后变得无法测试 如果后写测试,你也许能对大块大块的代码进行测试,但是无法对每个函数进行测 ...
- Python进阶:@property 动态属性
Python进阶:@property 动态属性 Python 动态属性的概念可能会被面试问到,在项目当中也非常实用,但是在一般的编程教程中不会提到,可以进修一下. 先看一个简单的例子.创建一个 Stu ...
- python中浅拷贝和深度拷贝的区别
在很多面试题中都会问到浅拷贝跟深度拷贝的区别,前几天一个朋友也问到了我浅拷贝跟深度拷贝到底有什么区别,这里就简单举栗子讲一下两者的区别. 浅拷贝(copy()):拷贝父对象,不会拷贝对象的内部的子对象 ...
- 04、Unity 5--全局光照技术
本文整理自Unity全球官方网站,原文:UNITY 5 - LIGHTING AND RENDERING 简介全局光照,简称GI,是一个用来模拟光的互动和反弹等复杂行为的算法,要精确的仿真全局光照非常 ...
- 【JavaScript】JS将Java的Timestamp转为Date类型
遇到一个小需求,由于要填充日期插件里的数据,前台要把java后台传来的Date类型的数据转成YYYY-MM-DD格式的时间数据.通过json传输,Java的Date类型的数据自动转成了时间戳,例如 “ ...