jQuery之第3章 jQuery中的DOM操作

DOM操作分为3个方面：

　　DOM Core（核心）、HTML-DOM 和 CSS-DOM

1、查找节点：

　　查找元素节点：

　　　　var $li = $("ul li:eq(1)");

　　　　var li_txt = $li.text();

　　查找属性节点：

　　　　var $p = $("p");

　　　　var p_title = $p.attr("title");

　　　　注意： attr() 获取指定元素节点属性的值。

2、创建节点：

　　创建元素节点：

　　　　var $li = $("<li></li>");

　　创建文本节点：

　　　　var $li = $("<li>香蕉</li>");

　　创建属性节点：

　　　　var $li = $("<li title="香蕉">香蕉</li>");

3、插入节点：

　　（1）append() ：向每个匹配的内部追加内容

　　（2）appendTo()

　　（3）prepend() ：向每个匹配的元素内部前置内容

　　（4）prependTo()

　　（5）after() ：在每个匹配的元素之后插入内容

　　（6）insertAfter()

　　（7）before() ：在每个匹配的元素之前插入内容

　　（8）insertBefore()

　　注意：这些插入节点的方法，不仅可以插入新的节点，也可以对存在的节点进行移动。

4、删除节点：

　　（1）remove()

　　（2）detach()

　　（3）empty()

5、复制节点：

$("ul li").click(function(){
    $(this).clone().appendTo("ul") ;
})

　　注意：复制节点使用 clone() 方法，clone()：作用是复制新元素并不具有任何的行为。参数true，clone(true)：作用是复制元素的同时，复制元素中所绑定的事件。

6、替换节点：

　　（1）replaceWith() ：将所有匹配的元素都替换成指定的HTML或者DOM元素。

　　（2）replaceAll() ：该方法和上述方法作用相同，只是颠倒了replaceWith()的操作。

7、包裹节点：

　　（0）wrap() ：将所有匹配的元素进行单独包裹。

　　（1）wrapAll() ：将所以匹配的元素用一个元素来包裹。

　　　　注意：如果被包裹的元素中有其他元素，其他元素会被放到包裹元素之后。

　　（2）wrapInner() ：将每一个匹配的元素的子内容（包含文本节点）用其他结构化的标记包裹起来。

8、属性操作：

　　attr() ：获取或设置元素属性。

　　removeAttr() ：删除元素属性。

　　注意：jQuery1.6中新增了prop(),removeProp()，分别用来获取匹配的元素集中的第一个元素的属性值和删除设置的属性值。

　9、样式操作：

　　（1）attr() ：获取或设置样式。

　　（2）addClass() ：追加样式。

　　（3）removeClass() :移除样式，作用是从匹配的元素中删除全部或指定的class。

　　（4）切换样式：

　　　　toggle() ：交替执行代码；主要是控制行为上的重复切换。

　　　　toggleClass() ：主要是控制样式上的重复切换，如果类名存在，则删除它，如果类名不存在则添加它。

　　（5）判断是否含有某个样式：

　　　　hasClass() ：判断元素中是否含有指定的class，如果有返回true,否则返回false。

　　　　注意：$("p").hasClass("abc"); 等价于 $("p").is("abc");

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

　　（1）html() ：设置和获取指定的元素的中的HTML内容。（类似于JavaScirptz中的innerHTML属性）

　　　　注意：html()方法可以用于XHTML文档，但不能用于XML文档。

　　（2）text() ：设置和获取指定元素中的文本内容。（类似于JavaScirptz中的innerText属性）

　　　　注意：JavaScirptz中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所以的浏览器。

　　　　　　   text()方法对HTML文档和XML文档都有效。

　　（3）val() ：设置或获取元素的值。（文本框、下拉列表、单选框）都可以返回元素的值；如果元素为多选，则返回一个包含所有选择的值的数组。（类似于JavaScirptz中的　　　　　　　　value 属性）

　　　　注意：this 指向当前的文本框，“this.defaultValue” 就是当前文本框的默认值。

　　　　　　　focus() ：处理获得焦点时的事件。

　　　　　　　blur() ：处理失去焦点时的事件。

11、遍历节点：

　　（1）children() ：用于取得匹配元素的子元素集合。（只考虑子元素，不考虑后代元素）

　　（2）next() ：用于取得匹配元素后面紧邻的同辈元素。

　　（3）prev() ：用于取得匹配元素前面紧邻的同辈元素。

　　（4）siblings() ：用于取得匹配元素前后所有的同辈元素。

　　（5）closest() ：取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配直接返回元素本身。如果不匹配，向上查找父元素，逐级向上直到找到匹配的选择器元素。如果　　　　　　　　　　什么都没有找到，则返回一个空的jQuery对象。

　　（6）pareat()、pareats()、closest() 的区别：

　　　　注意：jQuery中遍历节点的方法还有很多，如：find()、filter()、nextAll()、prevAll()，可查阅jQuery文档或手册获得更多。

12、CSS-DOM操作：

　　$("p").css("opacity" , "0.5");　　//设置半透明

　　$("p").css("height");　　//设置或获取高度，和css设置有关，可能是“auto”，也有可能是字符串“10px”。

　　$("p").height(100);　　//设置p元素的高度为100px

　　$("p").height("100em");　　//设置p元素的高度为100em

　　注意：jQuery1.2之后的height()方法可以用来获取widows或document的高度。

　　区别：css() 获得的高度值和css的设置有关，可能是“auto”，也有可能是字符串“10px”。而height()获得的高度则是元素在页面中的实际高度，与样式的设置无关，并且不带　　　　  单位。

　　此外，在CSS-DOM中，关于元素定位有几个经常使用的方法，如下：

　　（1）offset() ：获取元素在当前视窗中的相对偏移。返回的对象有两个属性，即 top 和 left，只对可见元素有效。

　　　　var offset = $("p").offset();

　　　　var left = offset.left;

　　　　var top = offset.top;

　　（2）position() ：获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset一样，返回包括两个属性，即 top 和 left。

　　　　var position = $("p").position();

　　　　var left = position.left;

　　　　var top = position.top;

　　（3）scrollTop() ：获得元素的滚动条距离顶端的距离。

　　　　  scrollLeft() ：获得元素的滚动条距离左侧的距离。

　　　　var $p = $("p");

　　　　var scrollTop = $p.scrollTop();

　　　　var scrollLeft = $p.scrollLeft();

　　　　$("textarea").scrollTop(300);

　　　　$("textarea").scrollLeft(300);