一、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. BZOJ 3229: [Sdoi2008]石子合并

    3229: [Sdoi2008]石子合并 时间限制: 3 Sec  内存限制: 128 MB提交: 497  解决: 240[提交][][] 题目描述 在一个操场上摆放着一排N堆石子.现要将石子有次序 ...

  2. 1074, "Column length too big for column 'err_solution' (max = 21845); use BLOB or TEXT instead"

    一个注意点,就是sqlalchemy 使用create_all()建表的时候,要在 create_all()所在页面import那些表的model sqlalchemy.exc.Operational ...

  3. thinkphp分页搜索条件带中文参数

    /** * 中文处理 * @param type $str * @return str * $author lxh */ function url2word($str){ $sub=strpos($s ...

  4. 学习PYTHON之路， DAY 1 - PYTHON 基础 1

    一 PYTHON 安装 1. Python下载 (1) www.python.org官网 (2) 选择可执行文件( 64位3.5.2Windows x86-64 executable installe ...

  5. Java Script

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

  6. 如何做出header，footer固定定位后让main主体部分可以滑动，在微信浏览器中滑动到最后不出现黑边的情况

    <!doctype html>   <html>   <head>   <meta charset="utf-8">   </ ...

  7. spring boot注解 --@EnableAsync 异步调用

    EnableAsync注解的意思是可以异步执行,就是开启多线程的意思.可以标注在方法.类上. @Component public class Task { @Async public void doT ...

  8. apache下自定义404错误页面

    404页面的目的是:告诉浏览者其所请求的页面不存在或链接错误,同时引导用户使用网站其他页面而不是关闭窗口离开. 很多开源系统包括CMS系统.Blog系统等不提供404页面或提供的404页面并未达到SE ...

  9. SQL Server 2008中查看锁信息

    ;with tran_locks as(select resource_type,db_name(resource_database_id) as db_name,resource_descripti ...

  10. bzoj 3171: [Tjoi2013]循环格

    #include<cstdio> #include<iostream> #include<cstring> #define M 10000 #define inf ...