jQuery对于demo元素的上移、下移、删除操作等实现

最新推荐文章于 2022-07-23 13:33:31 发布

我爱丁丁猫

最新推荐文章于 2022-07-23 13:33:31 发布

阅读量359

点赞数

分类专栏：前端文章标签：新手上路 jquery dom操作

原文链接：https://www.mk2048.com/blog/blog.php?id=hhbac1c2a21j&title=jQuery%E5%AF%B9%E4%BA%8Edemo%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%8A%E7%A7%BB%E3%80%81%E4%B8%8B%E7%A7%BB%E3%80%81%E5%88%A0%E9%99%A4%E6%93%8D%E4%BD%9C%E7%AD%89%E5%AE%9E%E7%8E%B0

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

今天给大家分享一个实用的jQuery技能：dom元素的操作；我们经常会去获取dom元素去实现交互效果，以及数据的操作。

首先复习一下jQuery DOM 元素方法：

.get() 获得由选择器指定的Dom元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
	<style>
		.container{
			background:#ccc;
			font-size:12px;
			margin:20 auto;
			width:600px;
			height:400px;
		}
	</style>
</head>
<body>
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>
	<button>点我</button>
	<div class="container"></div>
	<script type="text/javascript">
		$(document).ready(function(){
		  $("button").click(function(){
		    x=$("p").get(0);
		    $("div").text(x.nodeName   ": "   x.innerHTML);
		  });
		});
	</script>		
</body>
</html>

　　.index() 返回指定元素相对于其他指定元素的index位置

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
.container{
  width:600px;
  height:800px;
  background:#f5f5f5;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
  $("li").click(function(){
    $('div.container').html("点击li的index值是：" $(this).index());
  });
});
</script>
</head>
<body>
<p>点击列表项可获得其相对于同胞元素的 index 位置：</p>
<ul>
   <li>Coffee</li>
   <li>Milk</li>
   <li>Soda</li>
</ul>
<div class="container"></div>
</body>
</html>

.size() 返回被jQuery选择器匹配的元素的数量

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("h3").html("li元素的数目是：" $("li").size());
  });
});
</script>
</head>
<body>
<button>输出 li 元素的数目</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
<h3>li元素的数目是：</h3>
</body>
</html>

.toArray() 以数组的形式返回jQuery选择器匹配的元素。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("li").toArray()
      for (i=0;i<x.length;i  )
      {
      $('p').append("</br>第"  i  "个列表的值是：" x[i].innerHTML "</br>");
      }
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
<p>这里显示点击后的每一个列表的值</p>
</body>
</html>