博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery匹配各种条件的选择器用法
阅读量:6159 次
发布时间:2019-06-21

本文共 4844 字,大约阅读时间需要 16 分钟。

: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>
 代码:
$("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" /> ]

 

转载于:https://www.cnblogs.com/zhangchenliang/p/3187822.html

你可能感兴趣的文章
Ubuntu 14.04 安装flash插件;安装Cairo-Dock; 美化为Mac
查看>>
产品预览
查看>>
ServletContext对象
查看>>
XENSERVER 图形界面安装Linux
查看>>
mysql表去掉回车、换行
查看>>
修改内核配置解决busybox的mdev -s启动速度慢的问题
查看>>
Python运维-获取当前操作系统的各种信息
查看>>
Spring如何处理线程并发
查看>>
linux常用命令(用户篇)
查看>>
获取组件的方式(方法)
查看>>
win2008 server_R2 自动关机 解决
查看>>
我的友情链接
查看>>
在C#调用C++的DLL简析(二)—— 生成托管dll
查看>>
Linux macos 常用终端操作
查看>>
企业网络的管理思路
查看>>
Linux磁盘分区与挂载
查看>>
J2se学习笔记一
查看>>
DNS视图及日志系统
查看>>
DDoS deflate–简单解决VPS被DDOS/CC攻击
查看>>
老李分享:Android性能优化之内存泄漏 3
查看>>