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

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

  1. .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>

    　　

  2. 　　.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>

    　　

  3. .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>
  4. .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>

二、dom操作必须掌握的方法：增加、删除、修改、更新

remove(),append(),before(),after(),

html(),text(),可以访问元素也可以修改元素；

jQuery对于demo元素的上移、下移、删除操作等实现的更多相关文章

  1. jquery的select元素和option的相关操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js~一个列表中包含上移下移删除等功能

    最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图

  3. day35—JavaScript操作元素（创建、删除）

    转行学开发,代码100天——2018-04-20 JavaScript对DOM元素的创建.删除操作. 1.创建DOM元素 appendChild方法 createElement(ochild); op ...

  4. 排序功能实现 jQuery实现排序 上移 下移

    效果 思路, 跟相邻元素,互换sort. 前提是每一个元素都有自己的sort值,不为零. <tr id="{sh:$vo.id}"> <td> <sp ...

  5. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  6. Javascript及Jquery获取元素节点以及添加和删除操作

    用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...

  7. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  8. AngularJS实现数据列表的增加、删除和上移下移等功能实例

      转: http://www.jb51.net/article/91991.htm 这篇文章给大家分享了AngularJS循环实现数据列表的增加.删除和上移下移等基础功能,对大家学习AngularJ ...

  9. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

随机推荐

  1. js字符串相关方法

    <script> // 使用索引位置来访问字符串中的每个字符: var carname = 'Volvo XC60'; var character = carname[7]; consol ...

  2. 141-FMC141-4路 250Msps/16bits ADC, FMC板卡

    FMC141-4路 250Msps/16bits ADC, FMC板卡 一.产品概述: 本板卡基于 FMC 标准板卡,实现 4 路 16-bit/250Msps ADC 功能.遵循 VITA 57 标 ...

  3. ffmpeg音频文件转换之使用stdin/stdout或BytesIO对象输入输出

    最近在搞小程序录音,然后使用百度接口做语音识别. 小程序目前仅支持mp3和aac编码格式.虽然百度接口提供的m4a格式支持能直接识别小程序的录音文件,但由于自己还有其他一系列需求(比如直接读取数据,根 ...

  4. python常用函数 L

    lstrip(str) 删除字符串左边的字符,支持传入参数. 例子: ljust(int) 格式化字符串,左对齐,支持传入填充值. 例子: loads(json) 将json字符串转换为dict. 例 ...

  5. vue 字符串长度控制显示的字数超出显示省略号

    1. html <p class="index__Feature-list-itemlist-title newline"> {{item.name| ellipsis ...

  6. vue-葵花宝典

    router-view 中包含 router-view 这种情况就可以 使用嵌套路由了 变化的视图中包含变化的视图 代码层面 router-view 中 包含router-view 路由childre ...

  7. Echarts和Highcharts学习笔记01——入门了解

      Echarts是国内百度团队开发的(开源),基于Canvas,适合数据量较大的情况: Highcharts是国外的(商用需授权),基于SVG,方便自己定制,但能使用的图表类型有限: Echarts ...

  8. Linux基础优化（二）

    Linux基础优化(二) 一操作系统字符优化 避免出现中文乱码,UTF-8支持中文GBK-Xx支持中文 (一)查看默认编码 [root@centos7 ~]# echo $LANG en_US.UTF ...

  9. php nl2br()函数 语法

    php nl2br()函数 语法 作用:在字符串中的新行(\n)之前插入换行符dd马达 语法:nl2br(string,xhtml) 参数: 参数 描述 string 必须.规定要检查的字符串. xh ...

  10. 记录从现在开始，我的第一篇blog

    最近在读刘未鹏的<暗时间>,深受作者的启发,决定开始书写blog. 书写是为了更好的思考,希望自己能持之以恒的坚持做这件事情. 这本书很推荐给所有同学,不仅关于时间管理,执行力,心理学, ...