JQuery中的DOM操作
引子
DOM: Document Object Model，文档对象模型，一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。
1．DOM操作的分类
1.1 DOM Core（核心）
适用任何适用标记语言编写出来的文档，如HTML、XML。
JavaScript中的getElementId(), getElementsByTabName(),getAttribute()和setAttribute()等都是DOM Core的组成部分
1.2 HTML-DOM
提供简明的记号来描述各种HTML元素的属性。 如：
document.forms//
element.src;//获取元素的src属性
1.3 CSS-DOM
CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是用来获取和设置style对象的各种属性。
2. JQuery中的DOM操作
2.1 查找节点
-1. 查找元素节点
$(“ul li:eq(1)”);//获取ul下第2个li节点
-2. 查找属性节点
$(“p”).attr(“title”);//获取p节点的title属性
2.2 创建节点
-1. 创建元素节点
//$(html)创建一个DOM对象，并包装成一个JQuery对象返回
var $liTag=$(“<li></li>”);
$(“ul”).append($liTag);//用append方法将新元素插入文档中
-2. 创建文本节点
var $liText=$(“<li>apple</li>”);
$(“ul”).append($liText);
-3. 创建属性节点—同文本节点一样，随元素节点一起创建
$(“<li title=’fruit’>apple</li>”)//
2.3 插入节点
|
方法 |
描述 |
示例 |
|
A.append(B) |
A的内部追加内容B (追加到内容后部) |
HTML：<p>Hello </p> JQuery: $(“p”).append(“<b>World</b>”) Result: <p>Hello <b>World</b></p> |
|
A.appendTo(B) |
将A追加到B的内容后面 |
HTML:<p>Hello </p> JQuery: $(“<b>World</b>”).appendTo(“p”) Result: <p>Hello <b>World</b></p> |
|
A.prepend(B) |
在A的内容前面追加B |
HTML：<p>World</p> JQuery: $(“p”).prepend(“<b>Hello </b>”) Result: <p></b>Hello </b>World</p> |
|
A.prependTo(B) |
将A追加到B内容的前面 |
HTML：<p>World</p> JQuery: $(“<b>Hello </b>”).prependTo(“p”) Result: <p></b>Hello </b>World</p> |
|
A.after(B) |
在A元素后面插入B |
HTML：<p>Hello </p> JQuery: $(“p”).after(“<b>World</b>”) Result: <p>Hello</p><b>World></b> |
|
A.insertAfter(B) |
将A插入到B元素的后面 |
HTML：<p>Hello </p> JQuery: $(“<b>World</b>”).insertAfter(“p”) Result: <p>Hello</p><b>World></b> |
|
A.before(B) |
在A元素的前面插入B |
HTML：<b>World</b> JQuery: $(“b”).before(“<p>Hello </p>”) Result: <p>Hello</p><b>World></b> |
|
A.insertBefore(B) |
将A插入到B元素的前面 |
HTML：<b>World</b> JQuery: $(“<p>Hello </p>”).insertBefore(“b”) Result: <p>Hello</p><b>World></b> |
2.4 删除节点
-1. remove()方法
$(“ul li:eq(1)”).remove();//删除ul下的第2个li元素
当某个节点用remove()方法删除后，该节点所包含的所有后代节点都将被删除。这个方法的返回值是被删除节点的一个引用，因此，可以在后面再使用这些元素。
$(“ul li”).remove(“li[title=apple]”);//传递参数选择性删除元素
-2. empty()方法
empty采用的是清空节点，它能清空元素内容及其所有的后代节点。元素本身的标签依据存在，不是严格的删除节点。
2.5 复制节点
-1. clone()方法
$("ul li").click(function(){
$(this).clone().appendTo("div ul");
})//当点击ul下的li元素时，将其clone到div下的ul下。
-2. clone(true)方法
参数true表示复制该节点的同时也复制该节点绑定的事件。
2.6 替换节点
-1. replaceWith()
将所有匹配的元素替换为指定的HTML元素或者DOM元素
$(“ul li:eq(1)”).replaceWith(“<li><b>no fruit</b></li>”);
-2. replaceAll()
作用同replaceWith()，位置颠倒
$("<li><b>no fruit</b></li>").replaceAll("li");
2.7 包裹节点
即将某个节点用其他标记包裹起来
-1. wrap()每个节点单独包裹
$(“strong”).wrap(“<b></b>”);//用<b>把strong元素包裹起来
如果b元素有文本，则strong被包裹在文本后面
-2. wrapAll()所有节点一起包裹，如果要包裹的节点没有在一起，会被移动到一起
$("li").wrapAll("<b>Bold</b>")
-3. wrapInner()
将每一个匹配元素的子内容(包括文本节点)用其他结构化的标记包裹起来
$("ul li:odd").wrapInner("<b></b>")
2.8 属性操作
-1. attr()方法获取和设置属性
$(“ul li:eq(1)”).attr(“title”);//获取属性
$(“ul li:eq(1)”).attr(“title”,”Your title”);//设置属性
$(“p”).attr({“title”:”your title”,”name”:”yourname”});设置多个属性
-2. removeAttr()方法删除属性
$(“p”).removeAttr(“title”);
2.9 样式操作
-1. 获取样式和设置样式
class也是一种属性，因此获取和设置class都可以通过attr()来完成
$(“p”).attr(“class”);//获取p元素的class
$(“p”).attr(“class”,”myclass”);//设置p元素的class
-2. addClass()追加样式
$(“p”).addClass(“myClass”);//相当于上一步的两部操作
-3. removeClass()移除样式
$(“p”).removeClass(“myClass”);//移除myClass
$(“p”).removeClass();//移除所有class
-4. toggleClass()切换样式
如果类名存在则删除它，如果类名不存在则添加它。
$(“p”).toggleClass(“myClass”);
-5. hasClass()判断是否含有某个样式
if($(“p”).hasClass(“myClass”))//等价于$(“p”).is(“.myClass”)JQuery内部原理
2.10 设置和获取HTML、文本和值
-1. html()方法 类似于JavaScript中的innerHTML属性，用来读取或设置某个元素的HTML内容，可用于XHTML，但不能用于XML
$(“p”).html();//
$(“p”).html(“<b>html content</b>”);
-2. text()方法 ≈JavaScript.innerText，用来读取或设置某个元素的文本内容
$(“p”).text();//
$(“p”).text(“Hello world!”);
Note:1) JavaScript.innerText不支持FireFox；
2) text()对XHTML和XML文档都有效
-3. val()方法 ≈JavaScript.value，用来设置和获取元素的值
$(“#address”).val();//获取value值
$(“#address”).val(“tiangjingchen@gmail.com”);//设置value值
2.11 遍历节点
-1. children()方法，取得匹配元素的子元素集合。
$(“p”).children();//children只考虑子元素而不考虑后代元素
-2. next()方法，取得匹配元素后面紧邻的同辈元素
$(“p”).next();//取得的元素包括其后代元素
-3. prev()方法，取得匹配元素前面紧邻的同辈元素
$(“ul”).prev();
-4. siblings()方法，取得匹配元素前后的同辈元素
$(“ul”).siblings();
-5. closest()方法，取得最近的匹配元素
2.11 CSS-DOM操作
即读取和设置style的各种属性。style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式信息。通过JQuery却可以轻而易举的获取到。
-1. css()方法，获取和设置元素的属性
$(“p”).css();//获取p元素的属性
$(“p”).css(“color”,”red”);//设置p元素的样式颜色为红色
$(“p”).css({“fontSize”:”30px”,”backgroundColor”:”blue”});//设置多个属性值
Note:1). 如果值是数字，则自动转为像素值；
2). css()方法中，如果属性中带有”-”符号，如font-size，background-color，如果设置这些属性值的时候不带引号，则要用驼峰式写法，如:
$(“p”).css(“fontSize”,”30px”);
如果带上引号，既可以写成”font-size”，也可以写成”fontSize”，建议带引号
$(“p”).css(“opacity”,”0.5”);//设置透明度
-2. height & width
//取得匹配元素的高度值(px)(类似$(“p”).css(“height”)，但css与样式有关)
$(“p”).height();
$(“p”).width();
$(“p”).height(100);//设置高度为100px
$(“p”).width(“10em”);//设置宽度为10em
-3. offset()方法
获取元素在当前视窗的相对偏移，返回对象包含top和left两个属性。只对可见元素有效
var offset = $(“p”).offset();
var top = offset.top;
var left = offset.left;
-4. position()方法
获取元素相对于最近一个position样式设置为relative或absolute的祖父节点的偏移，返回对象包含top和left属性。
-5. scrollTop()方法和scrollLeft()方法
获取元素的滚动条距顶端的距离和距左侧的距离。