Jquery元素追加和删除的实现方法


Posted in Javascript onMay 24, 2016

介绍

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() 注意大小写,我试验时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 相关文章推荐
      JS类的封装及实现代码
      Dec 02 Javascript
      关于html+ashx开发中几个问题的解决方法
      Jul 18 Javascript
      深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
      Jan 15 Javascript
      jQuery自带的一些常用方法总结
      Sep 03 Javascript
      Javascript原型链的原理详解
      Jan 05 Javascript
      javascript和jQuery实现网页实时聊天的ajax长轮询
      Jul 20 Javascript
      炫酷的js手风琴效果
      Oct 13 Javascript
      浅谈AngularJS中ng-class的使用方法
      Nov 11 Javascript
      jQuery中$.grep() 过滤函数 数组过滤
      Nov 22 Javascript
      bootstrap datetimepicker实现秒钟选择下拉框
      Jan 05 Javascript
      vue-router 权限控制的示例代码
      Sep 21 Javascript
      浅谈vue的第一个commit分析
      Jun 08 Javascript
      jquery html动态添加的元素绑定事件详解
      May 24 #Javascript
      js和jQuery设置Opacity半透明 兼容IE6
      May 24 #Javascript
      浅析jquery unbind()方法移除元素绑定的事件
      May 24 #Javascript
      jQuery unbind 删除绑定事件详解
      May 24 #Javascript
      深入理解jQuery之防止冒泡事件
      May 24 #Javascript
      30分钟快速掌握Bootstrap框架
      May 24 #Javascript
      JQuery 传送中文乱码问题的简单解决办法
      May 24 #Javascript
      You might like
      php操作mysqli(示例代码)
      2013/10/28 PHP
      php下Memcached入门实例解析
      2015/01/05 PHP
      php curl 上传文件代码实例
      2015/04/27 PHP
      Smarty日期时间操作方法示例
      2016/11/15 PHP
      利用PHP如何统计Nginx日志的User Agent数据
      2019/03/06 PHP
      php菜单/评论数据递归分级算法的实现方法
      2019/08/01 PHP
      给Javascript数组插入一条记录的代码
      2007/08/30 Javascript
      直接生成打开窗口代码,不必下载
      2008/05/14 Javascript
      js图片自动切换效果处理代码
      2013/05/07 Javascript
      JavaScript里实用的原生API汇总
      2015/05/14 Javascript
      Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
      2016/06/07 Javascript
      输入法的回车与消息发送快捷键回车的冲突解决方法
      2016/08/09 Javascript
      让html元素随浏览器的大小自适应垂直居中的实现方法
      2016/10/12 Javascript
      基于JavaScript实现微信抢红包功能
      2017/07/20 Javascript
      浅谈JavaScript中的属性:如何遍历属性
      2017/09/14 Javascript
      AngularJS实现图片上传和预览功能的方法分析
      2017/11/08 Javascript
      JS实现利用两个队列表示一个栈的方法
      2017/12/13 Javascript
      react+redux的升级版todoList的实现
      2017/12/18 Javascript
      JS逻辑运算符短路操作实例分析
      2018/07/09 Javascript
      JavaScript中.min.js和.js文件的区别讲解
      2019/02/13 Javascript
      python数据结构之二叉树的建立实例
      2014/04/29 Python
      Python切片用法实例教程
      2014/09/08 Python
      详解python基础之while循环及if判断
      2017/08/24 Python
      Python实现查找数组中任意第k大的数字算法示例
      2019/01/23 Python
      Django中的模型类设计及展示示例详解
      2020/05/29 Python
      美国标志性加大尺码时装品牌:Ashley Stewart
      2016/12/15 全球购物
      瑜伽国际:Yoga International
      2018/04/18 全球购物
      Rowdy Gentleman服装和配饰:美好时光
      2019/09/24 全球购物
      Farfetch巴西官网:奢侈品牌时尚购物平台
      2020/10/19 全球购物
      求职教师自荐书
      2014/06/19 职场文书
      工厂门卫的岗位职责
      2014/07/27 职场文书
      检讨书1000字
      2014/10/11 职场文书
      校友回访母校寄语
      2015/02/26 职场文书
      刑事上诉状范文
      2015/05/22 职场文书
      Redis入门教程详解
      2021/08/30 Redis
      利用Python多线程实现图片下载器
      2022/03/25 Python