jQuery学习--Chapter04小结(jQuery操作DOM)
1.DOM操作
(1). DOM操作分类
1). DOM Core
DOM Core 不是JavaScript 的专属品，任何一种支持DOM的编程语言都可以使用它。它的用途不仅限于处理一种使用标记语言编写出来的文档， 如 HTML。
2). HTML-DOM
在使用 JavaScript 和DOM为HTML文件编写脚本是，有许多专属于HTML-DOM 的属性。HTML-DOM出现的比DOM Core更早，它提供了一些更加简明的标记来描述各种HTML元素的属性。如document.forms , 获取表单对象
3). CSS-DOM
CSS-DOM 是针对CSS操作。 在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性，即CSS属性。
(2). jQuery中的DOM操作
jQuery中的DOM操作主要分为样式操作、文本和value属性值操作、节点操作，节点操作中又包含属性操作、节点遍历和CSS-DOM 操作。
2.样式操作
(1). 直接设置样式值
在jQuery 中，可以使用css()方法为指定的元素设置样式值。其语法如下：
css(name,value) //设置单个属性
css({name:value,name:value,name:value}) //同时设置多个属性
name:CSS属性的名称，value:CSS属性的值
(2). 追加样式和移除样式
1). 在jQuery中可以使用addClass()方法为元素追加类样式。
addClass(class) //追加单个样式 addClass(class1 class2 class3 ... classN) //追加多个样式
2). 在jQuery中可以使用removeClass()方法删除元素已有的样式
remove(class) //移除单个样式 remove(class1 class2 class3 ... classN) //移除多个样式
(3). 切换样式
使用toggle()方法可以切换不同元素的类样式
toggle(class)
3.内容操作
(1). HTML代码操作
可以使用html() 对HTML 代码进行操作，该方法类似于传统 JavaScript 中 innerHTML.
html([content])
content：规定被选元素的新内容，可以包含HTML标签 ，可选。
(2). 标签内容操作
可以使用text() 方法获取或设置元素的文本内容。
text([content])
content：规定被选元素的新内容，不可以包含HTML标签 ，可选。
(3). 属性值操作
val() 方法用于获取元素value属性值，常用语表单
val([value])
value：规定被选元素的新内容。
4. 节点与属性操作
(1). 节点操作
1). 查找节点 可以使用jQuery选择器
2). 创建节点元素
$(selector) //selector:选择器。使用jQuery选择器匹配元素 $(element) //element:DOM对象。以DOM元素创建jQuery对象 $(html) //html:HTML代码。使用HTML字符串创建jQuery对象
3).插入节点
//内部插入
append(content) //向所选择的元素内部插入内容
appendTo(content) //把所选择的元素追加到另一个指定的元素集合中
prepend(content) //向每个选择的元素内部前置内容
prependTo(content) //将所有匹配元素前置到指定的元素中
//外部插入
after(content) //在每个匹配的元素之后插入内容
insertAfter(content) //将所有匹配元素插入到指定元素的后面
before(content) //向所选择的元素外部前面插入内容
insertBefore(content) //将所匹配的元素插入到指定元素的前面
4). 删除节点
$(selector).remove([expr]) //完全删除 $(empty) //清空节点，保留元素的绑定事件、附加的数据。
5). 替换节点
在jQuery中，如果需要替换某个节点，可以使用replaceWith()方法和replaceAll()方法。
6). 复制节点
在jQuery中，若要对节点进行复制，则可以使用clone()方法。该方法能够生成被选元素的副本，包含子节点，、文本和属性。
(2).属性操作
1). 获取与设置元素属性
$(selector).attr([name]) //获取属性值
$(selector).attr({[name1:value1],[name2:value2]...[nameN:valueN]}) //设置多个属性值
2). 删除元素属性
$(selector).removeAttr(name) //删除属性
5. 节点遍历
(1). 遍历子元素
$(seletor).children([expr]) //获取子元素
(2). 遍历同辈元素
$(seletor).next([expr]) //用于获取紧邻匹配元素之后的元素 $(seletor).prev([expr]) //用于获取紧邻匹配元素之前的元素 $(seletor).siblings([expr]) //用于获取位于匹配元素前面和后面的所有同辈元素
(3). 遍历前辈元素
$(seletor).parent([expr]) //获取当前匹配元素集合中每个元素的父级元素 $(seletor).parents([expr]) //获取当前匹配元素集合中每个元素的祖先元素
6.CSS-DOM操作
$(selector).css() //设置或返回匹配元素的样式属性 $(selector).height([value]) //设置或返回匹配元素的高度 $(selector).width([value]) //设置或返回匹配元素的宽度 $(selector).offset([value]) //返回以像素为单位的top和left坐标 $(selector).offsetParent() //返回最近的已定位祖先元素 $(selector).scrollLeft([position]) //设置或返回匹配元素相对滚动条左侧的偏移 $(selector).scrollTop([position]) //设置或返回匹配元素相对滚动条顶部的偏移