一、jQuery - 添加元素

1.append() - 在被选元素内部的结尾插入指定内容

2.prepend() - 在被选元素内部的开头插入指定内容

3.after() - 在被选元素之后插入内容

4.before() - 在被选元素之前插入内容

添加单个元素

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<body>

<p>111</p>

</body>

</html>

<script type="text/javascript">

$(document).ready(function(e) {

 $("p").append("222");

 $("p").prepend("333");

  $("p").after("444");

   $("p").before("555");

});

</script>

添加若干元素----重点                

<body>

<button onclick="tianjia()">追加文本</button>

</body>

</html>

<script type="text/javascript">

function tianjia()

{

    var txt1="<p>文本1</p>";              // 使用 HTML 标签创建文本

    var txt2=$("<p></p>").text("文本2");  // 使用 jQuery 创建文本

    var txt3=document.createElement("p");

    txt3.innerHTML="文本3";               // 使用 DOM 创建文本 text with DOM

    $("body").append(txt1,txt2,txt3);        // 追加新元素

}

</script>

二、jQuery - 删除元素

1.remove() - 删除被选元素（及其子元素）

2.empty() - 从被选元素中删除子元素

<div id="div1">

111111

<p>2222222</p>

<p class="pp">3333333333</p>

<p class="pp">444444444</p>

</div>

<br>

<button>移除div元素</button>

</body>

</html>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").remove();         //删除div及其里边的p所有内容

     $("#div1").empty();         //删除div里面的p标签里面的内容

      $("p").remove(".pp");      //删除所有class为pp的p标签

  });

});

</script>

 eq()方法：

1.eq() 方法返回带有被选元素的指定索引号的元素。

2.索引号从 0 开头，所以第一个元素的索引号是 0

<p>11111111</p>

<p>11111111</p>

<p>11111111</p>

<p>11111111</p>

</body>

</html>

<script>

$(document).ready(function(e) {

    $("p").eq(1).css("background","red");  //取第二个p标签

});

</script>

JQUERY添加、删除元素、eq()方法；的更多相关文章

  1. jQuery添加删除元素

    $(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

  2. 分别使用原生js和jQuery添加/删除元素的class属性

    一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...

  3. jQuery添加/删除元素

    jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容(仍然该元素的内部). 追加前:<p>这是一个文本段落</p> $(" ...

  4. （转载）php数组添加、删除元素的方法

    (转载)http://www.phpgs.com/html/php/phpjichu/20120130440.html 带来一篇php 数组 添加元素.删除元素的方法的文章,有需要的php学习者参考下 ...

  5. Jquery中删除元素方法

    empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...

  6. 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  7. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

  8. PHP从数组中删除元素的方法

    PHP从数组中删除元素的方法 本篇文章主要介绍了PHP从数组中删除元素的四种方法实例 删除一个元素,且保持原有索引不变 使用 unset 函数,示例如下: 1 2 3 4 5 <?php   $ ...

  9. Python简单遍历字典及删除元素的方法

    Python简单遍历字典及删除元素的方法 这篇文章主要介绍了Python简单遍历字典及删除元素的方法,结合实例形式分析了Python遍历字典删除元素的操作方法与相关注意事项,需要的朋友可以参考下 具体 ...

  10. 34-python基础-python3-列表删除元素-remove()方法-del语句-pop()方法

    1-remove()方法 根据值删除元素.  remove()方法传入一个列表中的值,它将从被调用的列表中删除. 如果该值在列表中出现多次,只有第一次出现的值会被删除. 如果要删除的值可能在列表中出现 ...

随机推荐

  1. [php] php图表显示

    使用jpgragh绘制php图表, 下载地址http://jpgraph.net/download/ 1> 服务器环境centos6.5, php5.0. 2> linux环境下需要配置j ...

  2. java程序调用存储过程

    java程序调用存储过程       PL/SQL子程序,很多情况下是给应用程序来调用的,所有我们要掌握使用其他编程语言来调用我们写好的存储过程.下面我们介绍下使用java调用Oracle的存储过程. ...

  3. c读写文件

    #include<stdio.h> void main(void) { // locate ]; scanf("%s", filename); getchar(); / ...

  4. Evolutionary Computing: 2. Genetic Algorithm(1)

    本篇博文讲述基因算法(Genetic Algorithm),基因算法是最著名的进化算法. 内容依然来自博主的听课记录和教授的PPT. Outline 简单基因算法 个体表达 变异 重组 选择重组还是变 ...

  5. WPF CAL 计算器

    界面最终结果: 下载地址:https://skydrive.live.com/redir?resid=25C3908AA2038BDB!148&authkey=!ADR71XdB04LipYE

  6. Rotate Image [LeetCode]

    You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...

  7. 关于ecshop的那些故事

    1.php下foreach()错误提示Warning: Invalid argument supplied for foreach() 错误提示:Warning: Invalid argument s ...

  8. java 代理的三种实现方式

    Java 代理模式有如下几种实现方式: 1.静态代理. 2.JDK动态代理. 3.CGLIB动态代理. 示例,有一个打招呼的接口.分别有两个实现,说hello,和握手.代码如下. 接口: public ...

  9. 访问class中的保护对象的方法

    #include <windows.h>#include <iostream> using namespace std; DWORD WINAPI ThreadProc(LPV ...

  10. Invalid byte 3 of 3-byte UTF-8 sequence

    用maven编译,tomcat启动时报错:IOException parsing XML document from class path resource [applicationContext.x ...