Jquery(dom操作)学习

DOMCore并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。JavaScript中的getElmentById()、getElementsByTagName()、getAttribute()和setAttribute()等方法，这些都是DOMCore的组成部分。

HTML-DOM的出现甚至比DOMCore还要早，它提供了一些更简明的记号来描述各种HTML元素的属性
document.forms
element.src

CSS-DOM在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。

jquery中的DOM操作

查找节点

1. 查找元素节点text()
2. 查找属性节点attr('title')

创建节点

1.创建元素节点 $(htmlString)
2.创建文本节点 $("<li>香蕉</li>")香蕉就是创建的文本节点
3.创建属性节点 $("<li title='香蕉'>香蕉</li>")title='香蕉’就是创建的属性节点

插入节点

/**成对出现 B追加到A, A追加到B中 */
append $(B)appendTo(A) prepend() prependTo() after() insertAfter() before() insertBefore()

删除节点

1.remove()方法 $('ul li:eq(1)').remove()
2.detach()方法 $('ul li:eq(1)').detach() //重新追加此元素，发现它之前绑定的事件还在
3.empty()方法 //清空元素的内容

复制节点

1. clone(isCloneEvent)

替换节点

1. replaceWith() //将所有匹配元素替换成指定的HTML或者Dom元素
2. replaceAll() 颠倒了上方的操作

包裹节点

1. wrap() 将所有元素进行==单独==的包裹
2. wrapAll() 将匹配的所有元素整个包裹,包裹多个元素间有其他元素，会放到包裹元素之后
3. wrapInner() 将匹配的元素的子内容用其他结构化标记包裹起来

属性操作

1.获取和设置属性 attr
2.删除属性 removeAttr

样式操作

1.获取和设置样式 attr(‘class’,?className)
2.追加样式 addClass()
3.移除样式 removeClass()
4.切换样式 toggleClass()// class的值会在myClass 和myClass anthor之间切换
5.判断是否含有某个样式 hasClass()

设置和获取HTML、文本和值

1.html方法
2.text方法
3.val方法

遍历节点

1. children() 只考虑子元素
2. next() 取得后面紧邻的同辈元素[nextAll]
3. prev() 取得前面紧邻的同辈元素[prevAll]
4. siblings() 前后所有的同辈元素
5. closest() 取得最近的，类prototype
6. parent(), parents(), closest()的区别
7. find, filter

CSS-DOM操作

1. css()
2. height()
3. width()
4. offset() 返回{top,left}
5. position() 返回{top,left}
6. scrollTop()和scrollLeft()