四、JQuery中的DOM操作
一种与浏览器，平台，语言无关的接口。使用该接口可以轻松地访问页面中所有的标准组件。
DOM Core：DOM Core 并不专属于 JavaScript，任何一种支持 DOM 的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种是用标记语言编写出来的文档，例如：XML。
HTML DOM：使用 JavaScript 和 DOM 为 HTML 文件编写脚本时，有许多专属于HTML-DOM的属性。
CSS-DOM：针对于CSS操作，在JavaScript中，CSS-DOM 主要用于获取和设置 style 对象的各种属性。
1.查找节点
请见上面的“基本选择器”。
2.创建节点
使用JQuery的工厂函数，创建一个新节点：var $newNode = $(“<p>你好</p>”);，然后将新节点插入到指定元素节点处。
3.插入节点
将新创建的节点，或获取的节点插入指定的位置。
“$node.append($newNode)”，向每个匹配的元素内部的结尾处追加结尾处。如，“$("p").append("<b>Hello</b>");”将"<b>Hello</b>"添加到"p"内部的结尾处。
“$newNode.appendTo($node)”，将新元素追加到每个匹配元素内部的结尾处。
“$node.prepend($newNode)”，向每个匹配的元素内部的结尾处追加开始处。如，“$("p").prepend("<b>Hello</b>");”将"<b>Hello</b>"添加到"p"内部的起始处。
“$newNode.prependTo($node)”， 将新元素追加到每个匹配元素内部的开始处。
“$node.after($newNode)”，向每个匹配的元素的之后插入内容，是并列兄弟。如，“$("p").after("<b>Hello</b>");”将"<b>Hello</b>"插入到"p"的后边。它们是兄弟关系。
“$newNode.insertAfter($node)”，将新元素插入到每个匹配元素之后。
“$newNode.before($node)”，向每个匹配的元素的之前插入内容。如，“$("p").before("<b>Hello</b>");”将"<b>Hello</b>"插入到"p"的前面，它们是兄弟关系。
“$node.insertBefore($newNode)”，将新元素插入到每个匹配元素之前。
注意：如果插入的节点是不是新创建的，插入将变成移动操作。所以，在插入这样的节点之前应该使用clone的节点。
4.删除节点
从DOM中删除所有匹配的元素。如，“$("p").remove(".hello");”删除所为class属性值为hello的p元素，还有它下面的所有元素。
从DOM中清除所有匹配的元素。如，“$("p").empty();”清除所有p元素，还有它下面的所有元素。
5.复制节点
克隆匹配的DOM元素。如，“$("p").clone();”返回克隆后的副本，但不具有任何行为。如果要将DOM的事件一起克隆，应该使用“$("p").clone(true);”。
6.替换节点
将所有匹配的元素都替换为指定的 HTML 或 DOM 元素。如，$("p").replaceWith("<b>Paragraph. </b>");，将所有p元素，替换为"<b>Paragraph. </b>"。
与replaceWith相返：$("<b>Paragraph. </b>").replaceAll("p");。
7.包裹节点
wrap()：将指定节点用其他标记包裹起来。该方法对于需要在文档中插入额外的结构化标记非常有用， 而且不会破坏原始文档的语义。如，“$("p").wrap("<div class='wrap'></div>");”。每个p元素被包裹到<div>中。
wrapAll()：将所有匹配的元素用一个元素来包裹。而wrap()方法是将所有的元素进行单独包裹。如，“$("p").wrapAll("<div></div>");”，将所有p元素包裹到<div>中。
wrapInner()：将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来。如，“$("p").wrapInner("<b></b>");”， <b>被每一个p元素包裹。
8.属性设置
attr()：获取属性和设置属性。
当为该方法传递一个参数时，即为某元素的获取指定属性。如，“$("img").attr("src");”，获取img元素的src属性值。
当为该方法传递两个参数时，即为某元素设置指定属性的值。如，“$("img").attr("src","test.jpg");”，设置img元素的src属性值为test.jsp。
jQuery 中有很多方法都是一个函数实现获取和设置。如：attr()，html()，text()，val()，height()，width()，css()等。
removeAttr()：删除指定元素的指定属性。
9.样式操作
可以通过“attr()”设置或获取css样式。
追加样式：addClass() 。如，“$("p").addClass("selected");”，向所有P元素中追加“selected”样式。
移除样式：removeClass() --- 从匹配的元素中删除全部或指定的class。如，“$("p").removeClass("selected");”，删除所有P元素中的“selected”。
切换样式：toggleClass() --- 控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。如，“$("p").toggleClass("selected");”，所有的P元素中，如果存在“selected”样式就删除“selected”样式，否则就添加“selected”样式。
判断是否含有某个样式：hasClass() --- 判断元素中是否含有某个 class，有返回 true； 否则返回 false。如，“$(this).hasClass("protected")”，判断当前节点是否有“protected”样式。
10.设置或获取HTML、文本和值
读取和设置某个元素中的 HTML 内容： html()，该方法可以用于 XHTML，但不能用于 XML 文档。
读取和设置某个元素中的文本内容：text()，该方法既可以用于 XHTML 也可以用于 XML 文档。
读取和设置某个元素中的值：val()，该方法类似 JavaScript 中的 value 属性。对于文本框，下拉列表框，单选框该方法可返回元素的值(多选框只能返回第一个值)。如果为多选下拉列表框，则返回一个包含所有选择值的数组。
11.常用遍历节点的方法
取得匹配元素的所有子元素组成的集合：children()。该方法只考虑第一层子元素而不考虑任何后代元素。
取得匹配元素后面紧邻的兄弟元素的集合(但集合中只有一个元素)：next()。
取得匹配元素前面紧邻的兄弟元素的集合(但集合中只有一个元素)：prev()。
取得匹配元素前后所有的兄弟元素: siblings()。
12.CSS-DOM操作
获取和设置元素的样式属性：css()。
获取和设置元素透明度：opacity()属性。
获取和设置元素高度，宽度：height()，width()。在设置值时，若只传递数字，则默认单位是px。如需要使用其他单位则需传递一个字符串，例如 “$(“p:first”).height(“2em”)”；
获取元素在当前视窗中的相对位移：offset()。它返回的对象包含了两个属性：top，left。该方法只对可见元素有效。
五、JQuery中的事件
1.加载DOM
在页面加载完毕后，浏览器会通过 JavaScript 为 DOM 元素添加事件。在常规的 JavaScript 代码中，通常使用 window.onload 方法，在JQuery 中使用$(document).ready() 方法。JQuery中的简化写法“$()”。在window.onload中注册事件时，只能在一个window.onload体中注册。但使用JQuery，可以在多个$(document).ready()或$()中注册。
2.事件绑定
对匹配的元素对指定的事件绑定。如，昨天我们在window.onload中绑定事件的方法：“$("p").onclick(function(){
alert( $(this).text() );
});”
在JQuery的$(document).ready()中可以这样绑定：
“$("p").click(function(){
alert( $(this).text() );
});”
使用bind()，可以这样绑定：
$("p").bind("click", function(){ alert( $(this).text() );
});
3.合成事件
hover()：模拟光标悬停时间。当光标移动到元素上时，会触发指定的第一个函数，当光标移出这个元素时，会触发指定的第二个函数。如，悬停效果：
$("td").hover( function () {$(this).addClass("hover");}, function () {$(this).removeClass("hover");});
toggle()：用于模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数，当再一次单击同一个元素时，则触发指定的第二个函数，如果有更多个函数，则依次触发，直到最后一个。如，设置元素的选择与非选中效果：
$("td").toggle( function () {$(this).addClass("selected");}, function () {$(this).removeClass("selected");});
使用toggle()而不传递参数，效果为切换元素的可见状态。
4.事件的冒泡
事件会按照 DOM 层次结构像水泡一样不断向上只止顶端。
解决：在事件处理函数中返回 false，会对事件停止冒泡。还可以停止元素的默认行为。
目前的所有UI交互或其事件，都支持这个特性。在自己的事件处理函数返回false将中止事件的继续向下传递。返回true事件继续向下传递。
5.事件对象的属性
事件对象：当触发事件时，事件对象就被创建了。在程序中使用事件只需要为处理函数添加一个参数。在事件处理函数中使用些参数。如，获取事件发生时，相对于页面的位置：event.pageX, event.pageY，event是事件处理函数的参数。
6.移除事件
移除某按钮上的所有click 事件：$(“btn”).unbind(“click”)
移除某按钮上的所有事件：$(“btn”).unbind();
one()：该方法可以为元素绑定处理函数。当处理函数触发一次后，事件立即被删除。即在每个对象上，事件处理函数只会被执行一次。
评论