使用jQuery操作DOM（进阶）

一、学习目的

使用jQuery操作CSS样式

使用jQuery操作网页元素

使用jQuery操作文本与属性值内容

使用jQuery操作DOM节点

使用jQuery遍历DOM节点

使用jQuery操作CSS-DOM

二、jQuery中的DOM操作

DOM操作分类：

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()

HTML-DOM：用于处理HTML文档，如document.forms

CSS-DOM：用于操作CSS，如element.style.color="green"

jQuery中的DOM操作（元素和节点的含义大同小异，之后再做细分）：

样式操作：

使用css()为指定的元素设置样式值或获取样式值。

示例 ：$(this).css("border","5px solid #f5f5f5");

     $(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"}); 红色部分是设置透明度，取值是0~1。

addclass（）追加样式，removeclass（）移除样式。两者的中间取值在“”中间加样式名字。

toggleclass（）模拟了addclass（）和removeclass（）实现了样式切换的过程。

hasclass（）方法用来判断是否包含指定的样式，中间的参数和addclass（）一样的。

内容及Value值操作：

html代码操作：html()可以对HTML代码进行操作，类似于JS中的innerHTML，这是会自动解析html代码的。

标签内容操作：text（）可以获取或者设置元素的文本内容，这是不会自动解析html代码的。

属性值操作：val（）可以获取或者设置元素的value属性值。

节点操作（查找节点、创建节点、插入节点、删除节点、替换节点、复制节点）：

工厂函数$()用于获取或创建节点。     var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

元素内部插入子节点：

append（）：$(A).append(B)表示将B追加到A中（B在A的后面）。

prepend（）：$(A). prepend (B)表示将B前置插入到A中（B在A的前面）。

元素外部插入同辈节点：

after（）：$(A).after (B)表示将B插入到A之后。

before（）：$(A). before (B)表示将B插入至A之前。

remove（）：删除整个节点。    $(selector).remove([expr]);

empty（）：删除节点里面的内容。       $(selector).empty();

detach（）：删除整个节点，但是保留元素的绑定事件、附加的事件。（这个一般用的比较少）

replacewith（）：用于替换某个节点 。   $(".gameList li:eq(2)").replaceWith($newNode1);

replaceall（）：用于替换某个节点。    $($newNode1).replaceAll(".gameList li:eq(2)");

clone（）：用于复制节点，参数true或false，true复制事件处理，false时反之即复制节点之前的事件是否在复制后的节点上生效。

节点属性操作：

attr（）：用来获取与设置节点属性。    $(".contain img").attr({width:"200",height:"80"});

removeattr（）：用来删除元素的属性。    $(".contain img").removeAttr("alt");

节点遍历：

children（）：方法可以用来获取元素的所有的子元素。

next（）：用于获取紧邻匹配元素之后的元素（同辈元素。

prev（）：用于获取紧邻匹配元素之前的元素（同辈元素）。

slibings（）：用于获取匹配元素前后的所有同辈元素。

parent（）：获取元素的父级元素。

parents（）：获取元素的祖先级元素。

each（）：规定为每个匹配元素规定运行的函数。

end（）：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

$(".gameListli").first().css("background","#b8e7f9").end().last().css("background","#d3f4b5");

class值为gameListli节点的最后一个子节点变背景颜色。

CSS-DOM操作：

css()：设置或返回匹配元素的样式属性。

height([value])：设置或返回匹配元素的高度。

width([value])：设置或返回匹配元素的宽度。

offset([value])：返回以像素为单位的top和left坐标。仅对可见元素有效。

offsetParent( )：返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为                                    relative、absolute或fixed的元素。

position( )：返回第一个匹配元素相对于父元素的位置。

scrollLeft([position])：参数可选。设置或返回匹配元素相对滚动条左侧的偏移。

scrollTop([position])：参数可选。设置或返回匹配元素相对滚动条顶。

三、总结

       这是对于jQuery操作DOM对象方法的一系列补充，使得对于节点的获取和设置更加的多样，这样就可以做一个好看、交互性强的页面。还是那句话，多练。