DOM操作——jQuery中的DOM

DOM 操作分三类

1、DOM Core

document.getElementById() 例如:document.getElementById("oDiv");

document.getElementByTagName() 例如:document.getElementByTagName("form");

document.getAttribute() 例如:document.getAttribute("src");

document.setAttribute() 例如:document.setAttribute("href","http://www.vlon.cn/"); 


2、HTML-DOM

document.forms;

element.src; //如 document.getElementById("oInput").value


3、CSS-DOM

element.style.color="red";

-----------------  下面详细说说  ----------------


插入节点

append() 例如:$("p").append('<b>你好</b>'); 结果:<p>我想说<b>你好</b></p>

appendTo() 例如:$("<b>你好</b>").appendTo("p"); 结果:<p>我想说<b>你好</b></p>

prepend() 例如:$("p").prepend("<b>你好</b>"); 结果:<p><b>你好</b>我想说</p>

prependTo() 例如:$("<b>你好</b>").prependTo("p"); 结果:<p><b>你好</b>我想说</p>

after() 例如:$("p").after("<b>你好</b>"); 结果:<p>我想说:</p><b>你好</b>

insertAfter() 例如:$("<b>你好</b>").insertAfter("p"); 结果:<p>我想说</p><b>你好</b>

before() 例如:$("p").before("<b>你好</b>"); 结果:<b>你好</b><p>我想说</p>

insertBefore() 例如:$("<b>你好</b>").insertBefore("p"); 结果:<b>你好</b><p>我想说</p>



删除节点

remove() 例如:$("p").remove();

empty() 例如:$("p").empty();



复制节点

clone()  例如:$("p").clone();


替换节点

replaceWith() 例如:<p>你好</p> $("p").replaceWith("<b></b>"); 结果:<b>你好</b>

replaceAll() 例如:<p>你好</p> $("<b>你好</b>").replaceAll("<p></p>"); 结果:<b>你好</b>


包裹节点

wrap() 例如:$("p").wrap("<div></div>"); 结果:<div><p></p></div>

wrapAll() 例如:$("p").wrapAll("<div></div>"); 结果:<div><p></p><p></p></div> //wrapAll包括同级所有标签

wrapInner() 例如:$("p").wrapInner("<b></b>"); 结果:<p><b>你好</b></p> // wrapInner包括的是标签的子内容,包括文本



属性操作

attr() 如:获取 -> $("p").attr("title");  设置 -> $("p").attr("title","你好");

removeAttr() 如:$("p").removeAttr("title"); //删除属性

类似属性方法:html()、text()、height()、width()、val()、css()



样式操作

获取样式 如:$("p").attr("class");

设置样式 如:$("p").attr("class","container");

追加样式 如:$("p").addClass("container");

移除样式 如:$("p").removeClass("container");

切换样式 toggle() 如:
$("#btn").toggle(function(){
  //显示元素
},function(){
  //隐藏元素
})

重复切换样式 toggleClass() 如:$("p").toggleClass("another"); 原本 <p>你好</p>  
点一下变为 <p class="another">你好</p>
再点一下变为<p>你好</p>
如此循环,重复切换

判断是否含有某个样式
hasClass() 如:<p class="another">你好</p>  $("p").hasClass("another"); 返回true
实际jquery内部调用了is()方法,等价于 $("p").is(".another"); // is("."+class);


设置和获取HTML、文本和值

html() //注:该方法可用于XHTML  但不能用于XML

text()  类似于Javascript中的innerText属性
//Javascript中的innerText属性不能在Firefor浏览器下运行,而jQuery的text()方法支持所有的浏览器
//text()方法对HTML文档和XML文档都有效。

val()  类似于JavaScript中的value属性。

类似还有
focus() 方法相当于JavaScript中的onfocus()方法,作用是处理获得焦点时的事件。
blur() 方法相当于JavaScript中的onblur()方法,作用是处理失去焦点时的事件。



遍历节点

children()  //children()方法只考虑子元素而不考虑任何后代元素。

next()  //取得匹配元素后面紧邻的同辈元素

prev()  //取得匹配元素前面紧邻的同辈元素

siblings()  //取得匹配元素前后所有的同辈元素

closest()  //取得最近的匹配元素
//注:首先检查当前元是否匹配,若匹配则直接返回元素本身。若不匹配则向上查找父元素,逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象

此外还有其它遍历节点:find()、filter()、nextAll()、prevAll()、parent()、parents()






CSS-DOM

获取 $("p").css("color");
设置 $("p").css("color","red");
批量设置 $("p").css({"color":"red","fontSize":"16px","backgroundColor":"#000"});
//注意:
1、如果值是数字,将会被自动转换为像素值;
2、在css()方法中,如果属性中带有"-"符号,例如:font-size和background-color属性,如果在设置这些属性的值的时候不带引号,那么就要用驼峰式写法,如 backgroundColor。如果带上了引号,既可以写成"font-size",也可以写成"fontSize"。总之建议大家加上引号,养成良好的习惯。
3、对透明度的设置,可以直接使用opacity属性,jQuery已经处理好了兼容性的问题。
4、在jQuery1.2版本以后的height()方法可以用来获取window和document的高度。
5、两者的区别是:css()方法获取的高度值与样式的设置有关,可能会得到"auto",也可能会得到"10px"之类的字符串;而height()方法获取的高度值则是元素在页面中的实际高度,与样式的设置无关,并且不带单位。

CSS-DOM常用方法如下:

offset()  //获取元素在当前视窗的相对偏移,返回的对象包含2个属性,即top和left,且只对可见元素有效。

position() //获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,返回的对象也包括2个属性,即top和left。

scrollTop() 和 scrollLeft() //分别是获取元素的滚动条距顶端的距离和距左侧的距离。


至此,已经将jQuery中常用的DOM操作(包括DOM Core,HTML-DOM和CSS-DOM)都已介绍完毕。

发表评论
验证码: 点击我更换图片