jQuery篇之Dom操作

DOM是Document Object Model的缩写，意思是文档对象模型。根据W3C DOM的规范，DOM是一种与浏览器、平台、语言无关的接口，它解决了Netscape的javascript和Microsoft的JScript之间的冲突，这样就可以让开发者们能够轻松的获取和操作网页中的数据、脚本和表现层现象。

DOM操作包含3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。

1.DOM Core

DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如xml。

Javascript中的getElementById()，getElementsByTagName()，getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。

2.HTML-DOM

使用HTML-DOM获取对象的方法。

document.forms;

element.src;

3.CSS-DOM

CSS-DOM是针对css的操作。CSS-DOM技术的主要的作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。

element.style.color="red";

DOM操作

1.查找节点 var $para=$("p");

2.创建节点 var $para=$("<li></li>");

3.插入节点

方法	描述	示例
append()	向每个匹配的元素内部追加内容	$("p").append("<b>你好</b>"); 结果： <p>我想说：<b>你好</b></p>
appendTo()	将所有匹配的元素追加到指定的元素中。该方法其实颠倒了 $(A).append(B)的操作，将A追加到B中。	$("<b>你好</b>").appendTo("p"); 结果： <p>我想说：<b>你好</b></p>
prepend()	向每个匹配的元素内部前置内容	$("p").prepend("<b>你好</b>"); 结果： <p><b>你好</b>我想说：</p>
prependTo()	将所有匹配的元素前置到指定的元素中。该方法其实颠倒了 $(A).prepend(B)的操作，将A前置到B中。	$("<b>你好</b>").prependTo("p"); 结果： <p><b>你好</b>我想说：</p>
after()	在每个匹配的元素之后插入内容	$("p").after("<b>你好</b>"); 结果： <p>我想说：</p><b>你好</b>
insertAfter()	将所有匹配的元素插入到指定元素的后面。该方法其实颠倒了 $(A).after(B)的操作，将A插入到B后面。	$("<b>你好</b>").insertAfter("p"); 结果： <p>我想说：</p><b>你好</b>
before()	在每个匹配的元素之前插入内	$("p").before("<b>你好</b>"); 结果： <b>你好</b><p>我想说：</p>
insertBefore()	将所有匹配的元素插入到指定的元素的前面。该方法其实颠倒了$(A).before()的操作，将A插入到B前面	$("<b>你好</b>").insertBefore("p"); 结果： <b>你好</b><p>我想说：</p>

4.删除节点

方法	描述	示例
remove()	删除节点及其后代节点，还有它们绑定的事件，返回值是一个指向已被删除的节点的引用。 1）appendTo()方法也可以移动元素 2）remove()可以加参数选择性地删除元素。	var $li=$("ul li:eq(1)").remove();//获取删除的节点 $li.appendTo("ul");//添加节点 $("ul li").remove("li[title!=菠萝]");//删除属性不为“菠萝”的元素
detach()	与remove()类似，不同的是，所有的绑定事件、附加的数据等都会保留下来。	$("ul li").click(function(){ alert("123"); }); var $li=$("ul li:eq(1)").detach();//删除元素 $li.appendTo("ul");//添加节点，之前的事件还在
empty()	清空节点，清空元素中的所有后代节点。注意是元素里	$("ul li:eq(1)").empty();//清空元素里的内容 <li></li>该节点还在

5.复制节点

$("ul li:eq(1)").clone(true).appendTo("ul");

clone()方法是复制节点，方法中传递了一个参数true，复制元素的同时复制元素中所绑定的事件；也可以不带参数。

6.替换节点

1）replaceWith()方法的作用是将所有匹配的元素都替换成HTML或者DOM元素。

例：将页面中“你最喜欢的水果是？”替换成“你最不喜欢的水果是？”

$("p").replaceWith("你最不喜欢的水果是？");

2）replaceAll()方法与replaceWith()方法功能相同，只是颠倒了replaceWith()操作。

