jQuery中的DOM操作

@(前端知识总结)[jQuery, DOM]

本文是笔者读完《锋利的jQuery》后对第三章DOM操作的总结

---

[TOC]

---

DOM操作的分类

1. DOM Core
   DOM Core任何一种支持DOM的程序设计语言都可使用，可以用来处理任何一种使用标记语言编写出来的文档
2. HTML-DOM
3. CSS-DOM

jQuery中的DOM操作

查找节点

1. 查找元素节点
   通过jQuery选择器完成
2. 查找属性节点
   通过jQuery选择器找到需要的元素后，使用attr(" ")方法获取属性值，参数值为一个时，是需要查询属性的名字

创建节点

1. 创建元素节点
   1. 创建新元素；通过jQuery的工厂函数$(HTML)
   2. 将新元素插入文档中；使用jQuery的append( )等方法

var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");
$("ul").append($li_1);
$("ul").append($li_2);

创建单个元素时，注意闭合标签

2. 创建文本节点

var $li_1 = $("<li>农夫</li>");
var $li_2 = $("<li>果园</li>");
$("ul").append($li_1);
$("ul").append($li_2);

创建元素节点时直接把文本内容写出来

3. 创建属性节点

var $li_1 = $("<li tittle = '农夫'>农夫</li>");
var $li_2 = $("<li tittle = '果园'>果园</li>");
$("ul").append($li_1);
$("ul").append($li_2);  

创建元素节点时一起创建属性

插入节点

方法	描述
append( )	向每一个匹配的元素内部追加内容
appendTo( )	$(A).append(B)等效$(B).appendTo(A)
prepend( )	向匹配的元素内部前置内容
prependTo( )	$(A).prepend(B)等效$(B).prependTo(A)
after( )	向匹配的元素之后插入内容
insertAfter( )	$(A).after(B)等效$(B).insertAfter(A)
before( )	向匹配的元素之前插入内容
insertBefore( )	$(A).before(B)等效$(B).insertBefore(A)

删除节点

1. remove( )
   所包含的后代节点将同时被删除，并返回一个指向已被删除的节点的引用；说明元素用remove( )删除后还可以继续使用
2. detach( )
   与remove( )相同的是：一样从DOM中去掉所匹配的元素
   不同的是：删除后重新使用时原来元素绑定的事件还在，使用remove( )的话，之前绑定的事件将失效
3. empty( )
   清空元素里的内容，元素自己本身的标签还在

复制节点

使用clone( )方法
若传递一个值为true的参数，可在复制元素的同时复制元素所绑定的事件

包裹节点

将某个节点用其他标记包裹起来

1. wrap( )

<strong>...</strong>
<strong>...</strong>

$("strong").wrap("<b></b>");

<b><strong>...</strong></b>
<b><strong>...</strong></b>

2. wrapAll( )

<strong>...</strong>
<strong>...</strong>

$("strong").wrapAll("<b></b>");

<b>
<strong>...</strong>
<strong>...</strong>
</b>

3. wrapInner( )

<strong>...</strong>
<strong>...</strong>

$("strong").wrapInner("<b></b>");

<strong><b>...</b></strong>
<strong><b>...</b></strong>

属性操作

1. 获取和设置属性

var p_txt = $("p").attr("title");//获取<p>的title属性
$("p").attr("title" , "your title");//设置单个属性
$("p").attr({"title" : "your title" , "title" : "test"});//设置多个属性

2. 删除属性

$("p").attr("title" , "your title");//设置单个属性
$("p").removeAttr("title");//删除tittle属性

样式操作

1. 获取和设置样式

$("p").attr("class" , "high");//替换原class为新class(high)

2. 追加样式

$("p").addClass("high");//给<p>元素追加新class(high)

3. 移除样式

$("p").removeClass("class0");//删除<p>元素class(class0)
$("p").removeClass("class1 class2");//删除<p>元素多个class(class1和class2)
$("p").removeClass( );//删除<p>元素所有class

4. 切换样式

$("p").toggleClass("high");//单击重复切换<p>元素的class(high)

5. 判断是否含有某个样式

$("p").hasClass("high");

设置和获取HTML，文本和值

1. html( )
2. text( )
3. val( )

获取和设置是同一个方法，用法类似attr( )

遍历节点

1. children( )
   取得匹配元素的子元素集合
2. next( )
   取得匹配元素后面紧邻的同辈元素
3. prev( )
   取得匹配元素前面紧邻的同辈元素
4. siblings( )
   取得匹配元素前后所有的同辈元素
5. closest( )
   取得最近的匹配元素，不匹配则向上查找父元素
6. parent( ),parents( )
   parent( )获得集合中每个匹配元素的父级元素
   parents( )获得集合中每个匹配元素的祖先元素

CSS-DOM操作

直接利用css( )方法获取元素样式属性

$("p").css("color");//获取样式颜色
$("p").css("opacity" , "0.5");//设置元素半透明
$("p").css("color" : "red" , "background" : "#888");//设置多个样式

获取，设置元素的高，宽

$("p").height( );//获取元素的高，元素页面中的实际高度，不带单位
$("p").height(100);//设置元素的高，默认单位(px)
$("p").width( );//获取元素的宽，元素页面中的实际宽度，不带单位
$("p").width("100px");//设置元素的宽

1. offset( )
   获取元素在当前视窗的相对偏移，包含offset.top和offset.left两个属性
2. position( )
   获取元素相对于最近的一个position样式属性设置为relative或absolute的相对偏移，包含position.top和position.left两个属性
3. scrollTop( )和scrollLeft( )
   获取元素的滚动条距离顶端和左侧的距离

---

作为一个目标而存在的东西，总是那么美丽而优雅