Jqurey查找页面元素
来源:互联网 发布:易语言a星寻路算法 编辑:程序博客网 时间:2024/05/22 03:22
1./**
2. * 在指定的上下文环境中搜索满足选择器表达式的 jQuery 对象。
3. *
4. * @selector(String) 选择器
5. * @context(Selector, DOM, jQuery 对象) 上下文环境(可选)。若不提供,则在整个文档中搜索;
6. * 若提供,则在当前的上下文环境中搜索
7. * @return jQuery Object(Array<Element>)
8. */
9.$(selector, context);
/**
* 在指定的上下文环境中搜索满足选择器表达式的 jQuery 对象。
*
* @selector(String) 选择器
* @context(Selector, DOM, jQuery 对象) 上下文环境(可选)。若不提供,则在整个文档中搜索;
* 若提供,则在当前的上下文环境中搜索
* @return jQuery Object(Array<Element>)
*/
$(selector, context);
Javascript代码
1./**
2. * 匹配所有元素,多用于结合上下文来搜索。
3. *
4. * @return jQuery Object(Array<Element>)
5. */
6.$("*");
/**
* 匹配所有元素,多用于结合上下文来搜索。
*
* @return jQuery Object(Array<Element>)
*/
$("*");
● .class
Javascript代码
1./**
2. * 根据给定的类匹配元素。
3. *
4. * @className(String) 类名
5. * @return jQuery Object(Array<Element>)
6. */
7.$(".className");
/**
* 根据给定的类匹配元素。
*
* @className(String) 类名
* @return jQuery Object(Array<Element>)
*/
$(".className");
● element(即 tagName)
Javascript代码
1./**
2. * 根据给定的元素名(tagName)匹配符合的元素。
3. *
4. * @tagName(String) 一个用于搜索的元素。指向 DOM 节点的标签名。
5. * @return jQuery Object(Array<Element>)
6. */
7.$("tagName");
8.
9.// 例子:查找 DIV 元素。
10.<div>DIV1</div>
11.<div>DIV2</div>
12.<span>SPAN</span>
13.
14.$("div") -> [ <div>DIV1</div>, <div>DIV2</div> ]
/**
* 根据给定的元素名(tagName)匹配符合的元素。
*
* @tagName(String) 一个用于搜索的元素。指向 DOM 节点的标签名。
* @return jQuery Object(Array<Element>)
*/
$("tagName");
// 例子:查找 DIV 元素。
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
$("div") -> [ <div>DIV1</div>, <div>DIV2</div> ]
● #id
Javascript代码
1./**
2. * 根据给定的 ID 匹配一个元素。
3. *
4. * @id(String) 元素的 id 属性中给定的值。
5. * @return jQuery Object(Element)
6. */
7.$("#id");
8.
9.// 例子:查找 ID 为 "myDiv" 的元素
10.<div id="notMe"><p>id="notMe"</p></div>
11.<div id="myDiv">id="myDiv"</div>
12.
13.$("#myDiv") -> [ <div id="myDiv">id="myDiv"</div> ]
/**
* 根据给定的 ID 匹配一个元素。
*
* @id(String) 元素的 id 属性中给定的值。
* @return jQuery Object(Element)
*/
$("#id");
// 例子:查找 ID 为 "myDiv" 的元素
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
$("#myDiv") -> [ <div id="myDiv">id="myDiv"</div> ]
● selector1,selector2,selectorN(并集)
Javascript代码
1./**
2. * 将每一个选择器匹配到的元素合并后一起返回。
3. * 你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
4. *
5. * @selector1(Selector) 一个有效的选择器
6. * @selector2(Selector) 另一个有效的选择器
7. * @selectorN(Selector) (可选) 任意多个有效选择器
8. * @return jQuery Object(Array<Element>)
9. */
10.$("selector1,selector2,selectorN");
11.
12.// 例子:找到匹配任意一个类的元素。
13.<div>div</div>
14.<p class="myClass">p class="myClass"</p>
15.<span>span</span>
16.<p class="notMyClass">p class="notMyClass"</p>
17.
18.$("div,span,p.myClass") ->
19. [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
/**
* 将每一个选择器匹配到的元素合并后一起返回。
* 你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
*
* @selector1(Selector) 一个有效的选择器
* @selector2(Selector) 另一个有效的选择器
* @selectorN(Selector) (可选) 任意多个有效选择器
* @return jQuery Object(Array<Element>)
*/
$("selector1,selector2,selectorN");
// 例子:找到匹配任意一个类的元素。
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
$("div,span,p.myClass") ->
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
● ancestor descendant(直接孩子 + 间接孩子)
Javascript代码
1./**
2. * 在给定的祖先元素下匹配所有的后代(直接孩子 + 间接孩子)元素。
3. *
4. * @ancestor(Selector) 任何有效选择器
5. * @descendant(Selector) 用以匹配元素的选择器,并且它是第一个选择器的后代元素
6. * @return jQuery Object(Array<Element>)
7. */
8.$("ancestor descendant");
9.
10.// 例子:找到表单中所有的 input 元素。
11.<form>
12. <label>Name:</label>
13. <input name="name" />
14. <fieldset>
15. <label>Newsletter:</label>
16. <input name="newsletter" />
17. </fieldset>
18.</form>
19.<input name="none" />
20.
21.$("form input") -> [ <input name="name" />, <input name="newsletter" /> ]
/**
* 在给定的祖先元素下匹配所有的后代(直接孩子 + 间接孩子)元素。
*
* @ancestor(Selector) 任何有效选择器
* @descendant(Selector) 用以匹配元素的选择器,并且它是第一个选择器的后代元素
* @return jQuery Object(Array<Element>)
*/
$("ancestor descendant");
// 例子:找到表单中所有的 input 元素。
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$("form input") -> [ <input name="name" />, <input name="newsletter" /> ]
● parent > child(直接孩子)
Javascript代码
1./**
2. * 在给定的父元素下匹配所有的子元素(直接孩子)。
3. *
4. * @parent(Selector) 任何有效选择器
5. * @child(Selector) 用以匹配元素的选择器,并且它是第一个选择器的子元素
6. * @return jQuery Object(Array<Element>)
7. */
8.$("parent > child");
9.
10.// 例子:匹配表单中所有的子级 input 元素。
11.<form>
12. <label>Name:</label>
13. <input name="name" />
14. <fieldset>
15. <label>Newsletter:</label>
16. <input name="newsletter" />
17. </fieldset>
18.</form>
19.<input name="none" />
20.
21.$("form > input") -> [ <input name="name" /> ]
/**
* 在给定的父元素下匹配所有的子元素(直接孩子)。
*
* @parent(Selector) 任何有效选择器
* @child(Selector) 用以匹配元素的选择器,并且它是第一个选择器的子元素
* @return jQuery Object(Array<Element>)
*/
$("parent > child");
// 例子:匹配表单中所有的子级 input 元素。
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$("form > input") -> [ <input name="name" /> ]
● prev + next
Javascript代码
1./**
2. * 匹配所有紧接在 prev 元素后的 next 元素。
3. *
4. * @prev(Selector) 任何有效选择器
5. * @next(Selector) 一个有效选择器并且紧接着第一个选择器
6. * @return jQuery Object(Array<Element>)
7. */
8.$("prev + next");
9.
10.// 例子:匹配所有跟在 label 后面的 input 元素。
11.<form>
12. <label>Name:</label>
13. <input name="name" />
14. <fieldset>
15. <label>Newsletter:</label>
16. <input name="newsletter" />
17. </fieldset>
18.</form>
19.<input name="none" />
20.
21.$("label + input") -> [ <input name="name" />, <input name="newsletter" /> ]
/**
* 匹配所有紧接在 prev 元素后的 next 元素。
*
* @prev(Selector) 任何有效选择器
* @next(Selector) 一个有效选择器并且紧接着第一个选择器
* @return jQuery Object(Array<Element>)
*/
$("prev + next");
// 例子:匹配所有跟在 label 后面的 input 元素。
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$("label + input") -> [ <input name="name" />, <input name="newsletter" /> ]
● prev ~ siblings
Javascript代码
1./**
2. * 匹配 prev 元素之后的所有 siblings 元素。
3. *
4. * @prev(Selector) 任何有效选择器
5. * @siblings(Selector) 一个选择器,并且它作为第一个选择器的同辈
6. * @return jQuery Object(Array<Element>)
7. */
8.$("prev ~ siblings");
9.
10.// 例子:找到所有与表单同辈的 input 元素。
11.<form>
12. <label>Name:</label>
13. <input name="name" />
14. <fieldset>
15. <label>Newsletter:</label>
16. <input name="newsletter" />
17. </fieldset>
18.</form>
19.<input name="none" />
20.
21.$("form ~ input") -> [ <input name="none" /> ]
/**
* 匹配 prev 元素之后的所有 siblings 元素。
*
* @prev(Selector) 任何有效选择器
* @siblings(Selector) 一个选择器,并且它作为第一个选择器的同辈
* @return jQuery Object(Array<Element>)
*/
$("prev ~ siblings");
// 例子:找到所有与表单同辈的 input 元素。
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$("form ~ input") -> [ <input name="none" /> ]
● :animated
Javascript代码
1./**
2. * 匹配所有正在执行动画效果的元素。
3. *
4. * @prev(Selector) 任何有效选择器
5. * @siblings(Selector) 一个选择器,并且它作为第一个选择器的同辈
6. * @return jQuery Object(Array<Element>)
7. */
8.
9.// 例子:只有对不在执行动画效果的元素执行一个动画特效。
10.<button id="run">Run</button><div></div>
11.
12.$("#run").click(function() {
13. $("div:not(:animated)").animate({ left: "+=20" }, 1000);
14.});
/**
* 匹配所有正在执行动画效果的元素。
*
* @prev(Selector) 任何有效选择器
* @siblings(Selector) 一个选择器,并且它作为第一个选择器的同辈
* @return jQuery Object(Array<Element>)
*/
// 例子:只有对不在执行动画效果的元素执行一个动画特效。
<button id="run">Run</button><div></div>
$("#run").click(function() {
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
● :eq(index)
Javascript代码
1./**
2. * 匹配一个给定索引值的元素。
3. *
4. * @index (Number) 从 0 开始计数的索引值
5. * @return jQuery Object(Element)
6. */
7.
8./*
9. * 例子:查找表格的第二行,匹配到第一个 table 的 tr 即停止了,不会再去匹配第二个 table。
10. * 如果第一个 table 未找到匹配的索引才会去找第二个 table 的 tr。
11. */
12.<table>
13. <tr><td>Header 1</td></tr>
14. <tr><td>Value 1</td></tr>
15. <tr><td>Value 2</td></tr>
16.</table>
17.
18.<table>
19. <tr><td>Header 1-1</td></tr>
20. <tr><td>Value 1-1</td></tr>
21. <tr><td>Value 2-1</td></tr>
22.</table>
23.
24.$("tr:eq(1)") -> [ <tr><td>Value 1</td></tr> ]
25.
26.<table>
27. <tr><td>Header 1</td></tr>
28.</table>
29.
30.<table>
31. <tr><td>Header 1-1</td></tr>
32. <tr><td>Value 1-1</td></tr>
33. <tr><td>Value 2-1</td></tr>
34.</table>
35.
36.$("tr:eq(1)") -> [ <tr><td>Header 1-1</td></tr> ]
/**
* 匹配一个给定索引值的元素。
*
* @index (Number) 从 0 开始计数的索引值
* @return jQuery Object(Element)
*/
/*
* 例子:查找表格的第二行,匹配到第一个 table 的 tr 即停止了,不会再去匹配第二个 table。
* 如果第一个 table 未找到匹配的索引才会去找第二个 table 的 tr。
*/
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<table>
<tr><td>Header 1-1</td></tr>
<tr><td>Value 1-1</td></tr>
<tr><td>Value 2-1</td></tr>
</table>
$("tr:eq(1)") -> [ <tr><td>Value 1</td></tr> ]
<table>
<tr><td>Header 1</td></tr>
</table>
<table>
<tr><td>Header 1-1</td></tr>
<tr><td>Value 1-1</td></tr>
<tr><td>Value 2-1</td></tr>
</table>
$("tr:eq(1)") -> [ <tr><td>Header 1-1</td></tr> ]
● :even
Javascript代码
1./**
2. * 匹配所有索引值为偶数的元素,从 0 开始计数。
3. *
4. * @return jQuery Object(Array<Element>)
5. */
6.
7.// 例子:查找表格的 1, 3, 5 ... 行(即索引值 0, 2, 4 ... )。
8.<table>
9. <tr><td>Header 1</td></tr>
10. <tr><td>Value 1</td></tr>
11. <tr><td>Value 2</td></tr>
12.</table>
13.
14.$("tr:even") -> [ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
/**
* 匹配所有索引值为偶数的元素,从 0 开始计数。
*
* @return jQuery Object(Array<Element>)
*/
// 例子:查找表格的 1, 3, 5 ... 行(即索引值 0, 2, 4 ... )。
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:even") -> [ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
● dd
Javascript代码
1./**
2. * 匹配所有索引值为奇数的元素,从 0 开始计数。
3. *
4. * @return jQuery Object(Array<Element>)
5. */
6.
7.// 例子:查找表格的 2, 4, 6 ... 行(即索引值 1, 3, 5 ... )。
8.<table>
9. <tr><td>Header 1</td></tr>
10. <tr><td>Value 1</td></tr>
11. <tr><td>Value 2</td></tr>
12.</table>
13.
14.$("tr:odd") -> [ <tr><td>Value 1</td></tr> ]
/**
* 匹配所有索引值为奇数的元素,从 0 开始计数。
*
* @return jQuery Object(Array<Element>)
*/
// 例子:查找表格的 2, 4, 6 ... 行(即索引值 1, 3, 5 ... )。
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:odd") -> [ <tr><td>Value 1</td></tr> ]
● :first
Javascript代码
1./**
2. * 匹配找到的第一个元素。
3. *
4. * @return jQuery Object(Element)
5. */
6.
7.// 例子:查找表格的第一行。
8.<table>
9. <tr><td>Header 1</td></tr>
10. <tr><td>Value 1</td></tr>
11. <tr><td>Value 2</td></tr>
12.</table>
13.
14.$("tr:first") -> [ <tr><td>Header 1</td></tr> ]
/**
* 匹配找到的第一个元素。
*
* @return jQuery Object(Element)
*/
// 例子:查找表格的第一行。
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:first") -> [ <tr><td>Header 1</td></tr> ]
● :last
Javascript代码
1./**
2. * 匹配找到的最后一个元素。
3. *
4. * @return jQuery Object(Element)
5. */
6.
7.// 例子:查找表格的最后一行。
8.<table>
9. <tr><td>Header 1</td></tr>
10. <tr><td>Value 1</td></tr>
11. <tr><td>Value 2</td></tr>
12.</table>
13.
14.$("tr:last") -> [ <tr><td>Value 2</td></tr> ]
/**
* 匹配找到的最后一个元素。
*
* @return jQuery Object(Element)
*/
// 例子:查找表格的最后一行。
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:last") -> [ <tr><td>Value 2</td></tr> ]
● :gt(index)
Javascript代码
1./**
2. * 匹配所有大于给定索引值的元素。
3. *
4. * @index(Number) 从 0 开始计数的索引值
5. * @return jQuery Object(Array<Element>)
6. */
7.
8.// 例子:查找第 2, 3 行,即索引值是 1 和 2,也就是比 0 大。
9.<table>
10. <tr><td>Header 1</td></tr>
11. <tr><td>Value 1</td></tr>
12. <tr><td>Value 2</td></tr>
13.</table>
14.
15.$("tr:gt(0)") -> [ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
/**
* 匹配所有大于给定索引值的元素。
*
* @index(Number) 从 0 开始计数的索引值
* @return jQuery Object(Array<Element>)
*/
// 例子:查找第 2, 3 行,即索引值是 1 和 2,也就是比 0 大。
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:gt(0)") -> [ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
● :lt(index)
Javascript代码
1./**
2. * 匹配所有小于给定索引值的元素。
3. *
4. * @index(Number) 从 0 开始计数的索引值
5. * @return jQuery Object(Array<Element>)
6. */
7.
8.// 例子:查找第 1, 2 行,即索引值是 0 和 1,也就是比 2 小。
9.<table>
10. <tr><td>Header 1</td></tr>
11. <tr><td>Value 1</td></tr>
12. <tr><td>Value 2</td></tr>
13.</table>
14.
15.$("tr:lt(2)") -> [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
/**
* 匹配所有小于给定索引值的元素。
*
* @index(Number) 从 0 开始计数的索引值
* @return jQuery Object(Array<Element>)
*/
// 例子:查找第 1, 2 行,即索引值是 0 和 1,也就是比 2 小。
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:lt(2)") -> [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
● :header
Javascript代码
1./**
2. * 匹配如 h1, h2, h3 之类的标题元素。
3. *
4. * @return jQuery Object(Array<Element>)
5. */
6.
7.// 例子:给页面内所有标题加上背景色。
8.<h1>Header 1</h1>
9.<p>Contents 1</p>
10.<h2>Header 2</h2>
11.<p>Contents 2</p>
12.
13.$(":header").css("background", "#EEE") ->
14.[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]
/**
* 匹配如 h1, h2, h3 之类的标题元素。
*
* @return jQuery Object(Array<Element>)
*/
// 例子:给页面内所有标题加上背景色。
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
$(":header").css("background", "#EEE") ->
[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]
● :not(selector)
Javascript代码
1./**
2. * 去除所有与给定选择器匹配的元素。
3. *
4. * @selector(Selector) 用于筛选的选择器
5. * @return jQuery Object(Array<Element>)
6. */
7.
8.// 例子:查找所有未选中的 input 元素。
9.<input name="apple" />
10.<input name="flower" checked="checked" />
11.
12.$("input:not(:checked)") -> [ <input name="apple" /> ]
/**
* 去除所有与给定选择器匹配的元素。
*
* @selector(Selector) 用于筛选的选择器
* @return jQuery Object(Array<Element>)
*/
// 例子:查找所有未选中的 input 元素。
<input name="apple" />
<input name="flower" checked="checked" />
$("input:not(:checked)") -> [ <input name="apple" /> ]
● :contains(text)
Javascript代码
1./**
2. * 匹配包含给定文本的元素。
3. *
4. * @text(String) 一个用以查找的字符串
5. * @return jQuery Object(Array<Element>)
6. */
7.
8.// 例子:查找所有包含 "John" 的 div 元素。
9.<div><span>John Re</span></div>
10.<div>George Martin</div>
11.<div>Malcom John Sinclair</div>
12.<div>J. Ohn</div>
13.
14.$("div:contains('John')") -> [ <div><span>John Re</span></div>, <div>Malcom John Sinclair</div> ]
/**
* 匹配包含给定文本的元素。
*
* @text(String) 一个用以查找的字符串
* @return jQuery Object(Array<Element>)
*/
// 例子:查找所有包含 "John" 的 div 元素。
<div><span>John Re</span></div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
$("div:contains('John')") -> [ <div><span>John Re</span></div>, <div>Malcom John Sinclair</div> ]
● :empty
Javascript代码
1./**
2. * 匹配所有不包含子元素或者文本的空元素。
3. *
4. * @return jQuery Object(Array<Element>)
5. */
6.
7.// 例子:查找所有不包含子元素或者文本的空元素。
8.<table>
9. <tr><td>Value 1</td><td></td></tr>
10. <tr><td>Value 2</td><td></td></tr>
11.</table>
12.
13.$("td:empty") -> [ <td></td>, <td></td> ]
/**
* 匹配所有不包含子元素或者文本的空元素。
*
* @return jQuery Object(Array<Element>)
*/
// 例子:查找所有不包含子元素或者文本的空元素。
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
$("td:empty") -> [ <td></td>, <td></td> ]
● :has(selector)(text)
Javascript代码
1./**
2. * 匹配含有选择器所匹配的元素的元素。
3. *
4. * @selector(Selector) 一个用于筛选的选择器
5. * @return jQuery Object(Array<Element>)
6. */
7.
8.// 例子:给所有包含 p 元素的 div 元素添加一个 text 类。
9.<div><span><p>Hello</p></span></div>
10.<div>Hello again!</div>
11.
12.$("div:has(p)").addClass("text") -> [ <div class="text"><span><p>Hello</p></span></div> ]
/**
* 匹配含有选择器所匹配的元素的元素。
*
* @selector(Selector) 一个用于筛选的选择器
* @return jQuery Object(Array<Element>)
*/
// 例子:给所有包含 p 元素的 div 元素添加一个 text 类。
<div><span><p>Hello</p></span></div>
<div>Hello again!</div>
$("div:has(p)").addClass("text") -> [ <div class="text"><span><p>Hello</p></span></div> ]
● :parent
Javascript代码
1./**
2. * 匹配含有子元素或者文本的元素。
3. *
4. * @return jQuery Object(Array<Element>)
5. */
6.
7.// 例子:查找所有含有子元素或者文本的 td 元素。
8.<table>
9. <tr><td>Value 1</td><td></td></tr>
10. <tr><td>Value 2</td><td></td></tr>
11.</table>
12.
13.$("td:parent") -> [ <td>Value 1</td>, <td>Value 2</td> ]
/**
* 匹配含有子元素或者文本的元素。
*
* @return jQuery Object(Array<Element>)
*/
// 例子:查找所有含有子元素或者文本的 td 元素。
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
$("td:parent") -> [ <td>Value 1</td>, <td>Value 2</td> ]
● :hidden
Javascript代码
1./**
2. * 匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 时也会被匹配到。
3. *
4. * @return jQuery Object(Array<Element>)
5. */
6.
7.// 例子:查找所有不可见的 tr 元素。
8.<table>
9. <tr style="display:none"><td>Value 1</td></tr>
10. <tr><td>Value 2</td></tr>
11.</table>
12.
13.$("tr:hidden") -> [ <tr style="display:none"><td>Value 1</td></tr> ]
/**
* 匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 时也会被匹配到。
*
* @return jQuery Object(Array<Element>)
*/
// 例子:查找所有不可见的 tr 元素。
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:hidden") -> [ <tr style="display:none"><td>Value 1</td></tr> ]
● :visible
Javascript代码
1./**
2. * 匹配所有的可见元素。
3. *
4. * @return jQuery Object(Array<Element>)
5. */
6.
7.// 例子:查找所有可见的 tr 元素。
8.<table>
9. <tr style="display:none"><td>Value 1</td></tr>
10. <tr><td>Value 2</td></tr>
11.</table>
12.
13.$("tr:visible") -> [ <tr><td>Value 2</td></tr> ]
/**
* 匹配所有的可见元素。
*
* @return jQuery Object(Array<Element>)
*/
// 例子:查找所有可见的 tr 元素。
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:visible") -> [ <tr><td>Value 2</td></tr> ]
● [attribute]
Javascript代码
1./**
2. * 匹配包含给定属性的元素(若某个元素有这个属性,可是值为 "",那么这个元素不将被包含进来)。
3. *
4. * @attribute(String) 属性名
5. * @return jQuery Object(Array<Element>)
6. */
7.
8.// 例子:查找所有含有 id 属性的 div 元素。
9.<div>
10. <p>Hello!</p>
11.</div>
12.<div id="test2"></div>
13.
14.$("div[id]") -> [ <div id="test2"></div> ]
/**
* 匹配包含给定属性的元素(若某个元素有这个属性,可是值为 "",那么这个元素不将被包含进来)。
*
* @attribute(String) 属性名
* @return jQuery Object(Array<Element>)
*/
// 例子:查找所有含有 id 属性的 div 元素。
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
$("div[id]") -> [ <div id="test2"></div> ]
● [attribute=value]
Javascript代码
1./**
2. * 匹配给定的属性是某个特定值的元素。
3. *
4. * @attribute(String) 属性名
5. * @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时,用以避免冲突。
6. * @return jQuery Object(Array<Element>)
7. */
8.
9.// 例子:查找所有 name 属性是 "newsletter" 的 input 元素。
10.<input type="checkbox" name="newsletter" value="Hot Fuzz" />
11.<input type="checkbox" name="newsletter" value="Cold Fusion" />
12.<input type="checkbox" name="accept" value="Evil Plans" />
13.
14.$("input[name='newsletter']").attr("checked", true) -> [ <div id="test2"></div> ] ->
15. [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />,
16. <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
/**
* 匹配给定的属性是某个特定值的元素。
*
* @attribute(String) 属性名
* @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时,用以避免冲突。
* @return jQuery Object(Array<Element>)
*/
// 例子:查找所有 name 属性是 "newsletter" 的 input 元素。
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
$("input[name='newsletter']").attr("checked", true) -> [ <div id="test2"></div> ] ->
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />,
<input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
● [attribute!=value]
Javascript代码
1./**
2. * 匹配给定的属性是不包含某个特定值的元素。
3. *
4. * @attribute(String) 属性名
5. * @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时,用以避免冲突。
6. * @return jQuery Object(Array<Element>)
7. */
8.
9.// 例子:查找所有 name 属性不是 "newsletter" 的 input 元素。
10.<input type="checkbox" name="newsletter" value="Hot Fuzz" />
11.<input type="checkbox" name="newsletter" value="Cold Fusion" />
12.<input type="checkbox" name="accept" value="Evil Plans" />
13.
14.$("input[name!='newsletter']").attr("checked", true) ->
15. [ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
/**
* 匹配给定的属性是不包含某个特定值的元素。
*
* @attribute(String) 属性名
* @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时,用以避免冲突。
* @return jQuery Object(Array<Element>)
*/
// 例子:查找所有 name 属性不是 "newsletter" 的 input 元素。
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
$("input[name!='newsletter']").attr("checked", true) ->
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
● [attribute*=value]
Javascript代码
1./**
2. * 匹配给定的属性是以包含某些值的元素。
3. *
4. * @attribute(String) 属性名
5. * @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时,用以避免冲突。
6. * @return jQuery Object(Array<Element>)
7. */
8.
9.// 例子:查找所有 name 包含 "man" 的 input 元素。
10.<input name="man-news" />
11.<input name="milkman" />
12.<input name="letterman2" />
13.<input name="newmilk" />
14.
15.$("input[name*='man']") ->
16.[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
/**
* 匹配给定的属性是以包含某些值的元素。
*
* @attribute(String) 属性名
* @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时,用以避免冲突。
* @return jQuery Object(Array<Element>)
*/
// 例子:查找所有 name 包含 "man" 的 input 元素。
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
$("input[name*='man']") ->
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
● [attribute^=value]
Javascript代码
1./**
2. * 匹配给定的属性是以某些值开始的元素。
3. *
4. * @attribute(String) 属性名
5. * @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时,用以避免冲突。
6. * @return jQuery Object(Array<Element>)
7. */
8.
9.// 例子:查找所有 name 以 "news" 开始的 input 元素。
10.<input name="newsletter" />
11.<input name="milkman" />
12.<input name="newsboy" />
13.
14.$("input[name^='news']") -> [ <input name="newsletter" />, <input name="newsboy" /> ]
/**
* 匹配给定的属性是以某些值开始的元素。
*
* @attribute(String) 属性名
* @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时,用以避免冲突。
* @return jQuery Object(Array<Element>)
*/
// 例子:查找所有 name 以 "news" 开始的 input 元素。
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
$("input[name^='news']") -> [ <input name="newsletter" />, <input name="newsboy" /> ]
● [attribute$=value]
Javascript代码
1./**
2. * 匹配给定的属性是以某些值结尾的元素。
3. *
4. * @attribute(String) 属性名
5. * @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时,用以避免冲突。
6. * @return jQuery Object(Array<Element>)
7. */
8.
9.// 例子:查找所有 name 以 "letter" 结尾的 input 元素。
10.<input name="newsletter" />
11.<input name="milkman" />
12.<input name="jobletter" />
13.
14.$("input[name$='letter']") -> [ <input name="newsletter" />, <input name="jobletter" /> ]
/**
* 匹配给定的属性是以某些值结尾的元素。
*
* @attribute(String) 属性名
* @value(String) 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含 "]" 时,用以避免冲突。
* @return jQuery Object(Array<Element>)
*/
// 例子:查找所有 name 以 "letter" 结尾的 input 元素。
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
$("input[name$='letter']") -> [ <input name="newsletter" />, <input name="jobletter" /> ]
● [selector1][selector2][selectorN]
Javascript代码
1./**
2. * 复合属性选择器,需要同时满足多个条件时使用。
3. *
4. * @selector1(Selector) 属性选择器
5. * @selector2(Selector) 另一个属性选择器,用以进一步缩小范围
6. * @selectorN(Selector) 任意多个属性选择器
7. * @return jQuery Object(Array<Element>)
8. */
9.
10.// 例子:找到所有含有 id 属性,并且它的 name 属性是以 "man" 结尾的。
11.<input id="man-news" name="man-news" />
12.<input name="milkman" />
13.<input id="letterman" name="new-letterman" />
14.<input name="newmilk" />
15.
16.$("input[id][name$='man']") -> [ <input id="letterman" name="new-letterman" /> ]
/**
* 复合属性选择器,需要同时满足多个条件时使用。
*
* @selector1(Selector) 属性选择器
* @selector2(Selector) 另一个属性选择器,用以进一步缩小范围
* @selectorN(Selector) 任意多个属性选择器
* @return jQuery Object(Array<Element>)
*/
// 例子:找到所有含有 id 属性,并且它的 name 属性是以 "man" 结尾的。
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
$("input[id][name$='man']") -> [ <input id="letterman" name="new-letterman" /> ]
● :first-child
Javascript代码
1./**
2. * 匹配第一个子元素。
3. * :first 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
4. *
5. * @return jQuery Object(Array<Element>)
6. */
7.
8.// 例子:在每个 ul 中查找第一个 li。
9.<ul>
10. <li>John</li>
11. <li>Karl</li>
12. <li>Brandon</li>
13.</ul>
14.<ul>
15. <li>Glen</li>
16. <li>Tane</li>
17. <li>Ralph</li>
18.</ul>
19.
20.$("ul li:first-child") -> [ <li>John</li>, <li>Glen</li> ]
/**
* 匹配第一个子元素。
* :first 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
*
* @return jQuery Object(Array<Element>)
*/
// 例子:在每个 ul 中查找第一个 li。
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$("ul li:first-child") -> [ <li>John</li>, <li>Glen</li> ]
● :last-child
Javascript代码
1./**
2. * 匹配最后一个子元素。
3. * :last 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
4. *
5. * @return jQuery Object(Array<Element>)
6. */
7.
8.// 例子:在每个 ul 中查找最后一个 li。
9.<ul>
10. <li>John</li>
11. <li>Karl</li>
12. <li>Brandon</li>
13.</ul>
14.<ul>
15. <li>Glen</li>
16. <li>Tane</li>
17. <li>Ralph</li>
18.</ul>
19.
20.$("ul li:last-child") -> [ <li>Brandon</li>, <li>Ralph</li> ]
/**
* 匹配最后一个子元素。
* :last 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
*
* @return jQuery Object(Array<Element>)
*/
// 例子:在每个 ul 中查找最后一个 li。
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$("ul li:last-child") -> [ <li>Brandon</li>, <li>Ralph</li> ]
● :nth-child(index/even/odd/equation)
Javascript代码
1./**
2. * 匹配其父元素下的第 N 个子元素或奇偶元素。
3. * :eq(index) 只匹配一个元素,而这个将为每一个父元素匹配子元素。
4. * :nth-child 从 1 开始的,而 :eq() 是从 0 算起的!
5. *
6. * 可以使用:
7. * nth-child(even);
8. * nth-child(odd);
9. * nth-child(3n);
10. * nth-child(2);
11. * nth-child(3n+1);
12. * nth-child(3n+2);
13. *
14. * @index(Number) 要匹配元素的序号,从 1 开始
15. * @return jQuery Object(Array<Element>)
16. */
17.
18.// 例子:在每个 ul 查找第 2 个li。
19.<ul>
20. <li>John</li>
21. <li>Karl</li>
22. <li>Brandon</li>
23.</ul>
24.<ul>
25. <li>Glen</li>
26. <li>Tane</li>
27. <li>Ralph</li>
28.</ul>
29.
30.$("ul li:nth-child(2)") -> [ <li>Karl</li>, <li>Tane</li> ]
/**
* 匹配其父元素下的第 N 个子元素或奇偶元素。
* :eq(index) 只匹配一个元素,而这个将为每一个父元素匹配子元素。
* :nth-child 从 1 开始的,而 :eq() 是从 0 算起的!
*
* 可以使用:
* nth-child(even);
* nth-child(odd);
* nth-child(3n);
* nth-child(2);
* nth-child(3n+1);
* nth-child(3n+2);
*
* @index(Number) 要匹配元素的序号,从 1 开始
* @return jQuery Object(Array<Element>)
*/
// 例子:在每个 ul 查找第 2 个li。
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$("ul li:nth-child(2)") -> [ <li>Karl</li>, <li>Tane</li> ]
● nly-child
Javascript代码
1./**
2. * 如果某个元素是父元素中唯一的子元素,那它(子元素)将会被匹配。
3. * 如果父元素中含有其他元素,那它(子元素)将不会被匹配。
4. *
5. * @return jQuery Object(Array<Element>)
6. */
7.
8.// 例子:在 ul 中查找是唯一子元素的 li。
9.<ul>
10. <li>John</li>
11. <li>Karl</li>
12. <li>Brandon</li>
13.</ul>
14.<ul>
15. <li>Glen</li>
16.</ul>
17.
18.$("ul li:only-child") -> [ <li>Glen</li> ]
/**
* 如果某个元素是父元素中唯一的子元素,那它(子元素)将会被匹配。
* 如果父元素中含有其他元素,那它(子元素)将不会被匹配。
*
* @return jQuery Object(Array<Element>)
*/
// 例子:在 ul 中查找是唯一子元素的 li。
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
$("ul li:only-child") -> [ <li>Glen</li> ]
● form
Javascript代码
1.<form>
2. <input type="text" />
3. <input type="checkbox" />
4. <input type="radio" />
5. <input type="image" />
6. <input type="file" />
7. <input type="submit" />
8. <input type="reset" />
9. <input type="password" />
10. <input type="hidden" />
11. <input type="button" />
12. <select><option /></select>
13. <textarea></textarea>
14. <button></button>
15.</form>
16.
17.// 匹配按钮?
18.$(":button") -> [ <input type="button" />,<button></button> ]
19.// 匹配复选框
20.$(":checkbox") -> [ <input type="checkbox" /> ]
21.// 匹配文件域
22.$(":file") -> [ <input type="file" /> ]
23.// 匹配不可见元素,或者 type 为 hidden 的元素
24.$("input:hidden") -> [ <input type="hidden" /> ]
25.// 匹配图像域
26.$("input:image") -> [ <input type="image" /> ]
27.// 匹配 input, textarea, select 和 button 元素
28.$(":input") -> 全部
29.// 匹配密码框
30.$(":password") -> [ <input type="password" /> ]
31.// 匹配单选按钮
32.$(":radio") -> [ <input type="radio" /> ]
33.// 匹配重置按钮
34.$(":reset") -> [ <input type="reset" /> ]
35.// 匹配提交按钮
36.$(":submit") -> [ <input type="submit" /> ]
37.// 匹配单行文本框
38.$(":text") -> $(":submit") -> [ <input type="text" /> ]
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="hidden" />
<input type="button" />
<select><option /></select>
<textarea></textarea>
<button></button>
</form>
// 匹配按钮?
$(":button") -> [ <input type="button" />,<button></button> ]
// 匹配复选框
$(":checkbox") -> [ <input type="checkbox" /> ]
// 匹配文件域
$(":file") -> [ <input type="file" /> ]
// 匹配不可见元素,或者 type 为 hidden 的元素
$("input:hidden") -> [ <input type="hidden" /> ]
// 匹配图像域
$("input:image") -> [ <input type="image" /> ]
// 匹配 input, textarea, select 和 button 元素
$(":input") -> 全部
// 匹配密码框
$(":password") -> [ <input type="password" /> ]
// 匹配单选按钮
$(":radio") -> [ <input type="radio" /> ]
// 匹配重置按钮
$(":reset") -> [ <input type="reset" /> ]
// 匹配提交按钮
$(":submit") -> [ <input type="submit" /> ]
// 匹配单行文本框
$(":text") -> $(":submit") -> [ <input type="text" /> ]
● form object attribue
Javascript代码
1.<form>
2. <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
3. <input type="checkbox" name="newsletter" value="Weekly" />
4. <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
5. <input name="email" disabled="disabled" />
6.
7. <select>
8. <option value="1">Flowers</option>
9. <option value="2" selected="selected">Gardens</option>
10. <option value="3">Trees</option>
11. </select>
12.</form>
13.
14.// 匹配被选择的元素(复选框、单选框等,不包括 select 中的 option)
15.$("input:checked") ->
16. [ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />,
17. <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]
18.// 匹配可用元素
19.$("input:enabled") ->
20. <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
21. <input type="checkbox" name="newsletter" value="Weekly" />
22. <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
23.// 匹配不可用元素
24.$("input:disabled") -> [ <input name="email" disabled="disabled" /> ]
25.// 匹配选中的 option 元素
26.$("select option:selected") -> [ <option value="2" selected="selected">Gardens</option> ]
- Jqurey查找页面元素
- jqurey删除li元素
- 查找页面元素
- 查找页面中的文字元素
- jqurey
- jqurey
- JQurey
- 在父页面查找html元素
- html页面中查找元素 css
- 【基础3】通过By查找页面元素
- selenium----简单的页面元素查找方法
- Jqurey实现类似EasyUI的页面布局
- iframe页面和父页面之间元素查找的方法
- Jqurey 在显示或隐藏元素时的动画效果
- ruby 中使用 Dom技术来查找页面元素
- JQurey 隔行变色,鼠标悬停/移开,CheckBox选中,页面排序
- jqurey利用正则表达式判断注册页面信息
- 查找元素
- Linux下的ACE安装全攻略(转载)
- 关于DB2出现的登录错误及原因
- gridview 样式控制
- LINQ中国 LINQCHINA.COM
- 谈《卓有成效的管理者》对IT团队的价值 -- 我们有什么贡献?
- Jqurey查找页面元素
- TreeView控件
- .NET中的内部类型
- Sicily 1045. Space Management[离散化]
- greenlet implemenation
- java虚拟机
- Win7安装IIS
- 使用DTSC(Read Time Stamp Counter)指令做高精度时间处理,比QueryPerformanceCounter效率要高出一个数量级
- 使用 Amazon S3 服务轻松实现存储