一:创建元素节点(添加)

创建元素节点并且把节点作为元素的子节点添加到DOM树上    append(): 在元素下添加元素
    用法:$("id").append("定义的节点"); 例如:var li1 = $("<li>橘子</li>");
    添加属性节点:$("<li class='test'>草莓</li>")

实例:

点击添加按钮

appendTo(): 将元素添加到元素里面
    用法: $(li3).appendTo("#box1");
    
    prepend(): 添加节点到元素的最上面

prependTo():将节点添加给指定元素的最上面
    用法:$(li3).prependTo("#box1");
   
    before():将节点添加到指定元素的前面(外层)
    用法: $("#div1").before(div1);

insertBefore():将新建元素添加到目标节点前面左右目标元素的兄弟元素

after():将节点添加到指定元素的后面(外层)
    用法: $("#div1").after(div1);

insertAfer(): 将新建的元素添加到目标节点后面作为兄弟元素
    用法:$(element).insertAfter("目标节点")
before()与after()  的区别:

点击第一个按钮如下:

点击第二个按钮如下:

二:删除节点
   
    remove(): 删除所有匹配到的元素,这个方法能够删除元素的所有子节点
    $(element).remove();

找到要删除的元素,使用此方法:

empty(): empty原则上来讲它并不是删除元素,它只是清空节点,它能清空指定元素的所有子节点

$(element).empty();

三:修改节点(替换节点,包裹节点,复制节点)
    
    包裹节点:wrap()
    用法:$(element).wrap("html")

复制节点:clone(true) 完全复制某一个元素  :true复制元素的同时也复制它的行为,如果不需要复制行为的时候就不加参数
    用法:$(element).clone(true);

jQuery中 对标签元素操作(1)的更多相关文章

  1. jQuery中 对标签元素操作(2)

    一.属性操作 1.获取属性和设置属性 例如下jQuery代码: var $para=$("p");           //获取<p>节点 var p_txt=$par ...

  2. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  3. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  4. JavaScript jQuery 中定义数组与操作及jquery数组操作 http://www.jb51.net/article/76601.htm

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  5. JQuery中查找父元素,子元素,追加元素,插入元素和删除元素 及其他常用方法

    Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系.而且它还兼容了CSS3的选择器,而且多出了不少. 所以jQuery的选择器也就变得很多很强大.就最基本的有以下四个: $ ...

  6. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  7. js进阶 11-1 jquery中的页面内容操作的三个方法

    jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...

  8. jquery中修改一个元素的值或内容

    jquery中修改一个元素的值或内容,比如数值增加可以使用这个方法取得原值并+1 $this.text(function(i,ot){return Number(ot)+1;});

  9. jQuery中常用的元素查找方法

    $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div&q ...

随机推荐

  1. webmagic 的 helloworld

    <dependency> <groupId>us.codecraft</groupId> <artifactId>webmagic-core</a ...

  2. 浅谈SpringAOP

    0. 写在最前面 之前实习天天在写业务,其中有一个业务是非常的复杂,涉及到了特别多的表.最后测下来,一个接口的时间,竟然要5s多. 当时想写一个AOP,来计算处理接口花费多长时间,也就是在业务逻辑的前 ...

  3. (void) (&_x == &_y)的作用

    如果有下面这段代码: #define min(x, y) ({ \ const typeof(x) _x = (x); \ const typeof(y) _y = (y); \ (void) (&a ...

  4. spark高可用集群搭建及运行测试

    文中的所有操作都是在之前的文章spark集群的搭建基础上建立的,重复操作已经简写: 之前的配置中使用了master01.slave01.slave02.slave03: 本篇文章还要添加master0 ...

  5. 【golang-GUI开发】Qt5的安装

    golang一直被认为没有好的GUI库,事实并非如此. 目前有基于gtk+3.0的gotk3:https://github.com/gotk3/gotk3 以及接下来我们要说的qt:https://g ...

  6. [转]ERROR: http://rancherserver/v1 is not accessible

    本文转自:http://securityer.lofter.com/post/1d0f3ee7_10c465cc 安装rancher agent时出现以下报错 [root@localhost ~]# ...

  7. docker相关操作文章整理

    docker整理: 菜鸟教程的nginx操作链接(docker安装完毕安装nginx启动错误,可以看下面的文章) CSDN基于 Docker 安装 Nginx docker 部署springboot

  8. python面向对象学习(二)基本语法

    目录 1. dir内置函数 2. 定义简单的类(只包含方法) 2.1 定义只包含方法的类 2.2 创建对象 2.3 编写第一个面向对象程序 3. 方法中的self参数 3.1 案例改造 -- 给对象添 ...

  9. js的数据类型:单例模式,工厂模式,构造函数

    js数据类型 基本数据类型:string   undefined   null  boolean  number 引用数据类型  Object  array  function 二者的区别 基本数据类 ...

  10. Dom对象的研究

    1.逻辑运算  ||  &&  ! 1||2   5&&4     !0 || 遇到第一个为true 的数字就终止并返回 && 遇到第一个为false ...