一、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>
网友评论