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 UI CSS Framework开发Widget的经验
Aug 21 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
laravel安装和配置教程
2014/10/29 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
js new Date()实例测试
2019/10/31 Javascript
python实现RSA加密(解密)算法
2016/02/17 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
python如何查看网页代码
2020/06/07 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
投资意向书范本
2014/04/01 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
幼儿教师求职信
2014/05/24 职场文书
单位租房协议书范本
2014/12/04 职场文书
幼师中班个人总结
2015/02/12 职场文书
教师节倡议书2015
2015/04/27 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书