上一篇文章是记录了jquery中选择器的作用，这里只要记录下jquery中的DOM操作，还是按照上篇的格式来。

　　下面是测试用的html代码，接下来DOM的操作会在下面的代码下进行。

     <body>

         <p>你最喜欢的水果是?</p>

         <ul>

             <li>苹果</li>

             <li>橘子</li>

             <li>梨子</li>

             <li>banana</li>

         </ul>

     </body>
         <script>

             $(function(){

                 var $newLi1 = $("<li>桃子</li>")//$(html),会根据传入的html创建一个DOM对象并且加工成jQuery对象后返回。;

                 var $newLi2 = $("<li>西瓜</li>");//上面这种方法传入的html格式是需要闭合的，并且标签是需要小写的。可以传入$("<li />")

                 var $newLi3 = $("<li title='猕猴桃'>猕猴桃</li>")//如果在在创建的html中包含属性或者特性也会体现在创建好的元素中

                 var $newLi4 = $("<li data-name='xwt'>葡萄</li>")

                 var $ul = $("ul");

                 $ul.append($newLi1);//append方法是向每个匹配的元素内部追加内容（在结束标签的前面添加内容，添加的内容被元素包围）

                 $newLi2.appendTo($ul);//appendTo是将所以匹配的元素追加到传入元素的内部。和上面的方法大致相同，只是两个元素的位置改变了。

                 $ul.prepend($newLi3);//prepend将匹配的元素头部追加元素。另外同append相同

                 $newLi4.prependTo($ul);//prependTo将匹配的元素追加到传入的元素中。其他同appendTo

                 $ul.after($("<button>测试</button>"));//after是在指定元素的后面（不是内部）添加相关的元素;insertAfter()方法颠倒了2个对象的位置。

                 $("button").before("<button>测试1</button>");//特别注意：以上的每个插入对象的方法(如append,prepend,after,before)参数可以是jquery对象，即$("XXX")，也可以是普通文本。

                 $("<p>123</p>").insertBefore("button:first");//如果文本符合html语法，则创建相应的element，否则以文本插入

                 $("li:first-child").after($("li:nth-child(2)"));//如果是操作已有的节点，这些方法也可以用于元素的移动。也可写成.after("li:nth-child(2)")

                 var $lastLi = $("ul > li:last").remove();//移除最后一个ul中的li节点。如果不传参数则删除全部匹配的元素集合。删除后返回引用remove之前的对象，包含删除的元素。

                 var $lastSecondLi = $("ul > li").detach(":last");//使用方法和remove基本相同。但是detach不会删除元素已经绑定的函数和附加数据

                 $lastSecondLi.appendTo($ul);//添加回去删除的倒数第二个元素

                 $ul.append($lastLi);//将已经删除掉的li元素重新添加回来。如果之前该元素绑定过函数或者附加数据，重新添加回去以后函数绑定失效，丢失附加数据

                 $("ul > li:first").appendTo($ul);//appendTo方法简化上面2部。原理相同，先删除指定元素在添加回去

                 $("button").empty();//empty()并不是删除节点，而是清除元素的所有后代节点

                 var $ul2 = $("ul").clone();//克隆当前的元素对象，但是该对象和克隆的对象是完全不同的2个对象。包括里面封装的DOM元素也是不用的。如果想复制其绑定事件,则用XX.clone(true);

                 $("button").replaceWith($("<input type='checkbox'>"));//用括号中的元素替换前面的元素。绑定的事件会失效。replaceAll作用相同，颠倒2个元素的位置而已

                 $("li").wrap("<strong></strong>");//会为每个匹配的元素在外层包裹一个strong标签

                 $("li").wrapAll($("<div></div>"));//会为匹配到的所有元素一起在外层包裹一个div。如果被包裹的多个元素之间有其他元素则会被放到包裹元素之后

                 $("li").wrapInner("<span></span");//会为每个匹配中的元素的子节点外边包裹一层标签

             });

         </script>

