jquery(2）.节点篇

1.1节点操作parent() parents() closet()

<style>
    #div1{
        width: 300px;
        height: 300px;
        background-color: blue;
    }

    #div2{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

使用parent仅能作用到父级

<div id="div1">
    <div id="div2">

    </div>
</div>

<script>
    $(document).click(function(){
        $('#div2').parent().css('background','yellow');
    })
</script>

parents能作用到全部的父级及上级元素

('#div2').parents().css('background','yellow');
    })

parents还可以传参数，作为选择器

$(document).click(function(){
        $('#div2').parents('.aaa').css('background','yellow');
    })

closest

$('#div2').closest('.aaa').css('background','yellow')

1.2siblings()
获取的是兄弟节点，但是不包括自身。

<ul>
    <li>1</li>
    <li class="two">2</li>
    <li>3</li>
    <li>4</li>
</ul>

<script>
    $(document).click(function(){
        $('.two').siblings().css('background','yellow')
    })
</script>

1.3 prev() prevAll() prevUntil(); next() nextAll() nextUntil()
prev()获取的是同级前面的第一个元素
next()获取的是同级后面的第一个元素

$('.two').next().css('background','yellow');

nextAll()获取的是同级后面的所有元素

$('.two').nextAll().css('background','yellow');

nextUntil()获取的是同级后面的所有元素直到某个元素 但是不包括该元素的自身

<ul>
    <li>1</li>
    <li class="two">2</li>
    <li class="aaa">3</li>
    <li class="bbb">4</li>
    <li class="ccc">5</li>
</ul>

<script>
    $(document).click(function(){
        $('.two').nextUntil('.ccc').css('background','yellow');
    })
</script>

1.4过滤 first() last() eq() filter() not()

first()就是获取第一个，这个不用多说了 如同eq(0);
last() <=> eq($('li').size()-1)&&eq(-1);

filter表示过滤的意思 在函数里面可以输入过滤条件

$('li').filter('li:nth-child(2n)').css('background','yellow');

1.5wrap() wrapAll()

<span>1</span>
<span>2</span>
<span>3</span>

$('span').wrap('<div>');

wrapAll()需要注意的是

<span>1</span>
<span>2</span>
<p>para</p>
<span>3</span>

$('span,p').wrapAll('<div>');

1.6子节点获取
children()：只能获得一级子元素的节点；
find()：可以获得所有子（孙。。。）级元素的节点，通过选择器来获取；