juqery 学习之三 选择器 可见性 元素属性 |
|
本文标签：选择器,可见性 :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 dont 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" /> ]
|
