学习日记（10）--jQuery查找方法

为了更灵活地操作元素，除了选择器之外，jQuery还为我们提供了以“方法”形式存在的两种方式：一种是“过滤方法”；另外一种是“查找方法”。过滤方法和查找方法，其实就是对jQuery选择器的一种补充。
查找方法，主要是以当前所选元素为基点，找到这个元素的父元素、子元素或兄弟元素。
在jQuery中，对于查找方法，我们可以分为以下3种情况。
• （1）查找祖先元素。
• （2）查找后代元素。
• （3）查找兄弟元素。

查找祖先元素

parent()
parents()
parentsUntil()

parent()

可以使用parent()方法来查找当前元素的“父元素”。元素只有一个父元素。

$.parent(selector)

selector是一个可选参数，它是一个选择器，用来查找符合条件的父元素。当参数省略，表示父元素不需要满足任何条件；当参数不省略时，表示父元素需要满足条件。

 $("td").hover(function () {
                $(this).parent().css("background-color", "silver");//一行都变色
            }, function () {
                $(this).parent().css("background-color", "white");
            })

parents()

在jQuery中，使用parents()方法来查找当前元素的“祖先元素”。

$().parents(selector)

参数省略，表示祖先元素不需要满足任何条件；当参数不省略时，表示祖先元素需要满足条件

parent()和parents()这两个方法很好区分。其中，parent()是单数，因此查找的元素只有一个，那就是父元素。parents()是复数，因此查找的元素有多个，那就是所有的祖先元素。

 $(function(){
            var parents = $("span").parents();
            var result = [];
            $.each(parents, function(){
                var item = this.tagName.toLowerCase();
                result.push(item);
            });
            console.log(result.join(","));
        })

("span").parents()返回的是一个jQuery对象集合，在这个例子中，使用.each()来遍历span元素的所有祖先元素。

获取元素的标签名，不是应该使用$(this).tagName吗？为什么这里使用的是this.tagName呢?
$(this)是jQuery对象，它调用的是jQuery的方法或属性，例如click()、keyup()等。this是DOM对象，它调用的是DOM对象的方法或属性，例如this.id、this.value等。由于tagName属性是属于DOM对象的，所以我们这里使用的是this.tagName

parentsUntil()

jQuery中，parentsUntil()方法是parents()方法的一个补充，它可以查找“指定范围”的所有祖先元素，相当于在parents()方法返回的集合中截取一部分。

var parents = $("span").parentsUntil("div");
            var result = [];
            $.each(parents, function(){
                var item = this.tagName.toLowerCase();
                result.push(item);
            });
            console.log(result.join(","));

查找后代元素

查找当前元素的后代元素（子元素、孙元素等）
（1）children()
（2）find()
（3）contents()

children()

children()方法来查找当前元素的“子元素”。注意，children()方法只能查找子元素，不能查找其他后代元素。

$().children(selector)

当参数省略，表示选择所有子元素；当参数不省略时，表示选择符合条件的子元素。

$("#wrapper").hover(function(){
                $(this).children(".select").css("color", "red");
            },function(){
                $(this).children(".select").css("color", "black");
            })

$(this).children(“.select”).css(“color”,”black”);表示获取this的类名为select的子元素，无法获取孙元素。

find()

可以使用find()方法来查找当前元素的“后代元素”。注意，find()方法不仅能查找子元素，还能查找其他后代元素。

$().find(selector)

 $("#wrapper").hover(function(){
                $(this).find(".select").css("color", "red");
            },function(){
                $(this).find(".select").css("color", "black");
            })

contents()

使用contents()方法来获取子元素及其内部文本。contents()方法和children()方法相似，不同的是，contents()返回的jQuery对象中不仅包含子元素，还包含文本内容。而children()方法返回的jQuery对象中只会包含子元素，不包含文本内容。

向前查找兄弟元素

向前查找兄弟元素，指的是查找某个元素之前的兄弟元素。在jQuery中，对于向前查找兄弟元素，我们有以下3种方法。
（1）prev()
（2）prevAll()
（3）prevUntil()

prev()

我们可以使用prev()方法来查找某个元素的前一个“相邻”的兄弟元素。

$().prev()

prevAll()

使用prevAll()方法来查找某个元素前面“所有”兄弟元素。注意，prev()只会查找前面相邻的兄弟元素，而prevAll()则会查找前面所有的兄弟元素。

$().prevAll(selector)

prevUntil()

prevUntil()方法是prevAll()方法的一个补充，它可以查找元素前面“指定范围”的所有兄弟元素，相当于在prevAll()方法返回的集合中截取一部分。

  $("#lvye").prevUntil("#end").css("color", "red");
<li id="end">红：red</li>
        <li>橙：orange</li>
        <li>黄：yellow</li>
        <li id="lvye">绿：green</li>
        <li>青：cyan</li>
        <li>蓝：blue</li>
        <li>紫：purple</li>

$("#lvye").prevUntil("#end")表示以id="lvye"的元素为基点，向前找到id="end"的兄弟元素，然后选取这个范围之间的所有兄弟元素。

向后查找兄弟元素

向后查找兄弟元素，指的是查找某个元素之后的兄弟元素。有以下3种方法。
（1）next()
（2）nextAll()
（3）nextUntil()

next()

查找某个元素的后一个“相邻”的兄弟元素。

$().next()

$("#lvye").next().css("color", "red");
<li>红：red</li>
        <li>橙：orange</li>
        <li>黄：yellow</li>
        <li id="lvye">绿：green</li>
        <li>青：cyan</li>
        <li>蓝：blue</li>
        <li>紫：purple</li>

$("#lvye").next()表示选取id="lvye"元素后面相邻的兄弟元素，即“<li>青：cyan</li>”。

nextAll()

查找某个元素后面“所有”兄弟元素

$().nextAll(selector)

 $("#lvye").nextAll().css("color", "red");

nextUntil()

查找元素后面“指定范围”的所有兄弟元素

$().nextUntil(selector)

$("#lvye").nextUntil("#end").css("color", "red");
 <li>红：red</li>
        <li>橙：orange</li>
        <li>黄：yellow</li>
        <li id="lvye">绿：green</li>
        <li>青：cyan</li>
        <li>蓝：blue</li>
        <li id="end">紫：purple</li>
结果：青，蓝

向前查找兄弟元素：
prev()、prevAll()、prevUntil()
向后查找兄弟元素：
next()、nextAll()、nextUntil()

查找所有兄弟元素

一种不分前后的查找方法：siblings()。

$().siblings(selector)

$("#lvye").siblings().css("color", "red");
 <li>红：red</li>
        <li>橙：orange</li>
        <li>黄：yellow</li>
        <li id="lvye">绿：green</li>
        <li>青：cyan</li>
        <li>蓝：blue</li>
        <li>紫：purple</li>
结果：除了绿全选

带参数的siblings()

$("#lvye").siblings(".select").css("color", "red");

    })

$("#lvye").siblings(".select")表示选取id="lvye"元素的所有class="select"的兄弟元素，这里的兄弟元素不分前后。

参考网站：http://www.lvyestudy.com