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 读书笔记索引贴
      Jan 11 Javascript
      jquery 卷帘效果实现代码(不同方向)
      Feb 05 Javascript
      jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
      Apr 26 Javascript
      浅析IE10兼容性问题(frameset的cols属性)
      Jan 03 Javascript
      jquery浏览器滚动加载技术实现方案
      Jun 03 Javascript
      javascript实现Email邮件显示与删除功能
      Nov 21 Javascript
      深入理解javascript作用域第二篇之词法作用域和动态作用域
      Jul 24 Javascript
      Nuxt升级2.0.0时出现的问题(小结)
      Oct 08 Javascript
      layui问题之自动滚动二级iframe页面到指定位置的方法
      Sep 18 Javascript
      javascript使用链接跨域下载图片
      Nov 01 Javascript
      javascript中的with语句学习笔记及用法
      Feb 17 Javascript
      vue 自定义的组件绑定点击事件
      Apr 21 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抓即时股票信息
      2006/10/09 PHP
      PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
      2012/04/09 PHP
      php中过滤非法字符的具体实现
      2013/10/29 PHP
      javascript URL锚点取值方法
      2009/02/25 Javascript
      JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
      2013/07/05 Javascript
      ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
      2014/08/30 Javascript
      jQuery判断元素上是否绑定了指定事件的方法
      2015/03/17 Javascript
      jQuery插件实现带圆点的焦点图片轮播切换
      2016/01/18 Javascript
      JavaScript模板引擎Template.js使用详解
      2016/12/15 Javascript
      JS非空验证及邮箱验证的实例
      2017/08/11 Javascript
      11行JS代码制作二维码生成功能
      2018/03/09 Javascript
      详解如何制作并发布一个vue的组件的npm包
      2018/11/10 Javascript
      详解Vue项目部署遇到的问题及解决方案
      2019/01/11 Javascript
      vue.js的简单自动求和计算实例
      2019/11/08 Javascript
      JavaScript读取本地文件常用方法流程解析
      2020/10/12 Javascript
      python获取当前日期和时间的方法
      2015/04/30 Python
      用Python写冒泡排序代码
      2016/04/12 Python
      pandas groupby 分组取每组的前几行记录方法
      2018/04/20 Python
      python3从网络摄像机解析mjpeg http流的示例
      2020/11/13 Python
      纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
      2013/01/07 HTML / CSS
      HTML5轻松实现全屏视频背景的示例
      2018/04/23 HTML / CSS
      GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
      2016/12/31 全球购物
      出门问问全球官方商城:Tichome音箱和TicWatch智能手表
      2017/12/02 全球购物
      Clarks其乐鞋荷兰官网:Clarks荷兰
      2019/07/05 全球购物
      美国尼曼百货官网:Neiman Marcus
      2019/09/05 全球购物
      大学生的创业计划书就该这么写
      2014/01/30 职场文书
      银行爱岗敬业演讲稿
      2014/05/05 职场文书
      爱与责任演讲稿
      2014/05/20 职场文书
      开学典礼演讲稿
      2014/05/23 职场文书
      校庆标语集锦
      2014/06/25 职场文书
      市委召开党的群众路线教育实践活动总结大会报告
      2014/10/21 职场文书
      晚会开幕词
      2015/01/28 职场文书
      奖金申请报告模板
      2015/05/15 职场文书
      会议室管理制度范本
      2015/08/06 职场文书
      python模块与C和C++动态库相互调用实现过程示例
      2021/11/02 Python
      MySQL查询日期时间
      2022/05/15 MySQL