jQuery添加删除DOM元素方法详解


Posted in Javascript onJanuary 18, 2016

本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考,具体如下:

介绍

DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面。

1、DOM Core

DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML。
例如:document,getElementsByTagName("form");//使用DOM Core来获取表单对象的方法。

2、HTML-DOM

在使用Javascript和DOM为HTML文件编写脚本时,有许多属于HTML-DOM的属性,HTML-DOM的出现甚至比DOM Core还要早,他提供了一些更简明的记号来描述各种HTML元素的属性。
例如:

document.forms //HTML-DOM提供了一个forms对象。

PS:可以看出,获取对象、属性即可以用DOM Core来实现民,也可以用HTML-DOM实现。

3、CSS-DOM

CSS-DOM是针对CSS的操作,在javascript中,CSS-DOM主要的作用是获取和设置style对象的各种属性,由此达到网页呈现出各种不同的效果.

例如:

element.style.color="red";//设置某元素的字体颜色的方法。

常用方法

1.查找元素节点

var $li = $("ul li:eq(0)");//获取ul标记下的第一个li,也可以写成 $("#ulID li:eq(0)");

2.查找元素属性

利用jquery的attr()方法来获取元素的各种属性的值,attr()方法的参数可以是一个,也可以是两个。

当参数是一个时,则是要查询的属性名称。

当参数是两个时,则可以设置属性的值。

alert($("#id").attr("title")); //输出元素的title属性.一个参数
$("#id").attr("title","改变title值"); //改变元素的title属性值.二个参数

3.添加元素节点

$(html) 简单说明一下$(html)方法会根据传入的html标记字符串创建一个dom对象,并将这个dom对象包装成一个jquery对象返回,总之就是把标记所有html代码都放到$()工厂里面就行了!

例:

var $htmlLi = $(" <li title='香蕉'>香蕉</li>"); //创建DOM对象
var $ul = $("ul");  //获取UL对象
$ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表

下面列出部分插入节点的方法