$("你最不喜欢的水果是？").replaceAll("p");

注意：替换后，对象原先绑定的事件不复存在。

7.包裹节点

1）wrap()方法是一对一包裹。

例：你最喜欢的水果是？

你最喜欢的水果是？

$("strong").wrap("");

结果：

你最喜欢的水果是？

2）wrapAll()方法用一个元素包裹所有匹配的元素。不同于wrap()方法。

对于1）中的例子，

$("strong").wrapAll("");

结果：

你最喜欢的水果是？

你最喜欢的水果是？

注意：如果被包裹的多个元素间有其它元素，其它元素会被放到包裹元素之后。

3）wrapInner()方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

例：你最喜欢的水果是？

$("strong").wrapInner("");

结果：

你最喜欢的水果是？

8.属性操作

1）获取属性和设置属性

var $para=$("p");

var p_txt=$para.attr("title"); //获取属性

$("p").attr("title","your title"); //设置单个属性

$("p").attr({"title":"your title","name":"test"});

2）删除属性

$("p").removeAttr("title");

9.样式操作

1）获取样式和设置样式

var $para=$("p");

var p_class=$para.attr("class"); //获取的样式

$para.attr("class","high"); //设置的样式新的样式“high”替换旧的样式，没有追加

2）追加样式

$para.addClass("high"); //追加样式，如原来,现在class="another high"

注意：attr()方法和addAttr()方法是有区别的。

3）移除样式

removeClass()方法是移除所有的样式，而带参数是移除参数对应的样式。

$para.removeClass("high").removeClass("another"); //一个一个地删除样式

$para.removeClass("another high"); //一次性删除两个样式

4）切换样式

toggle(function(){},function(){});

toggle()方法交替执行两个函数，主要是控制行为上的重复切换。

$para.toggleClass("high"); //第一次切换之后，class="another high"

5）判断是否含有某个样式

hasClass()可以用来判断元素中是否含有某个class。返回值为true/false。

$("p").hasClass("another");

注意：也可以用is()方法来判断。如：$("p").is("another");

10.设置和获取HTML、文本和值

1）html()方法，读取或设置某个元素中的HTML内容。类似javascript中的innerHTML属性。

$("p").html(); //获取html

$("p").html("你最喜欢的水果是？"); //设置html

注意：html()方法可以用于XHTML文档，但不能用于XML文档

2）text()方法，读取或设置某个元素中的文本内容。类似javascript中的innerText属性。

$("p").text(); //获取 元素的文本内容

$("p").text("你最喜欢的水果是？"); //设置元素的文本内容

3）val()方法，获取或设置元素的值。类似javascript中的value属性。

例：

$("#txtAddress").focus(function(){

var $address=$(this).val();

if($address="请输入邮箱地址"){

$(this).val("");

}

});

$("#txtAdress").blur(function(){

var $address=$(this).val();

if($address=""){

$(this).val("请输入邮箱地址");

}

});

注意：focus()方法相当于Javascript中的onfocus()方法，作用是处理获得焦点时的事件。

blur()方法相当于Javascript中的onblur()方法，作用是处理失去焦点的事件。

defaultValue属性获取表单元素的初始值（默认值），this.defaultValue。

另外，val()方法设置和改变select（下拉列表）、checkbox（多选框）和radio（单选框）的选中项。

例：

</select>

$("#single").val("选择2号"); //设置一个被选中

</select>

$("#multiple").val(["选择2号","选择3号"]); //以数组的形式赋值，设置多个被选

<input type="checkbox" value="check1"/>多选1

<input type="checkbox" value="check2"/>多选2

<input type="checkbox" value="check3"/>多选3

<input type="checkbox" value="check4"/>多选4

$(":checkbox").val(["check1","check2"]); //多选框，设置多个值被选中

<input type="radio" value="radio1">单选1

<input type="radio" value="radio2">单选2

<input type="radio" value="radio3">单选3

$(":radio").value(["单选2"]); //单选框，设置一个值被选中

