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的投票系统显示结果插件
Aug 12 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 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中养成7个面向对象的好习惯
2010/07/17 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
PHP生成随机密码类分享
2014/06/25 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
使用Modello编写JavaScript类
2006/12/22 Javascript
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
Django实现学生管理系统
2019/02/26 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Python中zip函数如何使用
2020/06/04 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
电子商务网站的创业计划书
2014/01/05 职场文书
家长评语大全
2014/01/22 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
自荐信怎么写
2015/03/04 职场文书
暂停营业通知
2015/04/25 职场文书
敬老院义诊活动总结
2015/05/07 职场文书