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 ...
随机推荐
- PHP需要学习成长路径
第一阶段:基础阶段(基础PHP程序员) 重点:把LNMP搞熟练(核心是安装配置基本操作) 目标:能够完成基本的LNMP系统安装,简单配置维护;能够做基本的简单系统的PHP开发;能够在PHP中型系统中支 ...
- WordPress函数query_posts用法汇总
最近经常有网友跟我咨询WordPress函数query_posts的相关用法,说起来query_posts实在是太强大,参数无数,用法更是无数,如果让我说它的用法,我根本没法一一说清楚.开始之前,你可 ...
- 前端代码编辑器ace 语法高亮
代码编辑器codemirror和ace,都有接触过,主要是简单的api使用下.现在项目选用的ace.主要结合官网的文档,加入些自己的理解.官方原文链接https://ace.c9.io/#nav=hi ...
- 通过url判断当前页,动态给导航加样式
//通过url判断当前页,动态给导航加样式 var str =location.pathname; var index = str.lastIndexOf("\/"); str = ...
- SpringBoot学习:在Interillj Idea上快速搭建SpringBoot项目
一.创建SpringBoot项目 二.导入Jar包(pom.xml) <?xml version="1.0" encoding="UTF-8"?> ...
- Python 实现腾讯新闻抓取
原文地址:http://www.cnblogs.com/rails3/archive/2012/08/14/2636780.htm 思路: 1.抓取腾讯新闻列表页面: http://news.qq.c ...
- vmware漏洞之一——转:利用一个堆溢出漏洞实现VMware虚拟机逃逸
转:https://zhuanlan.zhihu.com/p/27733895?utm_source=tuicool&utm_medium=referral 小结: vmware通过Backd ...
- 使用CSS让元素尺寸缩小时保持宽高比例一致
CSS中有一个属性padding对元素宽度存在依存关系.如果一个元素的 padding属性以百分比形式表示,padding 的大小是以该元素自身宽度为参照的. 若想要元素尺寸变化时,宽高比例不变,可以 ...
- CNN的发展
模型的建立过程: 1959年,Hubel & Wiesel发现动物视觉皮层中的细胞负责检测感受野(receptive fields)中的光线.论文:Receptive fields and f ...
- 洛谷——P1609 最小回文数
题目描述 回文数是从左向右读和从右向左读结果一样的数字串. 例如:121.44 和3是回文数,175和36不是. 对于一个给定的N,请你寻找一个回文数P,满足P>N. 满足这样条件的回文数很多, ...