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($("h3"))
$("h3").appendto($("div"))
prepend() //将参数指定的内容插入到指定节点中,返回jQuery对象
prependto()
示例:$("div").prepend($("h3"))
$("h3").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("<h2>test<h2>");
replaceAll()方法:
例子:$("<h2>test<h2>").replaceAll("p");
DOM操作之包裹内容:
jQuery:
wrap()方法:wrap(element|function)
例子:$("div").wrap("<li></li>") 用li元素包含每一个div元素
wrapInner()方法:
例子:$("div").wrapInner("<li></li>") 给div添加内包含的元素li
wrapAll()方法:
例子:$("h2").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].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操作-创新互联
本文来源:https://www.cdcxhl.com/article26/deoicg.html
成都网站建设公司_创新互联,为您提供定制网站、外贸建站、网站策划、品牌网站建设、用户体验、企业网站制作
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联