初识jQuery之jQuery-Dom操作和数据操作(四)

一、Dom操作

1.parents() :获取当前元素的所有祖先节点,参数就是筛选功能;

2.closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素

<script>

$(function(){

    $('#div2').parents('.box').css('background','red');
    //body会变红
    $('#div2').closest('.box').css('background','red');
    //只有div2变红
});
</script>
<body class="box">
<div id="div1">aaa
    <div id="div2" class="box">bbb</div>
</div>
</body>

3.siblings()、nextAll()和prevAll()

siblings() : 找所有的兄弟节点,参数是筛选功能

nextAll() : 下面所有的兄弟节点,参数是筛选功能

prevAll() : 上面所有的兄弟节点,参数是筛选功能

4.Until()、parentsUntil()和nextUntil(),prevUntil

Until() : 截止,参数指定截止位置,不包括自身

<script>

$(function(){

    $('span').nextUntil('h2').css('background','red');

});

</script>
<body>
<div>div</div>
<span>span</span>
<p>p</p>
<h1>h1</h1>
<h2>h2</h2>
<em>em</em>
</body>

结果:
image.png

二、Dom操作和数据操作

1.clone() : 可以接收一个参数 ,作用可以复制之前的操作行为

$(function(){

    $('div').click(function(){
        alert(123);
    });

    $('div').clone(true).appendTo( $('span') );
    //点击新生成的div会有123弹出
});
<body>
<div>div</div>
<span>span</span>
</body>

结果:
image.png

注意:clone(true)使克隆版也具有原版的操作

2.wrap() : 包装

wrapAll() : 整体包装

wrapInner() : 内部包装

unwrap() : 删除包装 ( 删除父级 : 不包括body )

wrapInner()性质:

<body>
$(function(){

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


});
<span>span</span>
<div>
    <span>span</span>
</div>
<span>span</span>

</body>

结果:

wrapInner

unwrap()性质:

$(function(){

    $('span').unwrap();

});

结果:
unwrap

3.add():对节点添加组合的一种方法

<script>



$(function(){

    var elem = $('div');

    var elem2 = elem.add('span');

    elem.css('color','red');
    elem2.css('background','yellow');
    //div和span背景都变黄
});

</script>
<body>
<div>div</div>
<span>span</span>
</body>

4.slice():截取数组的范围

<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
$('li').slice(1,4).css('background','red');
//使1到3的li都变红

注意:第二个参数表示截止前

serialize()和serializeArray():对数据进行数据化串联,解析操作

<script>
$(function(){

    console.log($('form').serialize());  //string : a=1&b=2&c=3

    console.log( $('form').serializeArray() );
    /*输出
    [
        { name : 'a' , value : '1' },
        { name : 'b' , value : '2' },
        { name : 'c' , value : '3' }
    ]
    *
});
<body>
<form>
    <input type="text" name="a" value="1">
    <input type="text" name="b" value="2">
    <input type="text" name="c" value="3">
</form>
</body>

猜你喜欢

转载自blog.csdn.net/welkin_qing/article/details/81217935