By welkin

Updated:

Contents

#一、Dom操作

##1.parents() ：获取当前元素的所有祖先节点，参数就是筛选功能；

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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() : 截止，参数指定截止位置，不包括自身

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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() : 可以接收一个参数 ，作用可以复制之前的操作行为

1
2
3
4
5
6
7
8
9
10
11
12
13
$(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()性质：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
$(function(){
	
	$('span').wrapInner('<div>');
	
	
});
<span>span</span>
<div>
	<span>span</span>
</div>
<span>span</span>

</body>

####结果：
wrapInner

####unwrap()性质：

1
2
3
4
5
$(function(){
	
	$('span').unwrap();
	
});

结果：
unwrap

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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()：截取数组的范围

1
2
3
4
5
6
7
8
9
10
11
<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()：对数据进行数据化串联，解析操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>

Contents