首页 > 代码库 > jQuery中的DOM操作

jQuery中的DOM操作

一、DOM的概念

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

二、DOM操作的分类

1.DOM Core (核心)

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

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

2.HTML-DOM

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

例如.src()等

3.CSS-DOM

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

例如.style.color()等

三、jQuery中的DOM操作

01.查找节点

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

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

查找元素节点

查找属性节点

02.创建节点

创建元素节点

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

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

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

创建文本节点

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

创建属性节点

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

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

03.插入节点

append

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

appendTo

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

<p></p>与<b></b>结果<p><b></b></p>

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

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

<p></p>与<b></b>结果<p></p><b></b>

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

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

04.删除节点

 

remove()

detach()

empty()

作用原理

节点包含的所有后代节点将同时被删除

同remove(),但不会把匹配的元素从jQuery对象删除

并非删除节点而是清空元素中所有后代节点

删后事件及数据

不能

-

删后元素本身恢复


05.复制节点
 

clone():

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

clone(ture):

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

06.替换节点

replaceWith()与replaceAll()

$("p").replaceWith("<strong>不喜欢的水果</strong>");    //replaceAith()
$("<strong>不喜欢的水果</strong>").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相应的选项被选中

 

<select id="sel">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<input type="checbox" value="http://www.mamicode.com/v1"/>1
<input type="checbox" value="http://www.mamicode.com/v2"/>2
<input type="checbox" value="http://www.mamicode.com/v3"/>3
<input type="checbox" value="http://www.mamicode.com/v4"/>4
<input type="checbox" value="http://www.mamicode.com/v5"/>5
<input type="radio" value="http://www.mamicode.com/r1"/>1
<input type="radio" value="http://www.mamicode.com/r2"/>2

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

 

text():HTML、XML有效

11.遍历节点

children():只找自己下一层的元素

closest():向上找一个

parent():向上找一个,不包含自身

parents():向上找到找不到为止

12.CSS-DOM操作

jQuery中的DOM操作