jQuery之删除和遍历元素

幼稚园「先生」

于 2023-06-09 17:46:52 发布

阅读量193

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_63040021/article/details/131132351

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

删除元素
remove()
删除元素及其对应的子元素，标签和内容一起删除
指定元素.remove();
empty()
清空元素内容，保留标签
指定元素.empty();

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>删除元素</title>
      <style type="text/css">
         span{
            color: white;
            padding: 8px;
            margin: 5px;
            float: left;
         }
         .green{
            background-color: green;
         }
         .blue{
            background-color: blue;
         }
      </style>
   </head>
   <body>
      <h3>删除元素</h3>
      <span class="green">jquery<a>删除</a></span>
      <span class="blue">javascript</span>
      <span class="green">高数</span>
      <span class="blue">C++</span>
   </body>
   <!--
      删除元素
         remove()
            删除元素及其对应的子元素，标签和内容一起删除
            指定元素.remove();
         empty()
            清空元素内容，保留标签
            指定元素.empty();
    -->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      // 删除元素
      $(".green").remove();
      // 清空元素
      $(".blue").empty();

    </script>

</html>

遍历元素

each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>遍历元素</title>
		<style type="text/css">
			span{
				color: white;
				padding: 8px;
				margin: 5px;
				float: left;
			}
			.gn{
				background-color: green;
			}
			.bl{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<h3>遍历元素 each()</h3>
		<span class="gn">jquery<a>删除</a></span>
		<span class="gn">javascript</span>
		<span class="gn">高数</span>
		<span class="gn">C++</span>
	</body>
	 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	 <script type="text/javascript">
	 	// 获取指定元素 并遍历
		$(".gn").each(function(index,element){
			console.log(index);
			console.log(element);
			console.log(this);
			console.log($(this));// 转为jQ 对象
		});


	 </script>
</html>

幼稚园「先生」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之删除和遍历元素

$(selector).each(function(index,element)) :遍历元素。 index 为遍历元素的序列号，从 0 开始。 element是当前的元素，此时是dom元素。参数 function 为遍历时的回调函数，// 获取指定元素并遍历。// 转为jQ 对象。
复制链接

扫一扫