<!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. js一位大侠的笔记--转载

    js基础 js笔记散记,只是为了方便自己以后可以回看用的: 1.所有用 “点” 的都能 “[]” 代替 odiv.style.color odiv['style'].color odiv['style ...

  2. httpclient使用-get-post-传参

    转自:https://www.jianshu.com/p/375be5929bed 一.HttpClient使用详解与实战一:普通的GET和POST请求 简介 HttpClient是Apache Ja ...

  3. html5 postMessage 消息传递问题

    <script type="text/javascript"> $.fn.extend({ addEvent: function (type, handle, bool ...

  4. SpringBoot常用注解解析

    @RestController 将返回的对象数据直接以 JSON 或 XML 形式写入 HTTP 响应(Response)中.绝大部分情况下都是直接以 JSON 形式返回给客户端,很少的情况下才会以 ...

  5. Python - python里有类似Java的接口(interface)吗？

    参考 https://stackoverflow.com/questions/2124190/how-do-i-implement-interfaces-in-python https://stack ...

  6. javascript入门教程02

    JavaScript中的运算符 (1)算术运算符 + :相加 var a=123,b=45; document.write(a+b); - :相减 document.write(a-b); *:相乘 ...

  7. js学习：基本数据类型

    数据类型在 js 里面分为两个大类: 基本数据类型 引用数据类型 基本数据类型: 数值 number 各种意义上的数字:整数.小数.浮点数等 正数:100 负数:-100 浮点数,小数:1.234 进 ...

  8. Spring学习(四）

    Spring Ioc容器 1.具有依赖注入功能的容器.负责实例化,定位,配置应用程序中的对象及建立这些对象间的依赖.在Spring中BeanFactory是Ioc容器的实际代表者.BeanFactor ...

  9. Linux运维工程师简历项目经验

    如何做好一个合格的运工程师,运维工程师前景怎么样呢?就这些问题,与大家交流一下.首先对于运维工程师的要求是十分严苛的了,运维工程师不但要针对不同的问题做出响应,而且需要不断的补充自己的知识面,并不继提 ...

  10. LaTeX 使用笔记

    实现一个归类样式,如图: 代码: \left\{ \begin{aligned} 监督学习 \left\{ \begin{aligned} 回归 \\ 分类 \end{aligned} \right. ...