　　操作DOM元素的主要方法和功能都在注释中详细说明了。这里还没有介绍jquery操作属性和css等相关方法，下次有空再记录下。

jquery DOM操作（一）的更多相关文章

  1. jQuery DOM操作之结点转移复制

    jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...

  2. JQuery DOM操作（属性操作/样式操作/文档过滤）

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  3. Jquery DOM 操作列表

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...

  4. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  5. 事件冒泡及事件委托的理解（JQuery Dom操作）

    jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...

  6. JQuery -- Dom操作， 示例代码

    1.内部插入节点 *   append(content) :向每个匹配的元素的内部的结尾处追加内容 *   appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 *   ...

  7. JQuery dom 操作总结

    DOM 操作之获取值 获得内容 - text():设置或返回所选元素的文本内容 $("#btn1").click(function(){ alert("Text: &qu ...

  8. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  9. jQuery DOM操作

    对节点的操作 查找节点 查找节点可以直接利用jQuery选择器来完成,非常便利. 插入节点 jQuery提供了8种插入节点的方法. 序号 方法 描述 实例 1 append() 向每个匹配的元素内部追 ...

随机推荐

  1. 怎样在hibernate的HQL语句中使用mysql 的自定义函数？

    问题:怎样在hibernate中使用mysql的函数? 1.hibernate支持原生态的sql语句查询,使用session.createSQLQuery()创建查询对象: 2.怎样在hql中使用my ...

  2. UndertowServer+SpringMVC+Thymeleaf模板引擎构建轻量级的web项目

    这两周需要写一个页面来请求另一个服务中的接口,服务器采用了超轻量级的undertow,模板引擎采用的是Thymeleaf,在寻找页面资源位置这个地方难住了我.下面分享一下,这方面的代码. Spring ...

  3. 【BZOJ】3572: [Hnoi2014]世界树 虚树+倍增

    [题意]给定n个点的树,m次询问,每次给定ki个特殊点,一个点会被最近的特殊点控制,询问每个特殊点控制多少点.n,m,Σki<=300000. [算法]虚树+倍增 [题解]★参考:thy_asd ...

  4. 【POJ】2142 The Balance 数论（扩展欧几里得算法）

    [题意]给定a,b,c,在天平左边放置若干重量a的砝码,在天平右边放置若干重量b的砝码,使得天平两端砝码差为c.设放置x个A砝码和y个B砝码,求x+y的最小值. [算法]数论(扩展欧几里德算法) [题 ...

  5. Ice Cream Tower Gym - 101194D (贪心 + 二分 )

    题目链接 : https://cn.vjudge.net/problem/Gym-101194D 题目大意 : 给你n个冰激凌球,让你用这些冰激凌球去垒冰激凌,要求是下面的这一个必须是他上面一个的两倍 ...

  6. Ubuntu之镜像iso安装系统

    ubuntu的安装 官网下载iso文件,网址:http://releases.ubuntu.com/16.04.4/, 选择:ubuntu-16.04.4-server-amd64.iso: 下载完毕 ...

  7. vundle+vim8+php+xdebug

    vundle 一开始容易被坑,vundle的运行方法是自己下载,不是自己下载,在安装上vundle后,直接修改~/.vimrc中,Plugin增加插件,然后运行PluginInstall即可安装 vi ...

  8. HDU 6198 2017沈阳网络赛 线形递推

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6198 题意:给出一个数k,问用k个斐波那契数相加,得不到的数最小是几. 解法:先暴力打表看看有没有规律 ...

  9. Docker Commands

    Docker Commands 安装,以Ubuntu 14.04.3为例 apt-get install docker.io 注意安装之前需要更新系统 列出曾经存在的容器 docker ps -a 列 ...

  10. Vim的分屏功能

    本篇文章主要教你如何使用 Vim 分屏功能. 分屏启动Vim 使用大写的O参数来垂直分屏. vim -On file1 file2 ... 使用小写的o参数来水平分屏. vim -on file1 f ...