1.DOM操作的分类
DOM Core(核心):任何一种支持DOM的程序设计语言都能使用它。getELementById等方法是组成部分
HTML-DOM:获取某些对象、属性可以使用这个。也能用DOM Core实现,就是这个简短。document.forms;element.src
CSS-DOM:是针对CSS的操作。
2.jQuery中的DOM操作
2.1查找节点
$("ul li:eq(1)"); 利用选择来查找
$("p").attr("title"); 查找属性节点
2.2创建节点
利用$()创建
2.3插入节点
想达到的效果,A的内部添加B……
A.append(B) B.appendTo(A)
B.prepend(A) A.prepend(B)
想要达到的效果,A的后边添加B……A B
A.after(B) B.insertAfter(A)
B.before(A) A.insertBefore(B)
作用不仅有插入到文档中,也能对原有的DOM元素进行移动
2.4删除节点
remove() 后代节点一起删除
detach() 不会把绑定的事件、附加的数据删掉,之后还可以用
empty() 清空元素中的所有后代节点,元素里的。
2.5复制节点
clone() 复制后的新元素不具有任何行为
clone(true) 复制元素的同时,复制元素中绑定的事件;该元素副本也具有复制功能
2.6替换节点
replaceWith() 将所有匹配的元素都替换成指定的HTML或者DOM元素
replaceAll() 与replaceWith()功能一样,只是颠倒了操作
2.7包裹节点
$("strong").wrap("<b></b>") 用b标签把strong元素包裹起来
wrapAll() 将所有匹配的元素用一个元素包裹起来……全包裹
wrapInner() 将每一个匹配的元素的子内容用其他结构化的标记包裹起来
2.8属性操作
获取:.attr()
设置:.attr("title":"123","name":"test")
删除:.removeAttr()
2.9样式操作
获取:.attr("class")
设置:arrt("class","high") 前边有样式的话,会用high覆盖,没有则添加
追加样式:.addClass() 不覆盖,会添加
移除样式:.removeClass("high another")
切换样式:.toggle() .toggleClass()样式上的重复切换
判断是否含有某个样式: hasClass() 有返回true。没有返回false
CSS的两条规定:
1.如果给一个元素添加了多个class值,那么久相当于合并了他们的样式
2.如果有不同的class设定了同一样式属性,则后者覆盖前者
2.10设置和获取HTML、文本和值
获取html:.html()
设置html:html(“<strong>你选择的水果是?</strong>”)
获得文本:.text()
设置文本:.text("你喜欢的水果?")
获取值:val() 文本框、下拉列表和单选框都可以返回元素的值。如果元素为多选,则返回一个包含所有选择的值得数组。
2.11遍历节点
children() 获取匹配元素的子元素的集合
next() 获取匹配元素后面紧邻的同辈元素
prev() 获取匹配元素前面紧邻的同辈元素
siblings()获取匹配元素的前后所有的同辈元素
closest() 从本身开始查找,获取最近的匹配的元素(一个元素)
parent()获取集合中每个匹配元素的父级元素(一个元素)
parents()获取集合中每个匹配元素的祖先元素(多个元素)
2.12CSS-DOM操作
CSS-DOM技术就是读取和设置style对象的各种属性。
css() 获取元素的样式属性
offset() 获取元素在当前视窗的相对偏移
position() 获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移
scollTop() 获取元素的滚动条距顶端的距离
scollLeft() 获取元素的滚动条距左侧的距离
hight()和.css("height")都能获得元素的高度,他们的区别是:
css()方法获取的高度值与样式的设置有关,可能会得到auto;height()方法得到的高度值则是元素在页面中的实际高度,与样式设置无关,并且不带单位