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同页面多次调用弹出层具体实例代码
      Aug 16 Javascript
      jquery validate和jquery form 插件组合实现验证表单后AJAX提交
      Aug 26 Javascript
      微信小程序 LOL 英雄介绍开发实例
      Sep 30 Javascript
      模板视图和AngularJS之间冲突的解决方法
      Nov 22 Javascript
      js中string和number类型互转换技巧(分享)
      Nov 28 Javascript
      Bootstrap栅格系统的使用和理解2
      Dec 14 Javascript
      JavaScript实现三级级联特效
      Nov 05 Javascript
      详解vue移动端日期选择组件
      Feb 22 Javascript
      Redux实现组合计数器的示例代码
      Jul 04 Javascript
      vue调试工具vue-devtools安装及使用方法
      Nov 07 Javascript
      Vue 实现复制功能,不需要任何结构内容直接复制方式
      Nov 09 Javascript
      js判断浏览器的环境(pc端,移动端,还是微信浏览器)
      Dec 24 Javascript
      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 download.php实现代码 跳转到下载文件(response.redirect)
      2009/08/26 PHP
      PHP和JAVA中的重载(overload)和覆盖(override) 介绍
      2012/03/01 PHP
      PHP rmdir()函数的用法总结
      2019/07/02 PHP
      IE浏览器PNG图片透明效果代码
      2008/09/02 Javascript
      jQuery表单验证插件formValidator(改进版)
      2012/02/03 Javascript
      JS等比例缩小图片尺寸的实例
      2013/02/27 Javascript
      JS 退出系统并跳转到登录界面的实现代码
      2013/06/29 Javascript
      jQuery简单实现banner图片切换
      2014/01/02 Javascript
      jquery使用append(content)方法注意事项分享
      2014/01/06 Javascript
      jquery实现非叠加式的搜索框提示效果
      2014/01/07 Javascript
      JavaScript函数使用的基本教程
      2015/06/04 Javascript
      javascript实现简单加载随机色方块
      2015/12/25 Javascript
      初识简单却不失优雅的Vue.js
      2016/09/12 Javascript
      jquery 正整数数字校验正则表达式
      2017/01/10 Javascript
      Bootstrap实现各种进度条样式详解
      2017/04/13 Javascript
      详解Javascript获取缓存和清除缓存API
      2017/05/25 Javascript
      JavaScript时间戳与时间日期间相互转换
      2017/12/11 Javascript
      关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
      2018/12/09 Javascript
      jquery实现图片无缝滚动 蒙版遮蔽效果
      2020/01/11 jQuery
      [02:40]DOTA2殁境神蚀者 英雄基础教程
      2013/11/26 DOTA
      [02:29]完美世界高校联赛上海赛区回顾
      2015/12/15 DOTA
      python json.loads兼容单引号数据的方法
      2018/12/19 Python
      python 通过类中一个方法获取另一个方法变量的实例
      2019/01/22 Python
      用Python逐行分析文件方法
      2019/01/28 Python
      python 随机生成10位数密码的实现代码
      2019/06/27 Python
      一篇文章搞定Python操作文件与目录
      2019/08/13 Python
      PYTHON实现SIGN签名的过程解析
      2019/10/28 Python
      python中urllib.request和requests的使用及区别详解
      2020/05/05 Python
      Python轻量级web框架bottle使用方法解析
      2020/06/13 Python
      解决python中0x80072ee2错误的方法
      2020/07/19 Python
      linux面试题参考答案(11)
      2016/11/26 面试题
      个人工作主要事迹
      2014/05/08 职场文书
      十八大标语口号
      2014/10/09 职场文书
      2014酒店客房部工作总结
      2014/12/16 职场文书
      《世界多美呀》教学反思
      2016/02/22 职场文书
      Java对文件的读写操作方法
      2022/04/29 Java/Android