Jquery基础教程之DOM操作

2020-05-23 06:24:09易采站长站整理

     对于dom的全称大家都知道吧,DOM是Document Object Model的缩写,其意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用dom接口很容易的访问页面中所有标准组件。dom操作一般可以分为三个方面即DOM Core(核心)、HTM-Dom和CSS-DOM。

  每一个网页都可以用DOM表示出来,每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树,代码:

代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"
<title>DOM Demo</title>
</head>
<body>
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
</body>
</html>

   构建出的DOM树如下:

  

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

  一、查–查找DOM节点

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

  二、建–新建DOM节点

    1、创建元素节点

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

          创建一个元素节点JQuery代码如下:


 $li1=$("<li></li>")

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


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

      添加后页面中只能看到<li>元素默认的”·”,由于没有为节点添加文本所以只显示默认符号,下面创建文本节点。

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