注意：对于设置元素被选中，可以使用val()方法，也可以使用attr()方法实现同样的功能。

$("#single option:eq(1)").attr("selected",true);

$("[value=radio2]:radio").attr("selected",true);

11.遍历节点

1）children()方法，获取匹配元素的子元素集合。

$("body").children(); //获取<body>元素下的子元素

$("p").children(); //获取元素下的子元素

注意：children()方法只考虑子元素而不考虑其他后代元素。

2）next()方法，获取匹配元素后面紧邻的同辈元素。

$("p").next(); //取得紧邻元素后一个同辈元素

3）prev()方法，获取匹配元素前面紧邻的同辈元素。

$("ul").prev(); //获取紧邻<ul>元素前一个同辈元素

4）siblings()方法，获取匹配元素前后所有的同辈元素。

$("p").siblings(); //获取元素的同辈元素

5）closest()方法，获取最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素，如果什么都没有找到则返回一个空的jQuery对象。

//给点击的目标元素的最近的li元素添加颜色

$(document).bind("click",function(e){

$(e.targe).closet("li").css("color","red");

})

6）parent(),parents()与closet()的区别

方法	描述	示例
parent()	获得集合中每个匹配元素的父级元素	$(".high").parent().css("color","red"); parent()方法从指定类型的直接父节点开始查找， parent()方法返回一个元素节点。
parents()	获得集合中每个匹配元素的祖先元素	$(".high").parents("ul").css("backgroud-color","red"); parents()方法查找方式同parent()方法类似，不同的一点在于，当它找到第一个父节点时并没有停止查找而是继续查找，最后返回多个父节点。
closet()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素	$(".high").closet("ul").css("background-color","red"); closet()方法查找是从包含自身的节点找起，它同parents()方法类似，不同点就在于它只返回匹配的第一个元素节点。

12.CSS-DOM操作

CSS-DOM就是读取和设置style对象的各种属性。style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式信息。

$("p").css("color"); //获取元素的样式颜色

$("p").css("color","red"); //设置元素的样式颜色

$("p").css({"fontsize":"30px","background-color":"#888888"}); //设置多个样式属性

注意：1）如果值为数字，将会被自动转换为像素值。

2）在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，如：$("p").css({fontSize:"30px",backgroundColor:"#888888"});如果带上引号，既可以写成“font-size”,又可以写成“fontSize”。

$("p").css("opacity","0.5"); //直接使用opacity属性来设置透明度

$("p").css("height"); //获取元素的样式高度

$("p").height(); //获取元素的高度值

$("p").height(100); //设置元素的高度值为100px

$("p").height("10em"); //设置元素的高度值为10em

注意：css()方法获取的高度值与样式的设置有关，可能会得到"auto",也可能得到"10px"之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，而且不带单位。

$("p").width(); //与height()方法类似，获取元素的宽度值

$("p").width("400px"); //与height()方法类似，设置元素的宽度值

1）offset()方法，获取元素在当前视窗的相对位移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。

var offset=$("p").offset(); //获取元素的offset();

var left=offset.left; //获取左偏移

var top=offset.top; //获取右偏移

2）position()方法，获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对位置。

var position=$("p").position(); //获取元素的position()

var left=position.left; //获取左偏移

var top=position.top; //获取右偏移

3）scrollTop()方法和scrollLeft()方法，分别获取元素的滚动条距顶端的距离和距左侧的距离。

var $p=$("p");

var scrollTop=$p.scrollTop(); //获取元素的滚动条距顶端的距离

var scrollLeft=$p.scrollLeft(); //获取元素的滚动条距左侧的距离

$p.scrollTop(300); //元素的竖直滚动条滚动到指定的位置

$p.scrollLeft(300); //元素的横向滚动条滚动到指定的位置

posted on 2014-07-24 21:21 会飞的金鱼阅读(123) 评论(0) 收藏举报

刷新页面返回顶部

DOM操作

公告