JQuary元素操作

最新推荐文章于 2024-10-02 05:39:15 发布

QiuBO.

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量144

点赞数

文章标签： jquery javascript ecmascript

本文链接：https://blog.csdn.net/m0_70648941/article/details/127425947

版权

元素的操作主要有遍历，创建，添加，删除操作

一，遍历元素

JQuary隐式迭代是对同一类元素做了同样的操作。如果要给同一类元素做不同的操作，需要遍历。

语法1：

$("div").each(function(index,domEle){xxx; })

1,each()方法遍历匹配的每一个元素，主要用DOM处理。each每一个

2，重要的回调函数有两个参数，index是每个元素的索引号，domEle是每个DOM元素对象，不是JQuery对象

3，所有要想使用JQuery方法，需要给这个DOM元素转换为JQuery对象 $(domEle)

注意：此方法用于遍历JQuery对象中的每一项，回调函数中元素为DOM对象，想要使用JQuery方法需要转换。

语法2：

$.each(object,function(index,element) {xxx; })

1,$.each()方法可用与遍历任何对象，主要用于数据处理，比如数组，对象

2，里面的函数有两个参数，index是每个元素的索引号，element遍历内容

注意：此方法用于遍历JQuery对象中的每一项，回调函数中元素为DOM对象，想要使用JQuery方法需要转换。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					var jq=$("#d1>ul>li");
					for(var i=0;i<jq.length;i++){
						var dom=jq[i];
						alert(dom.innerText);
					}
				});
			});
		</script>
	</head>
	<body>
		<h2>元素的遍历</h2>
		<div id="d1">
			<ul>
				<li>苹果</li>
				<li>香蕉</li>
				<li>葡萄</li>
				<li>橘子</li>
				<li>菠萝</li>
				
			</ul>
		</div>
		<button id="btn">遍历元素</button>
	</body>
</html>

二，创建元素

语法：$("<li>添加的内容</li>")

三，添加元素

1，内部添加

element.append("内容")	把内容放入匹配元素内部最后面，类似原生appendChild
element.prepend("内容")	把内容放入匹配元素内部最前面

2，外部添加

element.after("内容")	把内容放入目标元素后面
element.before("内容")	把内容放入目标元素前面

注意：内部添加元素，生成之后，他们是父子关系，外部添加元素，生成之后，他们是兄弟关系。

四，删除元素

element.remove()	删除匹配的元素（本身）
element.empty()	删除匹配的元素集合中所有的子节点
element.html("")	清空匹配的元素内容