搜索
首页web前端js教程jQuery添加删除DOM元素方法详解_jquery

本文实例分析了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操作DOM元素相关内容感兴趣的读者可查看本站专题:《jQuery操作DOM节点方法总结

          希望本文所述对大家jQuery程序设计有所帮助。

          声明
          本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
          jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

          实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

          axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

          区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

          jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

          修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

          jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

          增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

          jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

          在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

          jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

          删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

          jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

          去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

          jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

          on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

          See all articles

          热AI工具

          Undresser.AI Undress

          Undresser.AI Undress

          人工智能驱动的应用程序,用于创建逼真的裸体照片

          AI Clothes Remover

          AI Clothes Remover

          用于从照片中去除衣服的在线人工智能工具。

          Undress AI Tool

          Undress AI Tool

          免费脱衣服图片

          Clothoff.io

          Clothoff.io

          AI脱衣机

          AI Hentai Generator

          AI Hentai Generator

          免费生成ai无尽的。

          热门文章

          R.E.P.O.能量晶体解释及其做什么(黄色晶体)
          3 周前By尊渡假赌尊渡假赌尊渡假赌
          R.E.P.O.最佳图形设置
          3 周前By尊渡假赌尊渡假赌尊渡假赌
          R.E.P.O.如果您听不到任何人,如何修复音频
          3 周前By尊渡假赌尊渡假赌尊渡假赌

          热工具

          WebStorm Mac版

          WebStorm Mac版

          好用的JavaScript开发工具

          适用于 Eclipse 的 SAP NetWeaver 服务器适配器

          适用于 Eclipse 的 SAP NetWeaver 服务器适配器

          将Eclipse与SAP NetWeaver应用服务器集成。

          螳螂BT

          螳螂BT

          Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

          SublimeText3汉化版

          SublimeText3汉化版

          中文版,非常好用

          Dreamweaver Mac版

          Dreamweaver Mac版

          视觉化网页开发工具