jQuery的元素（DOM）操作

最新推荐文章于 2024-05-16 04:04:41 发布

往事随风

最新推荐文章于 2024-05-16 04:04:41 发布

阅读量167

点赞数

文章标签： jquery html es6 javascript

本文链接：https://blog.csdn.net/qq_44732010/article/details/105035326

版权

jQuery的DOM操作

假设页面上有一些元素如下：

<body>
		<div id="box">
			<p>1</p>
			<p>2</p>
			<p>3</p>
		</div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</body>

引入外部的jQuery资源：

	<script src="../jquery.js"></script>

1.创建元素：
在这里插入图片描述
2.插入元素：

// append：要插入指定父元素的最后一个子元素
		// $("#box")被div插入了
		$("#box").append(div);
		
		// 把div插入到$("#box")中，这里的效果与上面的效果一样
		div.appendTo($("#box"));
		
		// prepend:插入指定父元素的第一个子元素
		$("#box").prepend(div);
		div.prependTo($("#box"));
		
		// before:给指定元素，在上面添加一个兄弟
		$("#box").before(div);
		
		// after：给指定元素，在下面添加一个兄弟
		$("#box").after(div);

3.元素的删除：

			// 删除指定元素
			$(".box").remove();
			
			// 删除所有子元素
			$("#box").empty();

4.元素的修改（替换元素）：

		// 获取标签自身同时删除自己
			var s = $("#box").replaceWith();
			console.log(s);
		// 传字符的参数，会修改标签
		$("#box").replaceWith("<span id='" + $("#box").attr("id") + "'>" + $("#box").html() + "</span>");

5.元素的克隆：

$("#box").click(function(){
				console.log(1);
			})
			
			// 只克隆结构
			var b = $("#box").clone();
			$("body").append(b);
		
			// 除了克隆结构，还会克隆事件
			var b = $("#box").clone(true);
			$("body").append(b);

注意： 上述的每个方法中又有不同的情况，在使用这些方法时，根据需求选择合适的情况

往事随风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的元素（DOM）操作

jQuery的DOM操作假设页面上有一些元素如下：<body> <div id="box"> <p>1</p> <p>2</p> <p>3</p> </div> <div class="box"></div> <div cl...
复制链接

扫一扫