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 相关文章推荐
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
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实现验证码功能
2006/10/09 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
Vue创建头部组件示例代码详解
2018/10/23 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
简介Django中内置的一些中间件
2015/07/24 Python
Python实现带百分比的进度条
2016/06/28 Python
python之Character string(实例讲解)
2017/09/25 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
通过Python实现一个简单的html页面
2020/05/16 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
市场部经理岗位职责
2014/04/10 职场文书
城管综合整治方案
2014/05/01 职场文书
村委会换届选举方案
2014/05/03 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js