juqery 学习之三 选择器 可见性 元素属性


Posted in Javascript onNovember 25, 2010

: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" /> ]
Javascript 相关文章推荐
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 #Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 #Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 #Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 #Javascript
jquery 学习之二 属性(类)
Nov 25 #Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 #Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 #Javascript
You might like
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
PHP 微信支付类 demo
2015/11/30 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
原JS实现banner图的常用功能
2017/06/12 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
python实现的重启关机程序实例
2014/08/21 Python
Python functools模块学习总结
2015/05/09 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python自动化生成IOS的图标
2018/11/13 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
网络专业学生个人的自我评价
2013/12/16 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
出纳员岗位责任制
2014/02/11 职场文书
教师党员承诺书
2014/03/25 职场文书
2014年党课学习材料
2014/05/11 职场文书
出差报告格式模板
2014/11/06 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
营业员岗位职责
2015/02/11 职场文书
不同意离婚答辩状
2015/05/22 职场文书
校运会广播稿
2015/08/19 职场文书
年终工作总结范文
2019/06/20 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书