04-jQuery的DOM操作

第四节：JQuery中DOM操作

1、DOM是一种与浏览器、平台|语言无关的接口，使用该接口可以轻松的访问 页面中的所有的标准组件

---

2、DOM操作的分类
DOM Core
DOM core并不专属于JavaScript，任何支持DOM的程序都可以使用
JavaScript 中的getElementByID()、 getElementsByTagName()、 getAttribute()、 setAttribute()等方法都是DOM Core的组成部分
HTML-DOM
HTML -DOM的出现比DOM-Core还要早，它提供一些更简明的标志来描述HTML元素的属性
比如：使用HTML-DOM来获取某元素的src属性的方法：element.src

---

3、CSS-DOM
针对CSS的操作。在JavaScript中，主要用于获取和设置style对象的各种属性，通过改变style对象的属性，使网页呈现不同的效果

---

4、查找节点
查找属性节点 attr() 可以获取各属性的值

---

5、创建节点
$(html)：根据传递的标记字符串，创建DOM对象

---

6、插入节点
方法 说明
append() 向每个匹配元素内部追加内容
appendTo() 颠倒append()的操作
prepend() 向每个匹配元素的内容内部前置内容
prependTo() 颠倒prepend()的操作
after() 向每个匹配元素之后插入内容
insertAfter() 颠倒after()的操作
before() 在每个匹配元素之前插入内容
insertBefore() 颠倒before()的操作

---

7、删除节点
jQuery提供了三种删除节点的方法 remove() 、detach()、 empty()

---

8、remove()方法
当某个节点用此方法删除后，该节点所包含的所有后代节点将同时被删除，用remove()方法删除后，还是可以继续使用删除后的引用
detach()
和remove()方法一样，也是从DOM中去掉所有匹配的元素，与remove()不同的是，所有绑定的事件、附加的数据等，都会被保留下来
empty()
empty()方法并不是删除节点，而是清空节点，它能清空元素中所有后代节点

---

9、复制节点
使用clone()方法来完成
在clone()方法中传递一个参数true，同时复制元素中所绑定的事件

---

10、替换节点
jQuery提供相应的方法 replaceWidth()

---

11、样式操作
获取样式和设置样式 attr()
追加样式 addClass()
移除样式 removeClass()
切换样式
toggle()方法：只要是控制行为上的重复切换（如果元素是显示的，则隐藏；如果元素原来是隐藏的，则显示）
toggleClass()方法：控制样式上的重复切换（如何类名存在，则删除它，如果类名不存在，则添加它）
判断是否含有某个样式
hasClass()：可以用来判断元素是否含有某个class,如有返回true 该方法等价于is()

---

12、设置和获取HTML、文本和值
html()
此方法类似JavaScript中innerHTML属性，可以用来读取和设置某个元素中的HTML内容

text()方法
此方法类型JavaScript中innerHTML，用来读取和设置某个元素中的文本内容

val()方法
此方法类似JavaScript中的value属性，用来设置获取元素的值。无论是文本框、下拉列表还是单选框，都可以返回元素的值，如果元素多选，返回一个包含所有选择的值的数组

遍历节点
children()方法
该方法用来取得匹配元素的子元素集合
childre()方法只考虑子元素而不考虑其他后代元素

next()方法
该方法用于取得匹配元素后面紧邻的同辈元素

prev()方法
用于匹配元素前面紧邻的同辈元素

siblings()方法
用于匹配元素前后所有的同辈元素

parent()方法
获得集合中每个元素的父级元素

parents()方法
获得集合中每个元素的祖先元素

CSS DOM操作
CSS DOM技术简单的来说就是读取和设置style对象的各种属性
用css()方法获取元素的样式属性，可以同时设置多个样式属性
CSS DOM中关于元素定位有几个常用的方法

offset()方法
它的作用是获取元素在当前视窗的相对偏移其中返回的对象包含两个属性，即top和left，他只对可见元素有效

position()方法
获取相对于最近的一个position()样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，他返回的对象也包括两个属性，即top和left

scrollTop()方法和scrollLeft方法
这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离