当前位置：首页 > 资讯 > 技术文档

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

时间：2022-02-23 22:11 编辑：来源：阅读：
扫一扫，手机访问

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

:hidden

匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到

[h1]返回值[/h1] Array<Element> [h1]示例[/h1] 查找所有不可见的 tr 元素 [b]HTML 代码:[/b]

<table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>

[b]jQuery 代码:[/b]

$("tr:hidden")

[b]结果:[/b]

[ <tr style="display:none"><td>Value 1</td></tr> ]

---------------------------------------------------------------------------------------

:visible

匹配所有的可见元素

[h1]返回值[/h1] Array<Element> [h1]示例[/h1] 查找所有可见的 tr 元素 [b]HTML 代码:[/b]

<table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>

[b]jQuery 代码:[/b]

$("tr:visible")

[b]结果:[/b]

[ <tr><td>Value 2</td></tr> ]

---------------------------------------------------------------------------------------

[attribute]

匹配包含给定属性的元素

[h1]返回值[/h1] Array<Element> [h1]参数[/h1] [b]attribute [/b](String) : 属性名 [h1]示例[/h1] 查找所有含有 id 属性的 div 元素 [b]HTML 代码:[/b]

<div> <p>Hello!</p> </div> <div id="test2"></div>

[b]jQuery 代码:[/b]

$("div[id]")

[b]结果:[/b]

[ <div id="test2"></div> ]

---------------------------------------------------------------------------------------

[attribute=value]

匹配给定的属性是某个特定值的元素

[h1]返回值[/h1] Array<Element> [h1]参数[/h1] [b]attribute [/b](String) : 属性名 [b]value [/b](String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。 [h1]示例[/h1] 查找所有 name 属性是 newsletter 的 input 元素 [b]HTML 代码:[/b]

'<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" />

[b]jQuery 代码:[/b]

$("input[name='newsletter']").attr("checked", true);

[b]结果:[/b]

[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

---------------------------------------------------------------------------------------

[attribute!=value]

匹配给定的属性是不包含某个特定值的元素

[h1]返回值[/h1] Array<Element> [h1]参数[/h1] [b]attribute [/b](String) : 属性名 [b]value [/b](String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。 [h1]示例[/h1] 查找所有 name 属性不是 newsletter 的 input 元素 [b]HTML 代码:[/b]

'<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" />

[b]jQuery 代码:[/b]

$("input[name!='newsletter']").attr("checked", true);

[b]结果:[/b]

[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

---------------------------------------------------------------------------------------

[attribute^=value]

匹配给定的属性是以某些值开始的元素

[h1]返回值[/h1] Array<Element> [h1]参数[/h1] [b]attribute [/b](String) : 属性名 [b]value [/b]( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。 [h1]示例[/h1] 查找所有 name 以 'news' 开始的 input 元素 [b]HTML 代码:[/b]

[b]jQuery 代码:[/b]

$("input[name^='news']")

[b]结果:[/b]

[ <input name="newsletter" />, <input name="newsboy" /> ]

---------------------------------------------------------------------------------------

[attribute$=value]

匹配给定的属性是以某些值结尾的元素

[h1]返回值[/h1] Array<Element> [h1]参数[/h1] [b]attribute [/b](String) : 属性名 [b]value [/b](String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。 [h1]示例[/h1] 查找所有 name 以 'letter' 结尾的 input 元素 [b]HTML 代码:[/b]

[b]jQuery 代码:[/b]

$("input[name$='letter']")

[b]结果:[/b]

[ <input name="newsletter" />, <input name="jobletter" /> ]

---------------------------------------------------------------------------------------

[attribute*=value]

匹配给定的属性是以包含某些值的元素

[h1]返回值[/h1] Array<Element> [h1]参数[/h1] [b]attribute [/b](String) : 属性名 [b]value [/b](String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。 [h1]示例[/h1] 查找所有 name 包含 'man' 的 input 元素 [b]HTML 代码:[/b]

[b]jQuery 代码:[/b]

$("input[name*='man']")

[b]结果:[/b]

[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

---------------------------------------------------------------------------------------

[selector1][selector2][selectorN]

复合属性选择器，需要同时满足多个条件时使用。

[h1]返回值[/h1] Array<Element> [h1]参数[/h1] [b]selector1 [/b](Selector) : 属性选择器 [b]selector2 [/b](Selector) : 另一个属性选择器，用以进一步缩小范围 [b]selectorN [/b](Selector) : 任意多个属性选择器 [h1]示例[/h1] 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 [b]HTML 代码:[/b]

[b]jQuery 代码:[/b]

$("input[id][name$='man']")

[b]结果:[/b]

[ <input id="letterman" name="new-letterman" /> ]