jQuery中的DOM操作-白红宇

jQuery中的DOM操作

阅读量：5336 次

发布时间：2019-06-15

本文共 3544 字，大约阅读时间需要 11 分钟。

一、DOM的概念

DOM ( Document Object Model ) 文档对象模型。根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松的访问页面中所有标准组件。

二、DOM操作的分类

1.DOM Core (核心)

定义了一套标准的针对任何结构化文档的对象，包括HTML、XHTML和XML

例如JavaScript中的getELementById()、getElementByTagName()、getAttribute()、setAttribute()

2.HTML-DOＭ

定义了一套标准的针对XML文档的对象

例如.src()等

3.CSS-DOM

定义了一套标准的针对XHTML文档的对象

例如.style.color()等

三、jQuery中的DOM操作

01.查找节点

元素节点：构成了DOM的基础。文档结构中，<html>是根元素，代表整个文档，其他的还有<head>,<body><ul>,<li>等等。元素节点之间可以相互包含(当然遵循一定的规则)

属性节点：元素都可以包含一些属性，属性的作用是对元素做出更具体的描述，比如id,name之类的。

查找元素节点

查找属性节点

02.创建节点

创建元素节点

var $li = $("
");    //创建一个元素；注意事项一$("ul").append($li);            //添加到
      
       节点中去；注意事项二

注意事项一：创建单个元素时，要注意闭合回路和使用标准的XHTML格式。

注意事项二：动态创建的新元素节点不会自动添加到文档中去，而是需要使用其他方式将其插入到文档中，如append

创建文本节点

var $li = $("雪梨
");    //创建一个元素和“雪梨”文本节点；$("ul").append($li);            //添加到
      
       节点中去；

创建属性节点

var $li = $("雪梨
");    //创建一个元素、“雪梨”文本节点和“title”属性节点；注意事项三$("ul").append($li);            //添加到
      
       节点中去；

注意事项三：是否创建属性节点的区别在于虽然网页显示一致，但是查看源码创建了属性节点的代码会有title这个属性节点

03.插入节点

append

我想说:
                       //HTML代码$("p").append("你好");        //jquery代码我想说：你好
            //结果

appendTo

我想说:
                             //HTML代码$("你好").appendTo("p");        //jquery代码我想说：你好
            //结果

与结果

append()与appendTo():想匹配的元素后置内容

prepend()与prependTo():向匹配的元素前置内容

与结果

after()与insertAfter()：向匹配的元素之后插入内容内容

before()与insertBefore()：在匹配的元素之前插入内容

04.删除节点

	remove()	detach()	empty()
作用原理	节点包含的所有后代节点将同时被删除	同remove(),但不会把匹配的元素从jQuery对象删除	并非删除节点而是清空元素中所有后代节点
删后事件及数据	不能	能	-
删后元素本身恢复	能	能	能

05.复制节点

clone():

$("ul li").click(function(){     $(this).clone().appendTo("ul");   //复制当前单击的节点，并将它追加到
     
      元素中，但新元素布局有原来的事件})

clone(ture):

$("ul li").click(function(){     $(this).clone(ture).appendTo("ul");   //复制当前单击的节点，并将它追加到
     
      元素中,同时新元素具有以前的事件})

06.替换节点

replaceWith()与replaceAll()

$("p").replaceWith("不喜欢的水果");    //replaceAith()$("不喜欢的水果").replaceAll("p");     //replaceAll()//替换前元素已经绑定了时间，替换后元素失去绑定的事件

07.包裹节点

08.属性操作

(1) 获取和设置属性

单个属性

$("p").attr("title","your title");    //将title换成your title

多个属性

$("p").attr("title":"your title", "name":"test");    //将title换成your title，name 换成test

既能设置属性的值，又能获取元素的值：attr(),html(),text(),heigth(),width(),val(),css()

(2) 删除属性

removeAttr()

jQuery1.6以后新增了prop(),removeProp()

09.样式操作

(1) 获取样式和设置样式

(2) 追加样式

方法	aadClass()	attr()
用途	追加样式	设置样式
对同一个网页元素操作	<p>test</p>	<p>test</p>
第一次使用方法	$(“p”).aadClass(“high”);	$(“p”).attr(“class”,”high”);
第一次结果	<p class=”high”>test</p>	<p class=”high”>test</p>
再次使用方法	$(“p”).aadClass(“another”);	$(“p”).attr(“class”,” another”);
最终结果	<p class=”high another”>test</p>	<p class=”another”>test</p>

(3) 移除样式

$("p").removeClass("high");                    //移除class中的high $("p").removeClass("high another");            //移除class中的high another $("p").removeClass();                          //移除class中的全部值

(4) 切换样式

$Btn.toggle(function(){    //点击切换隐藏显示 //显示的元素 },function(){

//隐藏的元素 }) $("p").toggle("another")   //点击切换class有无another

(5) 判断是否含有某个样式

$("p").hasClass("another");    //判断p元素是否含有为another的class

10.设置和获取HTML、文本和值

html() :只能用于XHTML文档

val() ：还可以使select、checkbox、radio相应的选项被选中

1234512$("#sel").val("2");               //改变默认选项$("#sel").val(["2","3"]);         //使2,3被选中$(":checkbox").val(["v2","v4"]);  //2,4被选中$(":radio").val(["r2"]);          //2被选中