使用jquery操作DOM对象
使用jQuery遍历DOM节点
使用jQuery操作CSS-DOM
节点属性操作：attr() 、removeAttr()
遍历操作：遍历子元素、遍历同辈元素和遍历前辈元素
1、DOM操作分类
DOM操作分为三类：
- DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
- HTML-DOM：用于处理HTML文档，如document.forms
- CSS-DOM：用于操作CSS，如element.style.color="green"
JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持
2、jQuery中的DOM操作
jQuery对JavaScript中的DOM操作进行了封装，使用起来也更简便
jQuery中的DOM操作可分为：
- 样式操作
- 内容及Value属性值操作
- 节点操作
- 节点属性操作
- 节点遍历
- CSS-DOM操作
①使用jQuery操作CSS样式——css()、 addClass()、 removeClass()、 toggleClass()
①使用css()为指定的元素设置样式值
②追加和移除样式
addClass(class)或addClass(class1 class2 … classN);//追加样式
removeClass(“style2 ”)或removeClass("style1 style2 ");//移除样式
③切换样式：toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
toggleClass(class);
②使用jQuery操作文本与属性值内容——html()、 text()、 val()
①HTML代码操作：html()可以对HTML代码进行操作，类似于JS中的innerHTML
②文本操作：text()可以获取或设置元素的文本内容
html()和text()的区别
|
语法 |
参数 |
功能 |
|
html() |
无参数 |
用于获取第一个匹配元素的HTML内容或文本内容 |
|
html(content) |
content参数为元素的HTML内容 |
用于设置所有匹配元素的HTML内容或文本内容 |
|
text() |
无参数 |
用于获取所有匹配元素的文本内容 |
|
text (content) |
content参数为元素的文本内容 |
用于设置所有匹配元素的文本内容 |
③Value值操作：val()可以获取或设置元素的value属性值
③使用jQuery操作DOM节点——查找、创建、替换、复制和遍历
jQuery中节点操作主要分为：
- 查找节点
- 创建节点
- 插入节点
- 删除节点
- 替换节点
- 复制节点
①创建节点元素
工厂函数$()用于获取或创建节点
- $(selector)：通过选择器获取节点
- $(element)：把DOM节点转化成jQuery节点
- $(html)：使用HTML字符串创建jQuery节点