使用jQuery操作 DOM

DOM操作分为三类：

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

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

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

注释：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

设置和获取样式值：{

}

追加和移除样式：{

追加样式：

移除样式：

}

切换样式：{

toggleClass()：

模拟了addClass()与removeClass()实现样式切换的过程

$(selector).toggleClass(class) ;

}

判断是否含指定的样式：{

hasClass( )方法来判断是否包含指定的样式

$(selector). hasClass(class);

}

HTML代码操作：{

html()可以对HTML代码进行操作，类似于JS中的innerHTML

}

标签内容操作{

text()可以获取或设置元素的文本内容

}

html( ) 和text( )方法的区别：{

}

属性值操作：{

val()可以获取或设置元素的value属性值

}

节点操作：{

创建节点元素：{

工厂函数$()用于获取或创建节点

1）$(selector)：通过选择器获取节点

2）$(element)：把DOM节点转化成jQuery节点

3）$(html)：使用HTML字符串创建jQuery节点

}

插入节点：{

元素内部插入子节点：

元素外部插入同辈节点：

}

删除节点：{

jQuery提供了三种删除节点的方法:

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

empty()：清空节点内容 $(selector).empty();

detach()：删除整个节点，保留元素的绑定事件、附加的数据

}

替换节点:{

replaceWith()和replaceAll()用于替换某个节点：

}

复制节点：{

}

}

属性操作：{

获取与设置元素属性：{

attr()用来获取与设置元素属性

}

删除元素属性：{

removeAttr()用来删除元素的属性

}

}

节点遍历：{

遍历子元素：{

children()方法可以用来获取元素的所有子元素

}

遍历同辈元素：{

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

}

遍历前辈元素：{

jQuery中可以遍历前辈元素 ：

parent()：获取元素的父级元素

parents()：元素元素的祖先元素

注：parents(“selector”)可以选择某个祖先元素

}

find()、filter()

find：去找子元素

filter()：过滤当前元素

each( ) ：规定为每个匹配元素规定运行的函数

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

}

CSS-DOM操作{

除css()外，还有获取和设置元素高度、宽度等的样式操作方法

}