jQuery中的DOM元素操作

本文链接：https://blog.csdn.net/CtrlCV_Tian/article/details/86922207

DOM元素操作
【注】使用以下代码先引进jQuery文件
1、val()获取或者设置input的值传入内容表示设置，不设置表示获取内容
append()在原有元素的后面进行添加在…元素中添加
appendTo()把元素添加到元素后面格式：要添加的元素.appendTo(添加到的元素)把…添加到某个元素中
prepend()在原有元素前面进行添加
prependTo()把元素添加到元素后面格式：要添加的元素.prependTo(添加到的元素)把…添加到某个元素中
共同点：都是添加元素，以上两个元素之间都是父子关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("button:eq(0)").click(function(){
					$li = $("<li>"+ $("input").val() +"</li>");
					$("#ul1").append($li);//在ul中添加$li
				})
				$("button:eq(1)").click(function(){
					$li = $("<li>"+ $("input").val() +"</li>");
					$li.appendTo($("#ul1"));//把$li添加到ul中
				})
				$("button:eq(2)").click(function(){
					$li = $("<li>"+ $("input").val() +"</li>");
					$("#ul1").prepend($li);
				})
				$("button:eq(3)").click(function(){
					$li = $("<li>"+ $("input").val() +"</li>");
					$li.prependTo($("#ul1"));
				})
			})
		</script>
	</head>
	<body>
		<input type="text">
		<button>append</button>
		<button>appendTo</button>
		<button>prepend</button>
		<button>prependTo</button>
		<ul id="ul1">
			<li>hello</li>
		</ul>
	</body>
</html>

共同点：两个元素是兄弟级关系
after()在元素后面添加元素
insertAfter()把元素添加到元素前面格式：元素节点.insertAfter(添加到的元素)把前面的元素添加到某个元素中
before()在元素后面添加元素
insertBefore()把元素添加到元素前面格式：元素节点.insertAfter(添加到的元素)把前面的元素添加到某个元素中
【注】没有加To的方法在…中添加了…元素加了To的方法把…添加到…里面
没有加insert的方法在…后面添加了…元素加了insert的方法把…添加到…后面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("button").click(function(){
					$btn = $("<button>XXX</button>");
					//在这里获取到的this是JS原生对象，需要将它转成jQuery对象
					// $(this).after($btn);
					// $btn.insertAfter($(this));
					// $(this).before($btn);
					$btn.insertBefore($(this));
				})
			})
		</script>
	</head>
	<body>
		<button type="button">添加</button>
	</body>
</html>

index() 获取当前元素在整个集合中的下标
get() 获取到集合中的某个元素 get获取到的是原生的对象 传入下标

获取兄弟元素的方法：
prev() 格式：元素.prev() 找到当前元素的上一个兄弟元素，返回的是jQuery对象
元素.prev().prev() 找到当前元素的上一个兄弟元素的上一个兄弟元素
prevAll(); 格式：元素.prevAll() 找到当前元素的上面的所有兄弟元素可以传入过滤条件
perAll(“p”) 表示找到当前元素的上面的所有兄弟元素中的p标签
next() 格式：元素.next()找到当前元素的下一个兄弟元素
nextAll(); 格式：元素.nextAll() 找到当前元素的下面的所有兄弟元素可以传入过滤条件
siblings() 格式：找到当前元素的所有的兄弟元素也可传入过滤条件
remove() 删除元素
closest() 格式：元素.closest()；找到与其最近的对应元素
【例】$("#wrap").closest(“p”)’;找到id为wrap的与其最近的一个p元素
find() $("#wrap").find(“p”); 通过jQuery的方法去查找元素找到id为wap下面的所有的p标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul li{
				list-style: none;
			}
			button{margin: 10px;}
		</style>
		<script type="text/javascript">
			$(function(){
				//点击当前的按钮,把按钮所在的li插入到下一个li的后面
				$(".down").click(function(){
					//找到和我当前点击的按钮最近的li标签
					var $nowLi = $(this).closest("li");
					//找到和我当前点击的按钮最近的li标签的下一个li标签
					var $next = $(this).closest("li").next();
					if($next.length === 0){
						alert("下面没有元素了");
					}else{
						//将当前的这个和点击按钮最近的li标签插入到下一个li标签的后面
						$nowLi.insertAfter($next);
					}
				});
				$(".up").click(function(){
					var $nowLi = $(this).closest("li");
					//找到和我当前点击的按钮最近的li标签的上一个li标签
					var $prev = $(this).closest("li").prev();
					if($prev.length === 0){
						alert("上面没有元素了");
					}else{
						$nowLi.insertBefore($prev);
					}
				});
			})
		</script>
	</head>
	<body>
		<ul>
			<li><button class="down">↓</button>新闻标题1<button class="up">↑</button></li>
			<li><button class="down">↓</button>新闻标题2<button class="up">↑</button></li>
			<li><button class="down">↓</button>新闻标题3<button class="up">↑</button></li>
			<li><button class="down">↓</button>新闻标题4<button class="up">↑</button></li>
			<li><button class="down">↓</button>新闻标题5<button class="up">↑</button></li>
			<li><button class="down">↓</button>新闻标题6<button class="up">↑</button></li>
		</ul>
	</body>
</html>