今天给大家分享一个实用的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. LeetCode Array Easy 485. Max Consecutive Ones

    Description Given a binary array, find the maximum number of consecutive 1s in this array. Example 1 ...

  2. AI-IBM-cognitive class --Liner Regression

    Liner Regression import matplotlib.pyplot as plt import pandas as pd import pylab as pl import numpy ...

  3. 三、MVC_JsonResult类型

    一.Ajax或者页面请求获取数据,不通过WebApi的时候,使用JsonResult作为返回Json数据格式的类型 二.代码呈现 public class HomeController : Contr ...

  4. find命令使用详解

    一.主要内容 ====================================== 1. 用文件名查找文件 2.用文件名查找文件,忽略大小写 3. 使用mindepth和maxdepth限定搜 ...

  5. find命令进阶用法(一)

    -cmin n: 查找 exactly n 分钟前内容或属性被最后修过的文件 -cnewer file: 查找内容或属性的最后修改时间晚于file文件的文件 -ctime n: 查找 **n*24** ...

  6. C/C++ C++ 11 兰姆达

    { auto layer = Layer::create();    auto event = cocos2d::EventListenerTouchOneByOne::create();    ev ...

  7. Codeforces 803E--Roma and Poker (DP)

    原题链接:http://codeforces.com/problemset/problem/803/E 题意:给一个n长度的字符串,其中'?'可以替换成'D'.'W'.'L'中的任意一种,'D'等价于 ...

  8. HDU 6638 - Snowy Smile 线段树区间合并+暴力枚举

    HDU 6638 - Snowy Smile 题意 给你\(n\)个点的坐标\((x,\ y)\)和对应的权值\(w\),让你找到一个矩形,使这个矩阵里面点的权值总和最大. 思路 先离散化纵坐标\(y ...

  9. delphi WaitForSingleObject 示例之一等待另一个进程的结束

    <pre>unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Cont ...

  10. BZOJ 3687: 简单题(dp+bitset)

    传送门 解题思路 设\(f(i)\)表示和为\(i\)时的方案数,那么转移方程为\(f(i)+=f(i-x)\),\(x\)为当前枚举到的数字,这样做是\(O(n\sum a_i)\)的,考虑优化.发 ...