学习jquery增删改查业务逻辑

最新推荐文章于 2024-01-16 19:33:43 发布

原创最新推荐文章于 2024-01-16 19:33:43 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

程序员同时被 2 个专栏收录

13 篇文章

订阅专栏

jquery

6 篇文章

订阅专栏

本文深入探讨了使用jQuery简化DOM操作的方法，包括查询、删除、修改和增加元素的技巧。详细介绍了next()、prev()、parents()、closest()等API的使用场景，以及append()、appendTo()、remove()、detach()、wrap()、wrapAll()等功能，帮助开发者更高效地进行网页动态更新。

一，学习及了解

对比web项目最基本的操作就是对于dom的增删改查了，同时jquery在这方面优化做的非常的好，出了一套的api，对比原生操作dom增删改查简化了很多的代码。

二，查询/删除/修改/增加

next();
prev();
这两个是查找相邻的兄弟元素

     $('div').next();
     $('div').prev();

 $('div').next('p').css({background : 'red'});

括号里面可以传参数，可以找到指定元素进行修改

parents() 查找所有的祖先元素
closest() 从自己开始查找，查询离自己最近的元素
写法同上面一样，并且closest()必须传参数才能去查找指定的元素

追加
append()
appendTo()
这两个都是将元素追加到指定的元素

<div class="wapper">
		<div class="a1"></div>
		<div class="a2"></div>
	</div>
	<div class="zui"></div>
	<script type="text/javascript" src="jquery-1.11.3.js"></script>
	<script type="text/javascript">
	 $('.zui').appendTo('.wapper');
	 $('.wapper').append($('.zui'));
	 </script>

删除
remeve()
detach()
这两个都是删除指定元素，区别在于detach在删除后，触发的事件还在

     $('.zui').click(function(){
	 	$('.zui').remove().appendTo('.wapper')
	 })
	 $('.zui').click(function(){
	 	$('.zui').detach().appendTo('.wapper')
	 	console.log('点击了一次');
	 })

添加
wrap()
wrapAll()
都是通过直接添加元素，写法同上