查找jQuery对象的方法children() contents() find() parent() closet() next() pre() siblings()

通过关系查找jQuery对象的方法：

• children([selector])
• contents()
• find(selector)
• parent([selector])
• parents([selector])
• parentsUntil([selector])
• closet(selector)

children()和contents()都是查找子元素，不查找孙子元素。

<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">
                Lorem ipsum dolor sit amet.
            </p>
            <ul>
                <li class="item1">item1</li>
                <li class="item2">item2</li>
                <li class="item3">item3</li>
                <li class="item4">item4</li>
                <li class="item5">item5</li>
                <li class="item6">item6</li>
                <li class="item7">item7</li>
                <li class="item8">item8</li>
                <li class="item9">item9</li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">

    $(function(){
        console.log($("#box3").children())
        console.log($("#box3").contents())
    })
</script>

<script type="text/javascript">

    $(function(){
        console.log($("#box3").children("ul"))
        console.log($("#box3").contents("ul"))
    })
</script>

1.不带参数的children和contents。children的长度为2，只有其子元素。contents的长度为5，除了其子元素外还有文本。

2.带参数的话。他们一样。只有ul一个子元素。

find():在后代元素中过滤。包括子元素和孙子元素。

parent():返回元素的直接父元素，有且只有一个。

parents([selector]):多个父元素。一直获取到HTML。加选择器就查找到这个指定的选择器。

parentsUntils([selector])：直到查找到的selector。不包括selector。

closest(selector):从元素本身开始，逐层向上开始元素的匹配，并返回最先匹配的元素。要返回自身。

closest和parents的区别：

1. closest从当前元素开始匹配。parents从父元素开始找。
2. closest逐级向上查找，查找到要找的元素就停止查找。parents会一直找找到根元素再把其放到集合里，用选择器筛，所以会找到多个。
3. closest只会返回0个或1个元素。parents会返回多个。

 

• next([selector])
• nextAll([selector])
• nextUntil([selector])不包括selector
• prev([selector])
• prevAll([selector])
• prevUntil([selector])
• siblings([selector])

next([selector])  nextAll([selector])   nextUntil([selector])找紧邻的同辈元素。跟上面parent的类似。

siblings([selector])取到所有同辈元素的集合。把这个元素的兄弟姐妹全部取出来。但是取出来的元素不包含它本身。

$('.item6').siblings('li');//不包含item6