jquery讲解（2）节点操作

一、操作元素

1.创建元素

语法：$(“标签”)

示例如下

<script>
			$("<div>创建div标签</div>")
		</script>

2.添加元素

方法名	描述
append()	向元素内部末尾添加内容
prepend()	向元素内部开头添加内容
after)	在指定元素之后添加内容
before()	在指定元素之前添加内容

代码示例如下

<div></div>
		<script>
			$("div").append("<span>在元素内部末尾添加</span>")
			$("div").before("<div>在元素前面添加</div>")
		</script>

运行结果如下

方法名	描述
appendTo0	将内容添加到元素内部未尾
prependTo0	将内容添加到元素内部开头
insertAfter0	将内容添加到指定元素之后
insertBefore0	将内容添加到指定元素之前

代码示例如下

<div></div>
		<script>
			$("<span>将内容添加到元素内部未尾</span>").appendTo($("div"));
			$("<div>将内容添加到指定元素之前</div>").insertBefore($('div'));
		</script>

运行结果如下

3.删除元素

方法名	描述
remove()	删除被选择元素及其子元素
empty()	删除被选元素的所有子元素

示例代码如下：

<div>
		<ul>
			<li>数据1</li>
			<li>数据1</li>
		</ul>
	</div>
		<script>
			$("div ul").remove();   //删除ul及其所有li
			$("div").empty();  //s删除div下的所有元素
		</script>

运行结果如下

4.节点选择器

方法名	描述
parent()	直接父元素
parents()	所有祖先元素
chidren()	所有直接子元
find()	所有指定后代元素

代码示例如下

<div>
		<ul>
			<li>数据1</li>
			<li>数据1</li>
		</ul>
	</div>
		<script>
			$("li").parent();   //返回ul标签
			$("div").find('li');  //返回所有li元素
		</script>

代码示例如下

方法名	描述
siblings()	所有兄弟元素
next()	下一个兄弟元素
nextAll()	之后的所有兄弟元素
nextUntil()	给定范围内的兄弟元素
prev()	上一个兄弟元素
prevAll()	之前的所有兄弟元素
prevUntil()	给定范围内的兄弟元素

<div>
		<ul>
			<li class="ELe1">数据1</li>
			<li class="ELe2">数据2</li>
			<li class="ELe3">数据3</li>
			<li class="ELe4">数据4</li>
			<li class="ELe5">数据5</li>
			<li class="ELe6">数据6</li>
		</ul>
	</div>
		<script>
			$(".ELe1").siblings(); //返回所有兄弟元素
			$(".ELe5").next(); //返回<li class="ELe6">数据6</li>
			$(".Ele1").nextUntil(".Ele3"); //返回<li class="ELe2">数据2</li>
		</script>

总结

注意：empty()方法的使用