一、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. 关于js touch事件 的引用设置

    一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...

  2. 背景：表A数据误操作，被delete了，恢复。

    SELECT MAX(Scn) FROM Sys.Smon_Scn_Time WHERE Time_Dp < TO_DATE('2015-09-18', 'YYYY/MM/DD') select ...

  3. openstack 流量控制

    G版的流量控制,可以在horizon通过对flavor进行配置来实现 1.有admin权限,点击admin进入管理界面:点击Flavors,选取要控制的flavor:点击more,找到View Ext ...

  4. css+div打造三角形(箭头)

    在很多网站都见过这样的箭头,之前我一直以为是图片,直到今天才知道原来可以用css做.开始看代码没太看懂,后来自己试了几遍才恍然大悟.贴出来分享下.(大神请直接忽略) 先看代码: HTML部分就是一个单 ...

  5. 手机号 和 email 的正则匹配

    手机号   /^1[3|4|5|8] \d{9}$/ email  /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/

  6. laravel 的.env 配置文件

      (相关的环境变量) APP_ENV=localAPP_DEBUG=trueAPP_KEY=base64:cWMz1hM4dp9ihoOtUs6iV+BDZX9KtjYvMALFmyEPQfI= D ...

  7. jq知识总结

    jQuery   jQuery基本选择器: id选择器     $("#div1") class选择器   $(".div1") 元素选择器   $(" ...

  8. AS3绘制扇形算法解析

    网上有很多使用AS3画一个扇形的方法,但是却一个都没有解释这个函数是如何运作来画出扇形的,下面浅谈下我对这个函数的理解. 首先上代码,代码来自http://blog.csdn.net/weiming8 ...

  9. JavaScipt的秘密花园

    对象使用和属性 JavaScript 中所有变量都可以当作对象使用,除了两个例外 null 和undefined. false.toString(); // 'false'[1, 2, 3].toSt ...

  10. 给一个div绝对定位后，如何让它水平居中

    <style> .footer{position:absolute;left:0;right:0} </style> <div classs="footer&q ...