<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

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

</head>

<body>

//Jquery的dom操作

append()  在容器插入标签(插入到最后)

   appendTo() 把标签插入到容器(插入到最后)

   prepend() 在容器插入标签(插入到最前)

   prependTo()  把标签插入到容器(插入到最前)

   after()       在某个标签后插入标签

   inserAfter()  把某个标签插入到标签后

   before()      在某个标签前插入标签

   insertBefore() 把某个标签插入到标签前

   empty()        清空内部子节点

   remove()       移除节点自身，不保存事件和属性

   detach()       移除节点自身,保存事件和属性

   clone()        克隆节点  （true）克隆事件

   replaceWith() *  将标签替换为其他标签

   replaceAll() *    用标签替换标签

   wrap() *          用标签包裹标签

   unwrap() *        去除容器

   wrapall() *       用标签包裹标签

   wrapinner() *

　

　//html

<ul class="list">

      <li>li1</li>

      <li>li2</li>

      <li>li3</li>

   </ul>

   <div id="box">hhhhhh</div>

   <div id="box1">aaaaaa</div>

 

   <div class="box2"><span>inner</span></div>

   <div class="a1">a1</div>

   <div class="a2">a2</div>

<script type="text/javascript">

//举例

var    $oDiv4 = $("<li>li4</li>");      //创建子元素节点

$(".list").append($oDiv4);        //为类名为.list的父元素添加子元素

  var $oDiv5 = $("<li>li5</li>");

$oDiv5.appendTo($(".list"));         //标签添加到类名为list后面，默认在最后面

var $oDiv6 = $("<li>li6</li>");  

$(".list").prepend($oDiv6);       //添加到最前面，即父元素下的第一个标签

var $oDiv7 = $("<li>li7</li>")   

$oDiv5.after($oDiv7);                //在li5后面加个li7

$("#box").empty();             //清空内部子节点

$("#box1").remove();           //id为box1的标签从网页中移除

var $box2 =  $(".box2").clone(true);  //克隆，

  $oDiv7.append($box2);             //然后添加到li7后面

  $(".box2").replaceWith("替换原来内容");   //替换原来内容，其实用html()方法也可以实现

</script>

</body>

</html>

Jquery所有Dom操作汇总的更多相关文章

  1. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  2. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  3. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  4. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  5. jQuery – 3.JQuery的Dom操作

    3.1 JQuery的Dom操作     1.使用html()方法读取或者设置元素的innerHTML    2.使用text()方法读取或者设置元素的innerText     3.使用attr() ...

  6. js，jQuery和DOM操作的总结（二）

    jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...

  7. 03-老马jQuery教程-DOM操作

    jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...

  8. HTML 学习笔记 JQuery（DOM 操作）

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  9. 解密jQuery内核 DOM操作的核心函数domManip

    domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...

随机推荐

  1. window照片查看器无法查看照片的问题

    查看其他照片都可以,只有特殊的两张无法查看.百度|| 修改了环境变量中的tmp变量,路径改为e:\tmp(注:要选择磁盘空间足够的磁盘). 刷新过后,重新打开同一张图片,如下: 用系统自带画图软件尝试 ...

  2. ipfs camp course c demo exercise 1

    目录 aim: my bugs 解决ipfs 的 cros 问题的方法 result final code for c1 aim: 首先咱们把 broswer 和 自己的api 连接起来(要显示出来自 ...

  3. C++11常用特性介绍——列表初始化

    一.列表初始化 1)C++11以前,定义初始化的几种不同形式,如下: int data = 0;   //赋值初始化 int data = {0};   //花括号初始化 int data(0); / ...

  4. C/C++网络编程3——地址族与数据序列

    C/C++网络编程2中介绍了套接字,这一节介绍给套接字分配ip和端口号.ip用于标识一台主机,端口号用于标识一个主机中的一个应用程序,端口号占16位,0到65535,其中0到1023是知名端口号. 表 ...

  5. 在abp core中出现运行项目时EF获取到的appsetting.json或者appsettings.Production.json中的连接字符串为空

    原因:有可能是生成的bin或者debug文件夹下没有将appsetting.json或者appsettings.Production.json文件生成过去 解决方法:手动拷贝过去,或者设置成自动生成过 ...

  6. python学习笔记(3) -- 字符与数字之间的转换函数

    转载:python中的字符数字之间的转换函数 int(x [,base ])         将x转换为一个整数     long(x [,base ])        将x转换为一个长整数     ...

  7. kafka 副本同步细节

    图片来源:咕泡学院

  8. ApacheDbUtilsUpdate

    ApacheDbUtilsUpdate package p1; import com.DataSourceUtil; import org.apache.commons.dbutils.QueryRu ...

  9. Java后端 带File文件及其它参数的Post请求

    http://www.roak.com Java 带File文件及其它参数的Post请求 对于文件上传,客户端通常就是页面,在前端web页面里实现上传文件不是什么难事,写个form,加上enctype ...

  10. Django manager 命令笔记

    1. 新建app startapp your_app_name 2. 删除app migrate your_app_name zero 此外还需要删除整个App文件夹,并在settings.py的In ...