jQuery再学习之二、jQuery选择器

前言

jQuery选择器非常非常强大而且灵活，要完全掌握它是需要狠下一番功夫的。当然，掌握了主要的部分后，其它的了解就好，因为一些比较偏的毕竟用得少，而且可以有其它方法来实现。

选择器

1          基本选择器

1.1        #id选择器，通过元素的id来查找对象，

例：$("#txtTime")  

查找id为txtTime的元素

1.2        html标签选择器，通过html标签来查找对象，例：

$("div")

查找标签为div的所有元素

1.3        .css类选择器，通过元素使用的css类名来查找对象，例：

$(".title")

查找css类名为title的元素

1.4        *，选取所有元素，例：$("*")

1.5        xx,xx,xx多选择器，多个选择器一起使用（逗号分隔），例：

$("div,#txtname")

查找所有的div元素和id为txtName的元素

2          层级关系选择器

2.1        在所有子孙元素中匹配(使用空格)，例：

$("body div")

查找body元素下的所有子孙节点中的div元素

2.2        在所有子元素中匹配（使用>号），例：

$("body>div");

查找body元素下所有儿子节点中的div元素

3          简单条件选择器

3.1        :not(…) ：非选择器，祛除匹配的元素，例：

$("div:not(.txtRed)");

查找所有的div元素，并排除css类名为txtRed的div元素

3.2        :eq(index) ：匹配一个给定索引值的元素，例：

$("div:eq(1)");

查找所有div元素，并只取查找到的元素数组的索引号为1的div元素

3.3        :gt(index) ：匹配大于给定索引值的元素，例：

$("div:gt(1)");

查找所有div元素，并取查找到的元素数组的索引号大于1的div元素

3.4        :lt(index) ：匹配小于给定索引值的元素，例：

$("div:lt(1)");

查找所有div元素，并取查找到的元素数组的索引号小于1的div元素

3.5        :contains(text) ：匹配包含给定文本的元素，例：

$("div:contains('name')");

查找所有div元素，并取查找到的元素包含name文本的div元素

3.6        :hidden、:visible ：匹配所有隐藏的、可见的元素，例：

$("div:hidden");

查找所有div元素，并取所有隐藏了的div元素

4          属性选择器

4.1        […] ：匹配包含给定属性的元素，例：

$("div[id]")

查找包含id属性的div元素

4.2        [attribute(=/!=/^=/$=/*=)value] ：匹配给定的属性值(等于、不等于、开头为、结束为、包含)给定的value值，例：

$("div[id='title']")

查找id等于title的div（注意：值应该用引号括起来，如’value’）

4.3        […][…][…] ：多属性联合使用，例：

$("div[id='txt'][class='title']")

查找id为txt且class为title的div

$("input[type='checkbox'][checked='true']")

查找所有的被勾选了的复选框

5          查找选择器

5.1        $("...").children([…]) ：获取所有匹配元素的儿子节点的匹配元素，例：

$("body").children().length

获取body元素的所有儿子节点元素

$("body").children("div").length

获取body元素的所有儿子节点元素中的div元素

5.2        $("...").closest("...") : 从元素本身开始，逐级向上查找匹配的元素，并返回最新查找到的元素，例：

$("#dd").closest("div").html()

查找id为dd的元素的最近的上级div元素

5.3        $("...").find("...") ：查找元素下的匹配元素（所有子孙节点），例：

$("body").find("div").length

获取body节点下的所有div元素

5.4        $("...").parent() ：获取元素的父亲节点元素，例：

$("#yy").parent().html()

获取id为yy的节点的父亲节点

5.5        $("...").parents("...") ：获取元素的所有祖先节点或其中的匹配节点，例：

$("#yy").parents().length

获取id为yy的节点的所有祖先节点

$("#yy").parents("body").html()

获取id为yy的节点的祖先节点为body标签的元素