一、Dom操作
1.parents() ：獲取當(dāng)前元素的所有祖先節(jié)點，參數(shù)就是篩選功能；
2.closest() : 獲取最近的指定的祖先節(jié)點(包括當(dāng)前元素自身),必須要寫篩選的參數(shù),只能找到一個元素
<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() : 找所有的兄弟節(jié)點，參數(shù)是篩選功能
nextAll() : 下面所有的兄弟節(jié)點，參數(shù)是篩選功能
prevAll() : 上面所有的兄弟節(jié)點，參數(shù)是篩選功能
4.Until()、parentsUntil()和nextUntil(),prevUntil
Until() : 截止，參數(shù)指定截止位置，不包括自身
<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>
結(jié)果：
image.png
二、Dom操作和數(shù)據(jù)操作
1.clone() : 可以接收一個參數(shù) ，作用可以復(fù)制之前的操作行為
$(function(){
$('div').click(function(){
alert(123);
});
$('div').clone(true).appendTo( $('span') );
//點擊新生成的div會有123彈出
});
<body>
<div>div</div>
<span>span</span>
</body>
結(jié)果：
image.png
注意：clone(true)使克隆版也具有原版的操作
2.wrap() : 包裝
wrapAll() : 整體包裝
wrapInner() : 內(nèi)部包裝
unwrap() : 刪除包裝 ( 刪除父級 : 不包括body )
wrapInner()性質(zhì)：
<body>
$(function(){
$('span').wrapInner('<div>');
});
<span>span</span>
<div>
<span>span</span>
</div>
<span>span</span>
</body>
結(jié)果：
wrapInner
unwrap()性質(zhì)：
$(function(){
$('span').unwrap();
});
結(jié)果：
unwrap
3.add()：對節(jié)點添加組合的一種方法
<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()：截取數(shù)組的范圍
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
$('li').slice(1,4).css('background','red');
//使1到3的li都變紅
注意：第二個參數(shù)表示截止前
serialize()和serializeArray()：對數(shù)據(jù)進(jìn)行數(shù)據(jù)化串聯(lián)，解析操作
<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>
