初识jQuery之jQuery-Dom操作和数据操作（四）

最新推荐文章于 2020-06-17 20:39:27 发布

Welkin_qing

最新推荐文章于 2020-06-17 20:39:27 发布

阅读量233

点赞数

分类专栏： jquery 文章标签： jquery dom操作数据操作

本文链接：https://blog.csdn.net/Welkin_qing/article/details/81217935

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、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>

结果：

二、Dom操作和数据操作

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

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

结果：

注意：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>

Welkin_qing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识jQuery之jQuery-Dom操作和数据操作（四）

一、Dom操作1.parents() ：获取当前元素的所有祖先节点，参数就是筛选功能；2.closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素&amp;amp;lt;script&amp;amp;gt;$(function(){ $('#div2').parents('.box').css('background','red'); ...
复制链接

扫一扫