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 相关文章推荐
      通过JAVASCRIPT读取ASP设定的COOKIE
      Feb 15 Javascript
      爱恋千雪-US-AscII加密解密工具(网页加密)下载
      Jun 06 Javascript
      jQuery随机切换图片的小例子
      Apr 18 Javascript
      详解Javascript动态操作CSS
      Dec 08 Javascript
      javascript 判断整数方法分享
      Dec 16 Javascript
      JavaScript中的立即执行函数表达式介绍
      Mar 15 Javascript
      JS+CSS实现的经典圆角下拉菜单效果代码
      Oct 21 Javascript
      jQuery模拟淘宝购物车功能
      Feb 27 Javascript
      详解在HTTPS 项目中使用百度地图 API
      Apr 26 Javascript
      js如何实现元素曝光上报
      Aug 07 Javascript
      基于canvas实现手写签名(vue)
      May 21 Javascript
      vue单文件组件无法获取$refs的问题
      Jun 24 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 PDOStatement::execute讲解
      2019/01/31 PHP
      PHP如何开启Opcache功能提升程序处理效率
      2020/04/27 PHP
      jquery中html、val与text三者属性取值的联系与区别介绍
      2013/12/29 Javascript
      JavaScript变量声明详解
      2014/11/27 Javascript
      如何利用AngularJS打造一款简单Web应用
      2015/12/05 Javascript
      Js调用Java方法并互相传参的简单实例
      2016/08/11 Javascript
      angular源码学习第一篇 setupModuleLoader方法
      2016/10/20 Javascript
      使用JS读取XML文件的方法
      2016/11/25 Javascript
      Vue数据驱动模拟实现3
      2017/01/11 Javascript
      js通过指定下标或指定元素进行删除数组的实例
      2017/01/12 Javascript
      JS实现移动端判断上拉和下滑功能
      2017/08/07 Javascript
      详解vue-cli构建项目反向代理配置
      2017/09/07 Javascript
      JS返回页面时自动回滚到历史浏览位置
      2018/09/26 Javascript
      详解ES6 Symbol 的用途
      2018/10/14 Javascript
      jQuery实现的简单歌词滚动功能示例
      2019/01/07 jQuery
      Vue Object.defineProperty及ProxyVue实现双向数据绑定
      2020/09/02 Javascript
      Python 用户登录验证的小例子
      2013/03/06 Python
      Python制作CSDN免积分下载器
      2015/03/10 Python
      python清除指定目录内所有文件中script的方法
      2015/06/30 Python
      python中根据字符串调用函数的实现方法
      2016/06/12 Python
      Python用UUID库生成唯一ID的方法示例
      2016/12/15 Python
      Python3一行代码实现图片文字识别的示例
      2018/01/15 Python
      Python实现购物车购物小程序
      2018/04/18 Python
      python复制列表时[:]和[::]之间有什么区别
      2018/10/16 Python
      把django中admin后台界面的英文修改为中文显示的方法
      2019/07/26 Python
      python 模拟银行转账功能过程详解
      2019/08/06 Python
      django实现用户注册实例讲解
      2019/10/30 Python
      python3连接MySQL8.0的两种方式
      2020/02/17 Python
      selenium+python配置chrome浏览器的选项的实现
      2020/03/18 Python
      美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
      2017/10/31 全球购物
      本科生求职简历的自我评价
      2013/10/21 职场文书
      监察建议书范文
      2014/03/12 职场文书
      经典毕业生求职信
      2014/07/12 职场文书
      写给老婆的保证书
      2015/02/27 职场文书
      干部理论学习心得体会
      2016/01/21 职场文书
      助学金申请书该怎么写?
      2019/07/16 职场文书