jQuery学习-节点操作

最新推荐文章于 2024-07-05 14:21:58 发布

加油吧qaq

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量81

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_43368682/article/details/107995098

版权

动态创建元素

方式一

<div id="box"></div>
var spanNode1=$("<span>创建元素</span>")
$("#box").append(spanNode1)
//也可以 spanNode1.appendTo('#box')

方式二

<div id="box"></div>
var node=$("#box").html("<li>内容</li>")

加入元素

<div id="box"></div>

append------>$("#box").append(spanNode1)
appendTo---------> spanNode1.appendTo('#box')
$("#box").html("<li>内容</li>")
prepend------->$("#box").prepend('<span>添加在前面的元素</span>')//在元素的第一个子元素前面追加内容或节点
after--------->$("#box").after('<span>作为兄弟元素</span>')//在元素的后面作为兄弟元素加入
before--------->$("#box").before('<span>作为兄弟元素</span>')//在元素的前面作为兄弟元素加入

清空元素

方式一：清空所有子元素

$("#box").empty();
$("#box").html("");

方式二：把自己以及内部元素删除

$("#box").remove();

复制元素

var d1=$("#box").clone();

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.main{
				width: 900px;
				height: 900px;
				margin: 0 auto;
				display: flex;
			}
			.left,.right,.center{
				width: 300px;
				height: 900px;
				box-sizing: border-box;
				border: 1px solid #ccc;
			} 
			.center{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items:center;
			}
			.center button{
				margin: 30px;
			}
			select{
				width: 200px;
				height: 600px;
			}
		</style>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="main">
			<div class="left">
				<h3>请选择你的爱好</h3>
				<select name="hobby" multiple="multiple">
					<option value="">弹琴</option>
					<option value="">打鼓</option>
					<option value="">唱歌</option>
					<option value="">吉他</option>
					<option value="">打游戏</option>
				</select>
			</div>
			<div class="center">
				<button type="button" class="addAll">>></button>
				<button type="button" class="removeAll"><<</button>
				<button type="button" class="add">></button>
				<button type="button" class="remove"><</button>
			</div>
			<div class="right">
				<h3>已选择</h3>
				<select name="hobby" multiple="multiple">
					
				</select>
			</div>
		</div>
		<script type="text/javascript">
			$(".addAll").click(function(){
				$(".left select option").appendTo('.right select')
			})
			$(".removeAll").click(function(){
				$(".right select option").appendTo('.left select')
			})
			
			$(".add").click(function(){
				$(".left select option:checked").appendTo('.right select')
			})
			$(".remove").click(function(){
				$(".right select option:checked").appendTo('.left select')
			})
		</script>
	</body>
</html>