Dom操作分为：
1.DOM Core 例如：getElementById
2.HTML-DOM 例如： document.forms
3.CSS-DOM 例如：element.style.color
jq的DOM操作
1.查找节点
1)查找元素节点
var $li = $("ul li:eq(1)"); //获取li第二个节点
var li_txt = $li.text(); //获取文本内容
alert(li_txt);
2)查找属性节点
var $para = $("p");
var p_txt = $para.attr("title"); //获取属性
alert(p_txt);
2.创建节点(ps:其实都是类似的)
1)创建元素节点
var $li_1 = $("<li></li>");
$("ul").append($li_1);
2)创建文本节点
var $li_1 = $("<li>banana</li>");
$("ul").append($li_1)
3)创建属性节点
var $li_1 = $("<li title="fruit">banana</li>");
$("ul").append($li_1)
3.插入节点
A,B代表不同的jq对象
| 方法 | 描述 | 例子 |
|---|---|---|
A.append(B) |
每个元素内部追加内容 | B加到A元素内部(A文本内容的后部) |
A.appendTo(B) |
每个元素内部追加内容 | A加到B元素内部(B元素文本内容的后部) |
A.prepend(B) |
prepend() | B加到A元素内部(A文本内容的前部) |
A.prependTo(B) |
prependTo() | A加到B元素内部(B元素文本内容的前部) |
A.after(B) |
after() | B元素后面加入A |
A.insertAfter(B) |
insertAfter() | A加入到B元素后面 |
A.before(B) |
before() | B元素加入A元素前面 |
A.insertBefore(B) |
insertBefore() | A元素加入B元素前面 |
4.删除节点
1)remove()
该元素被删除后，节点的所有后代节点都会被删除。返回值是对节点的引用，故可以再次添加
remove也可以添加参数来有选择的删除元素
2)detach()
与remove不同的是删除后，再次添加上后，这个元素所绑定的方法和事件还是会还原的。
3)empty()
清空此节点的内容和所有后代节点，但是此节点还是存在的。
5.复制节点
方法：clone(),如果clone方法添加参数true，则连原元素节点的事件也一起复制了。默认的是指复制元素节点，但是不复制数据的。
6.替换节点
1)replaceWith()
说明：A.replaceWith(B) 是B元素替换A
2)replaceAll()
说明：A.replaceAll(B) 是A元素替换B
7.包裹节点
1)wrap()
说明：A.replaceWith(B) 是B元素包裹A，分各个元素包裹$("strong").warp("<b></b>")
结果：<b><strong></strong></b><b><strong></strong></b>
2)wrapAll()
说明：A.replaceWith(B) 是B元素包裹A，整个一个包裹$("strong").warp("<b></b>")
结果：<b><strong></strong><strong></storng></b>
3)wrapInner()
说明：A.wrapInner(B) 是A包裹B，整个一个包裹$("strong").warpInner("<b></b>")
结果：<strong><b></b></strong>
8.属性操作
1)获取属性和设置属性
如果attr()不加参数可以获取元素的属性，但是如果加上参数可以设置单个或者多个属性值。
$("p").attr("title","your title"); //单个参数值
$("p").attr({"title":"your title","name":"test"}); //多个参数值（字典格式）
2)删除属性removeAttr()
ps: prop()获取匹配元素集的第一个元素属性值；removePop()为第一个元素删除设置的属性
9.样式操作
1)设置样式：$("p").attr("class","myclass");
2)追加样式：$("p").addClass("myclass");
3)移除样式：$("p").removeClass("myclass");
4)切换样式：$("p").toggleClass("myclass");
5)判断是否存在某个样式：$("p").hasClass("another");等同于$("p").is(".another");
10.设置html，文本和值
1)html()可以获取或者设置html元素（可以用于xhtml但是不能用于xml）
2)text()设置和获取元素的文本内容
3)val()设置和获取value的值（focus()是获得焦点的事件，blur()是失去焦点的事件）
ps：defaultValue指当前文本框的默认值
让复选框或者下拉框等选中不但可以用value()，也可以用attr("selected",true)
11.遍历节点
1)children()
获取匹配元素的子元素而不是后代元素
2)next()
获取匹配元素后面的一个同辈元素
3)prev()
获取匹配元素前面的一个同辈元素
4)siblings()
获取匹配元素的所有同辈元素
5)closest()
匹配离触发事件最近的一个满足条件的元素
6)parent(),parents()和closest()比较
| 方法 | 描述 | 注意 |
|---|---|---|
parent() |
获取每个匹配元素的父级元素 | 指定的节点的父节点查找，只返回一个 |
parent()s |
获取每个匹配元素的祖先元素 | 返回多个父节点 |
closest() |
从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素 | field3 |
12.CSS-DOM
css()方法获取或者设置元素的样式属性
常用方法：
1)height() 获取或者设置高度
2)width() 获取或者设置宽度
3)offset() 获取元素相对当前视窗的偏移量 top或left
4)position() 获取相对最近的一个属性为relative或者absolute父节点的偏移
5)scrollTop() 获取元素的滚动条距离顶端的距离
6)scrollLeft() 获取元素的滚动条距离左侧的距离
