重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
jQuery学习----------DOM操作-创新互联
DOM操作之创建元素：
DOM：
var ele = document.createElement("element")
例子：document.createElement("div")
jQuery:
var $ele = $("element") //返回的是一个jQuery对象
例子：$("
")DOM操作之输入文本：
DOM：
var txt = document.createTextNode("String")
例子：document.createTextNode("test")
jQuery：
可以直接添加文字到标签中
例子：var $div = $("test")
DOM操作之设置属性：
DOM：
ele.setAttribute("AttName","AttValue")
jQuery：
可以直接添加属性到标签中
例子:var $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 = $("test DOM操作之插入内容：
内部插入：
DOM：
appendChild() //在指定节点的内部末尾插入
insertBefore() //在指定节点的内部最前插入
jQuery：
append() //把参数指定的内容插入到指定节点中，返回jQuery对象
appendto() //将匹配的元素出插入到目标元素之后
示例：$("div").append($("h3"))
$("h3").appendto($("div"))
prepend() //将参数指定的内容插入到指定节点中，返回jQuery对象
prependto()
示例：$("div").prepend($("h3"))
$("h3").prependto($("div"))
外部插入：
jQuery：
after() //在每个匹配的元素之后插入内容
before() //在每个匹配的元素之前插入内容
例子：$("div").after("test1") 将在每个div元素后面插入test1文本
insertAfter() //把所有匹配的元素插入到另一个指定的元素集合的后面
insertBefore()//把所有匹配的元素插入到另一个指定的元素集合的前面
例子：$("test").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("
test");
replaceAll()方法：
例子：$("
test").replaceAll("p");
DOM操作之包裹内容：
jQuery：
wrap()方法：wrap(element|function)
例子：$("div").wrap("
") 用li元素包含每一个div元素wrapInner()方法：
例子：$("div").wrapInner("
") 给div添加内包含的元素liwrapAll()方法：
例子：$("h2").wrapAll("
")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].c***ules[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对象。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前标题：jQuery学习----------DOM操作-创新互联
网页路径：http://cqcxhl.com/article/deoicg.html