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 相关文章推荐
jquery.validate使用攻略 第一部
Jul 01 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
javascript检测两个数组是否相似
May 19 Javascript
Jquery ajax基础教程
Nov 20 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
小程序实现列表删除功能
Oct 30 Javascript
微信小程序实现底部导航
Nov 05 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
使用Mock.js生成前端测试数据
Dec 13 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
来自phpguru得Php Cache类源码
2010/04/15 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python通过select实现异步IO的方法
2015/06/04 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python中类的属性和方法介绍
2018/11/27 Python
python 命令行传入参数实现解析
2019/08/30 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
创业大赛策划书
2014/03/01 职场文书
消防安全月活动总结
2015/05/08 职场文书
高中运动会广播稿
2015/08/19 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
Django框架中模型的用法
2022/06/10 Python