方法 描述 示例
Append() 向每个匹配的元素内追加内容 HTML代码
    JQuery代码 $(“ul”).append(“
  • AA
  • ”); 结果
    • AA
     
    appendTo() 该方法和Append()相反,a.Append(b)是将b追加到a中,而appendTo()是将b追求到a中 HTML代码
      JQuery代码 $ (“
    • AA
    • ”).appendTo (“ul”).; 结果
      • AA
       
      Prepend() 向每个匹配的元素内部前置内容 HTML代码

      哈哈

      JQuery代码 $(“p”).prepend(“ABC”); 结果

      ABC哈哈

      prependTo() 该方法和Prepend()相反,a. Prepend (b)是将b前置到a中,而prependTo ()是将b前置到a中 HTML代码

      哈哈

      JQuery代码 $(“ABC”).prependTo.(“p”); 结果

      ABC哈哈

      After() 在每个匹配的元素之后插入内容,是之后 HTML代码

      AAA

      JQuery代码 $(“p”).After(“cc”); 结果

      AAA

      cc
      insertAfter() 和After()相反 HTML代码

      AAA

      JQuery代码 $ (“cc”).After(“p”); 结果

      AAA

      cc
      Before() 在每个匹配的元素之前插入内容 HTML代码

      AAA

      JQuery代码 $(“p”). Before (“cc”); 结果 cc

      AAA

      insertBefore() 和Before()相反 HTML代码

      AAA

      JQuery代码 $ (“cc”). insertBefore (“p”); 结果 cc

      AAA

      好了,不要斋看,自己动手试试吧:)

      4.删除元素节点

      由于我们需要经常动态去改变DOM元素,因此Jquery提供了两种删除节点的方法,即remove()和empty();

      4.1 remove()方法

      $("p").remove();// 我们可以获取到要删除的元素,然后调用remove()方法
      $("ul li:eq(0)").remove().appendTo("ul");// 删除ul下面的第一个li标记,然后再把删除的li标记重新加到ul里面,remove()方法返回删除元素的引用,这时你可以继续使用
      $("ul li").remove("li[title!=ABC]");//remove可以接受通过参数来选择性的删除符合条件的元素;

      4.2 empty()方法

      严格来讲,empty()方法并不是删除元素,而是清空

      例:

      HTML代码:

      <ul>
      <li title="AAA">AAA</li>
      </ul>

      JQuery代码:

      $("ul li:eq(0)").empty();

      结果

      <ul>
      <li title="AAA"></li>
      </ul>

      记住,只会清空内容,不会请空属性;

      希望本文所述对大家jQuery程序设计有所帮助。

      Javascript 相关文章推荐
      JavaScript 对象模型 执行模型
      Oct 15 Javascript
      JavaScript实现从数组中选出和等于固定值的n个数
      Sep 03 Javascript
      在Node.js应用中使用Redis的方法简介
      Jun 24 Javascript
      jQuery Validate设置onkeyup验证的实例代码
      Dec 09 Javascript
      学习使用Bootstrap页面排版样式
      May 11 Javascript
      JavaScript之underscore_动力节点Java学院整理
      Jul 03 Javascript
      vue滚动轴插件better-scroll使用详解
      Oct 17 Javascript
      基于Vue的移动端图片裁剪组件功能
      Nov 28 Javascript
      js实现GIF动图分解成多帧图片上传
      Oct 24 Javascript
      webpack打包html里面img后src为“[object Module]”问题
      Dec 22 Javascript
      在Vue中使用Echarts实例图的方法实例
      Oct 10 Javascript
      vue中实现点击空白区域关闭弹窗的两种方法
      Dec 30 Vue.js
      AngularJS仿苹果滑屏删除控件
      Jan 18 #Javascript
      jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
      Jan 18 #Javascript
      jquery.validate 自定义验证方法及validate相关参数
      Jan 18 #Javascript
      实例详解jQuery表单验证插件validate
      Jan 18 #Javascript
      基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
      Jan 18 #Javascript
      jQuery插件Validate实现自定义校验结果样式
      Jan 18 #Javascript
      jQuery插件实现带圆点的焦点图片轮播切换
      Jan 18 #Javascript
      You might like
      PHP代码审核的详细介绍
      2013/06/13 PHP
      PHP $_FILES中error返回值详解
      2014/01/30 PHP
      PHP SOCKET编程详解
      2015/05/22 PHP
      PHP排序算法类实例
      2015/06/17 PHP
      YII CLinkPager分页类扩展增加显示共多少页
      2016/01/29 PHP
      php in_array() 检查数组中是否存在某个值详解
      2016/11/23 PHP
      浅谈PHP发送HTTP请求的几种方式
      2017/07/25 PHP
      Node.js与PHP、Python的字符处理性能对比
      2014/07/06 Javascript
      JavaScript返回当前会话cookie全部键值对照的方法
      2015/04/03 Javascript
      基于jQuery1.9版本如何判断浏览器版本类型
      2016/01/12 Javascript
      分享12个非常实用的JavaScript小技巧
      2016/05/11 Javascript
      Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
      2016/07/01 Javascript
      DropDownList控件绑定数据源的三种方法
      2016/12/24 Javascript
      vuejs父子组件通信的问题
      2017/01/11 Javascript
      jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
      2017/04/10 jQuery
      关于js的三种使用方式(行内js、内部js、外部js)的程序代码
      2018/05/05 Javascript
      Vue中控制v-for循环次数的实现方法
      2018/09/26 Javascript
      Nodejs中获取当前函数被调用的行数及文件名详解
      2018/12/12 NodeJs
      vue视图不更新情况详解
      2019/05/16 Javascript
      Nodejs异步流程框架async的方法
      2019/06/07 NodeJs
      Python的词法分析与语法分析
      2013/05/18 Python
      python3.3使用tkinter开发猜数字游戏示例
      2014/03/14 Python
      python复制与引用用法分析
      2015/04/08 Python
      python实现简易云音乐播放器
      2018/01/04 Python
      对Python 除法负数取商的取整方式详解
      2018/12/12 Python
      python抓取需要扫微信登陆页面
      2019/04/29 Python
      详解Python 4.0 预计推出的新功能
      2019/07/26 Python
      python实现堆排序的实例讲解
      2020/02/21 Python
      使用python无账号无限制获取企查查信息的实例代码
      2020/04/17 Python
      django queryset 去重 .distinct()说明
      2020/05/19 Python
      Python字符串split及rsplit方法原理详解
      2020/06/29 Python
      python使用dlib进行人脸检测和关键点的示例
      2020/12/05 Python
      里程积分管理买卖交换平台:Points.com
      2017/01/13 全球购物
      凯特王妃父母建立的派对用品网站:Party Pieces
      2017/05/28 全球购物
      爱心捐书活动总结
      2014/07/05 职场文书
      有关骆驼祥子的读书笔记
      2015/06/26 职场文书