您现在的位置: 万盛学电脑网 >> 程序编程 >> 数据库 >> 数据库综合 >> 正文

学习JQuery的DOM操作

作者:佚名    责任编辑:admin    更新时间:2022-06-22

今天为大家介绍的是JQuery的DOM操作,希望大家会喜欢。

JQuery中的DOM操作主要对包括:建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习JQueryDOM操作。

一、查--查找DOM节点

查找节点非常容易,使用选择器就能轻松完成各种查找工作。例:查找元素节点p返回p内的文本内容$("p").text();例:查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"),返回p的属性title的值。

二、建--新建DOM节点

1、创建元素节点

创建元素节点并且把节点作为

    元素的子节点添加到DOM节点树上。先创建元素点,创建元素节点使用Jquery的工厂函数$()来完成,格式如下:$(html),该方法会根据传入的html字符串返回一个DOM对象,并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下:

     

    $li1=$("

  •  
  • ")

     

    代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下:

    $("ul").append($li1);

    添加后页面中只能看到

  • 元素默认的"·",由于没有为节点添加文本所以只显示默认符号,下面创建文本节点。

     

    PS:append()方法是添加DOM节点方法详见增--添加DOM节点。

    2、创建文本节点

    使用JQuery的工厂函数$()同样能够创建文本节点,创建文本节点的JQuery代码如下:

    $li2=$("

  • 苹果
  • ");

     

    代码返回$li2就是一个由DOM对象包装成JQuery对象,把新建的文本节点添加到DOM树中JQuery代码如下:

    $("ul").append($li2);

    添加后页面中能看到"·苹果",右键查看页面源码发现新加的文本节点没有title属性。下面方法创建带属性的节点。

    3、创建属性节点

    创建属性节点同元素节点、文本节点一样使用JQuery的工厂函数完成。创建属性节点的JQuery代码如下:

    $li3=$("

  • 榴莲
  • ");

     

    代码返回$li3也是一个由DOM对象包装成JQuery对象,把新建的属性节点添加到DOM树中JQuery代码如下:

    $("ul").append($li3);

    添加后页面中能看到"·榴莲",右键查看页面源码发现新加的属性节点有title='榴莲'属性。

    以上就是我们为大家准备的JQuery的DOM操作的相关内容,希望对大家可以有所帮助。