jQuery中的DOM操作
一:DOM的定义:
是Document Object Model的缩写,是文档对象模型，是一种与浏览器、平台、语言无关的接口。使我们能够轻松的获取和操作网页中的数据、脚本和表现层对象
二DOM的作用:DOM解决Netscape的JavaScript和Microsoft JScript之间的冲突,给与了web设计师和开发者一套标准的方法。
三:DOM操作的分类:
(1)DOM Core(核心):DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它，它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档。
(2)HTML DOM:.HTML_DOM提供一些更简洁的记号来描述各种HTML元素属性,可以获取某些对像以及属性，只能用来处理web文档.
(3)CSS DOM:CSS_DOM主要用来获取设置style对象的各种属性，通过改变style对象的属性来实现网页的不同效果。
四:jQuery中的DOM操作:
（1)查找节点:
查找元素节点:
1. 获取指定的标签节点 $(“上级标签 标签:eq(“标签索引”)
2. 获取标签节点$(“标签”)
3. 获取标签节点文本text()
查找属性节点:
利用attr()方法来获取它的各种属性的值。Attr()里的参数是一个时：是要查询的属性的名称，也可以是两个。
1. 获取标签节点
2. 获取标签节点属性:方法attr()
(2)创建节点:
创建元素节点
注意:(1)动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中(需要append()方法)。
(2)当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。
创建文本节点
创建文本节点就是在创建元素节点时直接把文本内容写出来，然后用append()添加到文档中。
创建属性节点
创建属性节点与创建文本节点类似，也是在创建元素节点时一起创建。
(3)插入节点:
方法如下:
方法 描述
append() 在每个匹配的元素的内部追加内容
appendTo() 将所有匹配的元素追加到指定的元素中
prepend() 向每个匹配的元素内部前置内容
prependTo() 将所有匹配的元素前置到指定的元素中
after() 在每个匹配的元素之后插入内容
insertAfter() 将所有匹配的元素之后插入到指定元素的后面
before() 在每个匹配的元素之前插入内容
insertBefore() 将所有匹配的元素插入到指定的元素的前面
(4)删除节点:
方法1:
remove(), 使用remove()方法删除后,该节点所包含的所有后代节点将同时被删除,该方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。
方法2:
empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。
(5)复制节点:
复制节点也是常用的DOM操作之一,在clone()方法中传播了一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件。
(6)替换节点:
方法1:
replaceWith()方法的作用是将所有匹配的元素的替换成指定的HTML 或者 DOM元素.
方法2:
replaceAll()方法与replaceWith()方法的作用相同,只是颠倒了replaceWith()操作。
注意:如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件。
(7)包裹节点:
包裹节点将某一个节点用其他标记包裹起来.
方法1:
wrap()是将所有的元素进行单独的包裹(将匹配的元素逐个进行包裹).
方法2:
wrapAll()方法是将所有匹配的元素用一个元素来包裹.
方法3
:wrapInner()方法是将每一个匹配的元素的子内容【包括文本节点】用其他结构化的标记包裹起来(是包裹匹配元素的文本).
注释:wrapAll()与wrapInner()两者的区别在于：前者是将所有匹配元素用一个元素来包裹，后者是将每一匹配的子内容用其他元素标记起来.
(8)属性操作:
方法1:
attr()获取或设置属性，如果要获取某一元素的某一属性，只需要给attr()方法传递一个属性参数即可.
方法2:
removeAtte(),在某些情况下,需要删除文档中的某个元素的特点属性,使用removeAfter()方法。
(9)样式操作:
获取样式和设置样式:
attr()方法,用于获取标签元素的属性，也可以用于设置标签元素的属性值,是将原来的属性替换为新的属性，而不是追加。
追加样式:
在jQuary中,使用addClass()方法追加样式,如果给一个元素添加了多个Class值，那么就相当于合并了他们的样式.如果有不同的class设定了同一样式属性,则后者覆盖前者。
移除样式:
removeClass()方法与addClass()方法相反，可以从匹配的元素中删除全部或者指定的class.
切换样式:
jQuery提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。
判断是否含有某个样式:
hasClass()可以用来判断元素是否含有某个class,如果有,则返回true,否则返回false.
(10)设置和获取HTML,文本和值 获取HTML:
html()方法获取,此方法类似于Javascript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容. 文本值:
text()方法设置文本的值,此方法类似于Javascript中的innerText属性，可以用来读取或者设置某个元素中的文本元素。
获取值: val()方法获取值,此方法类似于JavaScript中的value属性，可以用来设置和获取元素的值，无论元素是文本框、下拉列表还是单选框，它都可以返回元素的值，如果元素为多选，则返回一个包含所有选择的值的数组.
注释:Html()、text()、val()区别
(1)HTML:取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String 。
(2)设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象.
(3)TEXT：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String.
(4)VAL:获得第一个匹配元素的当前值.
(11)遍历循环
方法children(),用于取得匹配元素的子元素集合。注释:children()方法只考虑子元素而不考虑任何后代元素。
方法next(),用于取得元素后面紧邻的同辈元素(只有一个).
方法prev(),用于取得元素前面紧邻的同辈元素(只有一个).
方法siblings(),用于取得匹配元素前后所有的同辈元素.
方法closest(),用来取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素如果什么都没找到则返回一个空的jQuery对象.
其它遍历循环的方法:
find(),搜索所有与指定表达式匹配的元素.
filter(),筛选出与指定表达式匹配的元素集合.
not(),删除与指定表达式匹配的元素.
add(),把与表达式匹配的元素添加到jQuery对象中.这个函数可以用于连接分别与两个表达式匹配的元素结果集.
Slice(),选取一个与表达式匹配的子集.
nextAll(),选择一个元素后面所有的兄弟节点.
prevAll(),选择一个元素前面所有的兄弟节点.
parent(),取一个包含着所有匹配元素span的唯一父元素的元素集合 .
parents(),取一个包含着所有匹配元素span的祖先元素的元素集合(不包含根元素).
注意:这些遍历DOM方法有一个共同点，都可以使用jQuery表达式作为它们的参数来筛选元素。
五.CSS DOM操作
(1).CSS()方法,用css()方法获取元素的样式属性.
注意:无论color属性是外部CSS导入，还是直接拼接在HTML元素里(内联)，css()方法都可以获取到属性style里的其他属性的值,也可以直接利用css（）方法设置某个元素的单个样式.
作用:1.获取元素的样式属性
2.属性style里的其他属性的值
3.设置某个元素的单个样式
4.可以同时设置多个样式属性
(2)设置透明度的属性:opacity
(3).获取某个元素的高度的方法height(),还有获取某个元素的height属性。
作用:height()：
取得匹配元素当前计算的高度值(px)
(4)css()方法与height()方法的区别:
css():获取的高度值与样式的设置有关，可能会得到"auto",也可能得到"10px"之类的字符串.
height():获取的高度值则是元素在页面中的实际高度，与样式的设置无关，并且不带单位.
与height()方法对应的还有一个width()方法，它也可以取得匹配元素的宽度值（px）用法和height()一样.
(5)offset():获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性（top和left），它只对可见元素有效.
作用:offset()：
获取元素在当前视窗的相对偏移.
(6)position():获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性(top和left). 作用:position():
获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移.
(7)scrollTop()方法和scrollLeft()方法:这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离
作用:这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离.
