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 相关文章推荐
      自制基于jQuery的智能提示插件一枚
      Feb 18 Javascript
      最常用的12种设计模式小结
      Aug 09 Javascript
      javascript验证上传文件的类型限制必须为某些格式
      Nov 14 Javascript
      自己封装的常用javascript函数分享
      Jan 07 Javascript
      HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
      Apr 26 Javascript
      this,this,再次讨论javascript中的this,超全面(经典)
      Jan 05 Javascript
      JS中的二叉树遍历详解
      Mar 18 Javascript
      jQuery验证插件validate使用详解
      May 11 Javascript
      jQuery手风琴的简单制作
      May 12 jQuery
      微信小程序实现卡片左右滑动效果的示例代码
      May 01 Javascript
      React传值 组件传值 之间的关系详解
      Aug 26 Javascript
      JS端基于download.js实现图片、视频时直接下载而不是打开预览
      May 09 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小型企业库存管理系统的设计与实现代码
      2011/05/16 PHP
      php实例分享之html转为rtf格式
      2014/06/02 PHP
      php中ftp_chdir与ftp_cdup函数用法
      2014/11/18 PHP
      Laravel路由研究之domain解决多域名问题的方法示例
      2019/04/04 PHP
      PHP常见过waf webshell以及最简单的检测方法
      2019/05/21 PHP
      Javascript操纵Cookie实现购物车程序
      2007/02/15 Javascript
      innerText和textContent对比及使用介绍
      2013/02/27 Javascript
      JavaScript中Number.MIN_VALUE属性的使用示例
      2015/06/04 Javascript
      JS实现超简单的鼠标拖动效果
      2015/11/02 Javascript
      nodejs制作爬虫实现批量下载图片
      2017/05/19 NodeJs
      Bootstrap按钮组实例详解
      2017/07/03 Javascript
      关于jquery form表单序列化的注意事项详解
      2017/08/01 jQuery
      原生JS写Ajax的请求函数功能
      2017/12/22 Javascript
      NUXT SSR初级入门笔记(小结)
      2019/12/16 Javascript
      JS遍历树层级关系实现原理解析
      2020/08/31 Javascript
      python使用在线API查询IP对应的地理位置信息实例
      2014/06/01 Python
      新手如何快速入门Python(菜鸟必看篇)
      2017/06/10 Python
      Python网络爬虫中的同步与异步示例详解
      2018/02/03 Python
      Python学习笔记之open()函数打开文件路径报错问题
      2018/04/28 Python
      python单例模式获取IP代理的方法详解
      2018/09/13 Python
      详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
      2019/05/07 Python
      python3 自动识别usb连接状态,即对usb重连的判断方法
      2019/07/03 Python
      浅谈Python中(&amp;,|)和(and,or)之间的区别
      2019/08/07 Python
      python多项式拟合之np.polyfit 和 np.polyld详解
      2020/02/18 Python
      浅析Python 责任链设计模式
      2020/09/11 Python
      如何基于Python爬虫爬取美团酒店信息
      2020/11/03 Python
      Myprotein芬兰官网:欧洲第一运动营养品牌
      2019/05/05 全球购物
      班级学习计划书
      2014/04/27 职场文书
      党员专题组织生活会发言材料
      2014/10/17 职场文书
      个人作风建设心得体会
      2014/10/22 职场文书
      党员群众路线整改措施及今后努力方向
      2014/10/28 职场文书
      2014年社区民政工作总结
      2014/12/02 职场文书
      电力工程合作意向书
      2015/05/11 职场文书
      Python如何利用正则表达式爬取网页信息及图片
      2021/04/17 Python
      Python基础知识学习之类的继承
      2021/05/31 Python
      MySQL解决Navicat设置默认字符串时的报错问题
      2022/06/16 MySQL