首页 > 代码库 > jQuery学习----------DOM操作
jQuery学习----------DOM操作
DOM操作之创建元素：
DOM：
var ele = document.createElement("element")
例子：document.createElement("div")
jQuery:
var $ele = $("element") //返回的是一个jQuery对象
例子：$("<div></div>")
DOM操作之输入文本：
DOM：
var txt = document.createTextNode("String")
例子：document.createTextNode("test")
jQuery：
可以直接添加文字到标签中
例子：var $div = $("<div>test</div>")
DOM操作之设置属性：
DOM：
ele.setAttribute("AttName","AttValue")
jQuery：
可以直接添加属性到标签中
例子:var $div = $("<div align=‘center‘></div>")
示例：
//DOM
window.onload = function(){
var txt = document.createTextNode("test");
var div = document.createElement("div");
div.appendChild(txt);
div.setAttribute("align","center");
document.body.appendChild(div);
}
//jQuery
var $div = $("<div align=‘center‘>test</div>")
$("body").append($div)DOM操作之插入内容：
内部插入：
DOM：
appendChild() //在指定节点的内部末尾插入
insertBefore() //在指定节点的内部最前插入
jQuery：
append() //把参数指定的内容插入到指定节点中，返回jQuery对象
appendto() //将匹配的元素出插入到目标元素之后
示例：$("div").append($("h2"))
$("h2").appendto($("div"))
prepend() //将参数指定的内容插入到指定节点中，返回jQuery对象
prependto()
示例：$("div").prepend($("h2"))
$("h2").prependto($("div"))
外部插入：
jQuery：
after() //在每个匹配的元素之后插入内容
before() //在每个匹配的元素之前插入内容
例子：$("div").after("<b>test1</b>") 将在每个div元素后面插入test1文本
insertAfter() //把所有匹配的元素插入到另一个指定的元素集合的后面
insertBefore() //把所有匹配的元素插入到另一个指定的元素集合的前面
例子：$("<b>test<b>").insertAfter("p") 将test文本插入到p元素后
DOM操作之删除元素：
DOM：
removeChild()
jQuery：
remove() //删除所有匹配的元素 remove([selector),selector用来过滤元素
例子：$("p").remove(); //删除所有p元素
$("div").remove(".red"); //删除所有含有类red的div元素
empty() //删除元素包含的内容，不删除元素本身，该方法没有参数
例子：$("p").empty() //删除p元素包含的内容
detach() //将匹配的元素从DOM中分离出来
例子： $("p").detach(".red");
注意：remove和detach的区别：
detach()是将元素分离出去，会保留绑定在改元素上的事件、附加的数等；
当重新把该元素加入DOM中，所绑定的事件仍然有效
remove()是删除元素，不会保留该元素上的事件等信息
DOM操作之克隆内容：
DOM：
cloneNode()方法：
nodeObject.cloneNode(false|true)
//false表示不复制节点的属性和子节点，true表示要复制
jQuery：
clone()方法：
clone([withDataAndEvent])
clone([withDataAndEvent],[deepWithDataAndEvent])
例子：$("p").clone(true) //克隆p元素，并保留事件
DOM操作之替换内容：
DOM：
replaceChild()方法：
nodeObject.replaceChild(new_node,old_node)
jQuery：
replaceWith()方法：
例子：$("p").replaceWith("<h1>test<h1>");
replaceAll()方法：
例子：$("<h1>test<h1>").replaceAll("p");
DOM操作之包裹内容：
jQuery：
wrap()方法：wrap(element|function)
例子：$("div").wrap("<li></li>") 用li元素包含每一个div元素
wrapInner()方法：
例子：$("div").wrapInner("<li></li>") 给div添加内包含的元素li
wrapAll()方法：
例子：$("h1").wrapAll("<li></li>")
unwrap()方法： 将匹配元素的父级元素删除
例子：$("p").unwrap()
DOM操作之属性操作
设置属性：
DOM：
setAttribute()方法：node.setAttribute(name,value)
例子：div.setAttribute("align","center")
jQuery：
prop()方法：
prop(name,value)
例子：$("div.green").prop({"align","value"})
prop(map)：参数map指：{属性，值}
例子：$("div.green").prop({"id":"divid","align":"value"})
prop(name,function(index,oldvalue))
attr()方法：
attr(name,value)
attr(map)
attr(name,function(index,oldvalue))
上面两种方法的差别：prop()添加checked这一类属性较好。
访问属性：
DOM：
getAttribute()方法：node.getAttribute(name)
jQuery：
prop()方法：prop(name)
attr()方法：attr(name)
区别：attr()方法只用来返回默认的属性值，或者初始值
如：$("input").attr("checked") //当复选框的状态改变时，返回的值不会变
注：
上述方法只会获取第一个匹配的元素
可以通过each()方法访问所有匹配元素的属性：
如：$("div").each(function(){
console.log($(this).prop("class"))
})
删除属性：
DOM：
removeAttribute()方法：node.removeAttribute
jQuery：
removeProp()方法：
例子：$("div.green").removeProp("id")
removeAttr()方法：
例子：$("div.green").removeAttr("id")
DOM操作之类操作：
添加样式：
jQuery：
addClass()方法：增加类样式
removeClass()方法：删除类样式
toggleClass()方法：切换类样式
语法：toggleClass(className)
toggleClass(className,switch)
(switch：用来判断样式添加还是移除的boolean值）
toggleClass(function(index,class),[switch])
判断样式
DOM：
hasAttribute()方法：判断是否拥有某个属性，可以用来判断是否拥有某个类
jQuery：
hasClass()方法
DOM操作之读写文本值：
读写HTML：
DOM：
innerHTML()方法
jQuery：
html()方法
读写文本：
DOM：
innerText()方法
jQuery：
text()方法
读写值：（这里的值是指表单元素中的value属性的值）
DOM：
通过属性value获取
jQuery：
val()方法
DOM操作之样式表操作：
读写CSS样式：
DOM：
借助style属性可以访问行内样式的值，
但是他没有办法访问外部css样式表（文档内部样式表和文档外部样式表）！！
借助document对象的styleSheets对象访问外部样式表！！
获取样式表：document.styleSheets[0]//获取第一个样式表
获取样式表中的样式：（考虑兼容性）
非IE浏览器：document.styleSheets[0].cssRules[0]
//获取样式表中的第一个样式的
IE浏览器： document.styleSheets[0].rules[0]
写入样式：（考虑兼容性）
非IE浏览器：document.styleSheets[0].insertRule("rule",index)
insertRule("rule",index)：
rule：是一个完整的css样式字符串
index：必须设置，当值为0时，将样式插入到样式表末尾
IE浏览器：document.styleSheets[0].addRule("selector","style",index)
index：可以不设置，默认为-1，表示样式表的末尾
document.styleSheets[0].length//获取样式表中的样式数目
jQuery:
css()方法：读取或设置css样式
例子： $("div").css("font-size","40px")
$("div").css({"font-size":"20px","color":"red"})
$("div").css("font-size")
绝对定位：
jQuery：
offset()方法：获取匹配元素在当前视口的相对偏移
语法：offset()：返回一个对象包含top和left两个属性
offset(coordinates)：coordinates是一个对象，包含top和left属性
offset(function(index,coords))：
function函数返回一个包含top和left属性的对象
index：元素的索引位置
coords：元素的当前坐标
例子：
var cood = new Object()
cood.top =120
cood.left = 120
$("div").offset(cood)
console.log($("div").offset())相对定位：
jQuery：
position()方法：获取匹配元素的相对偏移位置。
设置大小：
jQuery：
width()和height()方法：读写元素的大小
语法：width()/height()
width(value)/height(value)
width(function(index,width))/height(function(index,width))
例子：
$("div.blue").width("150px").height("150px")
var w = $("div.green").width();
$("div.green").width(function(index,w){
return w/2;
})
innerHeight()、innerWidth()：返回元素的总宽高（包括宽高、内边距和边框高度）
outerHeight()、outerWidth()：返回元素的内容宽高（包括宽高和内边距）
DOM操作之访问文档树：
DOM：
使用ChildNode、parentNode、nextSibling、previousSibling、firstChild、lastChild属性
jQuery：
children()：获取当前元素的所有子元素；
next()：获取当前元素的下一个相邻元素；
prev()：获取当前元素的上一个相邻元素；
parent()：获取当前元素的父元素
注意：这些方法返回的是jQuery对象。