jquery笔记之DOM

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 = $("
");
$("ul").append($li_1);

2)创建文本节点

var $li_1 = $("
banana
");
$("ul").append($li_1)

3)创建属性节点

var $li_1 = $("
banana
");
$("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("")

结果：

2)wrapAll()

说明：A.replaceWith(B) 是B元素包裹A，整个一个包裹$("strong").warp("")

结果：

3)wrapInner()
说明：A.wrapInner(B) 是A包裹B，整个一个包裹$("strong").warpInner("")

结果：

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() 获取元素的滚动条距离左侧的距离