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()：可以获得所有子（孙。。。）级元素的节点，通过选择器来获取；

jquery(2）.节点篇

推荐阅读更多精彩内容