最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

jQuery添加删除DOM元素方法详解_jquery

来源:懂视网 责编:小采 时间:2020-11-27 21:49:00
文档

jQuery添加删除DOM元素方法详解_jquery

jQuery添加删除DOM元素方法详解_jquery:本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面。 1、DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使
推荐度:
导读jQuery添加删除DOM元素方法详解_jquery:本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面。 1、DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使

本文实例分析了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()方法的参数可以是一个,也可以是两个。

当参数是一个时,则是要查询的属性名称。

当参数是两个时,则可以设置属性的值。

输出元素的title属性.一个参数 $("#id").attr("title","改变title值"); //改变元素的title属性值.二个参数

3.添加元素节点

$(html) 简单说明一下$(html)方法会根据传入的html标记字符串创建一个dom对象,并将这个dom对象包装成一个jquery对象返回,总之就是把标记所有html代码都放到$()工厂里面就行了!

例:

下面列出部分插入节点的方法

方法

描述

示例

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()方法

    4.2 empty()方法

    严格来讲,empty()方法并不是删除元素,而是清空

    例:

    HTML代码:

    
    
  • AAA
  • JQuery代码:
    代码如下:$("ul li:eq(0)").empty();

    结果

    记住,只会清空内容,不会请空属性;

    更多关于jQuery操作DOM元素相关内容感兴趣的读者可查看本站专题:《jQuery操作DOM节点方法总结》

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

    文档

    jQuery添加删除DOM元素方法详解_jquery

    jQuery添加删除DOM元素方法详解_jquery:本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面。 1、DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使
    推荐度:
    标签: 删除 添加 方法
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top