二、jQuery中的DOM操作

摘要: jQuery中的DOM操作

Dom操作的分类

一般来说，Dom操作分为3个方面，即DOM Core、HTML-DOM和CSS-DOM。

jQuery中的DOM操作

一、查找节点

用jQuery在文档树上查找节点非常容易，可以利用前面介绍的jQuery选择器来完成。

1、查找元素节点 利用jQuery选择器

<script type="text/javascript">
$(function(){
//获取第二个li元素
var $li=$('ul li:eq(1)');
var li_txt=$li.text();
alert(li_txt);
});
</script>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>

2、查找属性节点

利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值。attr()方法的参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字。

//获取p元素
var $p=$('p');
var p_title=$p.attr('title'); //获取<p>元素节点的属性title
alert(p_title);

二、创建节点

1、创建元素节点：

使用jQuery的工厂函数$()来完成。$(html)

var $li_1=$('<li></li>');
var $li_2=$('<li></li>');
//然后将这两个新建的元素插入到文档中，使用jQuery中的append()方法
$('ul').append($li_1);
$('ul').append($li_2);

三、插入节点

动态创建的HTML元素并没有实际用处，还需要将创建的元素插入文档中，将新创建的节点插入文档最简单的方法是，让它成为这个文档的某个节点的子节点。

插入节点的方法：

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

示例：

$(function(){
var $li_1=$('<li title="香蕉">香蕉</li>'); //创建第一个<li>元素
var $li_2=$('<li title="雪梨">雪梨</li>');
var $li_3=$('<li title="其他">其他</li>');
//获取<ul>节点
var $ul=$('ul');
//获取ul的第二个li节点
var $two_li=$('ul li:eq(1)');
//将第一个创建的li元素插入到ul的后面
$ul.append($li_1);
//将第二个创建的li元素插入到ul的前面
$ul.prepend($li_2);
//讲第三个创建的li元素插入到获取到的第二个li节点
$li_3.insertAfter($two_li);
});

三、删除节点

jQuery提供了两种删除节点的方法，remove()和empty()

1、remove()方法

作用是从dom中删除所有匹配的元素。当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

var $li=$('ul li:eq(1)').remove();
$li.appendTo('ul');
//可以简化代码直接使用appendTo()方法，也可以用来移动元素
$('ul li:eq(1)').appendTo('ul');

remove()方法也可以通过传递参数来选择性删除元素,

$('ul li').remove('li[title=菠萝]')

2、empty()方法

empty()方法不是删除节点，而是清空节点，它能清空元素中的所有后代节点。

四、复制节点

复制节点，例如某个购物网站的效果，用户不仅可以通过单击商品下方的"选择"按钮购买相应的产品，也可以通过鼠标拖动商品并将其放到购物车中。这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到购物效果。

$('ul li').click(function(){
$(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中。
});

复制节点后，被复制的元素并不具有任何行为，如果需要新元素也具有复制功能，可以使用

$(this).clone(true).appendTo("ul");

在clone()方法中传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。

五、替换节点

如果要替换某个节点，jQuery提供了相应的方法，replaceWith()和replaceAll()

replaceWith()：方法的作用是将所有匹配的元素都替换成指定的html或者dom元素。如果在替换前，已经为元素绑定事件，替换后原先绑定的事件将会与替换的元素一起消失，需要在新元素上重新绑定事件。

六、包裹节点

1、jQuery提供了wrap()方法：该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。

$('strong').wrap('<b></b>');

结果：<b><strong>你最喜欢的水果</strong></b>

2、wrapAll()方法

该方法会将所有匹配的元素用一个元素来包裹。它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。

html:

<strong>你最喜欢的水果？</strong>
<strong>你最喜欢的水果？</strong>

使用wrap()方法：

$('strong').wrap('<b></b>')

结果：

<b><strong>你最喜欢的水果？</strong></b>
<b><strong>你最喜欢的水果？</strong></b>

使用wrapAll()方法：

$('strong').wrapAll('<b></b>');

结果：

<b>
<strong>你最喜欢的水果？</strong>
<strong>你最喜欢的水果？</strong>
</b>

3、wrapInner()方法

该方法将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。例如可以使用它来包装<strong>标签的子内容，

$('strong').wrapInner('<b></b>');

运行代码后，<strong>标签内的内容被一对<b>标签包裹了。

<strong><b>你最喜欢的水果？</b></strong>

七、属性操作

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

1、获取属性和设置属性

var $p=$('p');
var p_title=$p.attr('title');//获取p元素的title属性
p.attr('title','这啥呢');//设置单个属性的值
p.attr({"title":"your title","name":"tst"});

jQuery中很多方法都是同一个函数实现获取和设置的，例如attr()、html()、text()、height()、width()、val()、css()

2、删除属性

使用removeAttr()方法

$('p').removeAttr('title') //删除<p>元素的属性title

八、样式操作

1、获取样式和设置样式

使用attr()方法获取class和设置class。

var p_class=$('p').attr('class');
$('p').attr('class','test');//设置<p>元素的class为test

大多数情况下，它是将原来的class替换为新的class，而不是在原来的基础上追加新的class

2、追加样式：

jQuery提供了专门的addClass()方法来追加样式。

3、移除样式

removeClass()

4、切换样式

jQuery提供了一个toggleClass()方法控制样式上的重复切换

$('p').toggleClass('another');//重复切换类名  another

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

hasClass()用来判断，如果有，则返回true，否则返回false

九、设置和获取HTML、文本和值

1、html()方法：

类似于js中的innserHTML属性，可以用来读取或者设置某个元素中的HTML内容。该方法也可以设置HTML代码，

var p_html=$('p').html(); //获取<p>元素的HTML代码
$('p').html('<strong>你好啊？</strong>');

2、text()方法：

类似于js中的InnerText属性，可以用来读取或设置某个元素中的文本内容。

var p_text=$('p').text();//获取<p>元素的文本内容
$('p').text('你最喜欢啥?');

3、val()方法

① 此方法类似于js中的value值，可以用来设置和获取元素的值。无论元素时文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。

示例：邮箱登陆界面，邮箱地址文本框和邮箱密码框内分别有"请输入邮箱地址"和“请输入邮箱密码”的提示。当将鼠标聚焦到邮箱文本框时，文本框内的“请输入邮箱地址”文字将被清空。

//当鼠标获取焦点时
$('#address').focus(function(){
var address_val=$('#address').val(); //获取address地址
if(address_val=='请输入邮箱地址'){
$(this).val("");
}
});
//当鼠标失去焦点时
$('#address').blur(function(){
var address_val=$('#address').val(); //获取address地址
if(address_val==""){
$(this).val("请输入邮箱地址");
}
});

②val()方法不仅能设置元素的值，同时也能获取元素的值。另外，val()方法还有另外一个用处，就是他能使select、checkbox和radio相应的选项被选中。

jQuery中的val()方法是从最后一个选项往前读取，如果选项的value或text中任意一项符合就会被选中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
.test{
font-weight:bold;
color : red;
}
.add{
font-style:italic;
}
</style>
<script type="text/javascript">
$(function(){
//设置下拉框选择  选择2号
$("input:eq(0)").click(function(){
$("#single").val("选择2号");
});
//设置下拉列表同时选择 2  3项
$("input:eq(1)").click(function(){
$("#multiple").val(["选择2号", "选择3号"]);
});
//设置多选框 多选2
$("input:eq(2)").click(function(){

$(":checkbox").val(["check1"]);
$(":radio").val(["radio1"]);
});
});
</script>
</head>
<body>
<input type="button" value="设置单选下拉框选中"/>
<input type="button" value="设置多选下拉框选中"/>
<input type="button" value="设置单选框和多选框选中"/>
<br/><br/>
<select id="single">
<option>选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
<option selected="selected">选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
<option>选择4号</option>
<option selected="selected">选择5号</option>
</select>
<br/><br/>

<input type="checkbox" value="check1"/> 多选1
<input type="checkbox" value="check2"/> 多选2
<input type="checkbox" value="check3"/> 多选3
<input type="checkbox" value="check4"/> 多选4
<br/>
<input type="radio" value="radio1"/> 单选1
<input type="radio" value="radio2"/> 单选2
<input type="radio" value="radio3"/> 单选3
</body>
</html>

上面的例子中，可以使用val()方法，也可以使用attr("selected",true)方法。

十、遍历节点

1、children()方法

该方法用于取得匹配元素的子元素集合。只考虑子元素而不考虑任何后代元素。

var  $body=$('body').children(); //获取body下所有的孩子节点。

2、next()方法

该方法用于取得匹配元素后面相邻的同辈元素

var $p1=$("p").next();//取得相邻<p>元素后的同辈元素

3、prev()方法

该方法用于取得匹配元素前面紧邻的同辈元素。

4、siblings()方法

该方法用于取得匹配元素前后所有的同辈元素。

5、closest()

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

除此之外，在jQuery中还有很多遍历节点的方法，例如find()、filter()方法、nextAll()方法、prevAll()方法、parent()方法和parents()方法等。

十一、CSS-DOM操作

CSS-DOM就是读取和设置style对象的各种属性。

1、利用css()方法获取元素的样式属性

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

2、可以直接利用css()方法设置某个元素的单个样式

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

与attr()方法一样，css()方法也可以同时设置多个样式属性。

$("p").css({"font-size":"30px","background-color":"#999999"});

在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如

$("p").css(fontSize:"30px",background-color:"#8888");

如果带上了引号，既可以写成"font-size"，也可以写成"fontSize"，总之建议大家加上引号，养成良好的习惯。

3、对透明度设置，可以使用opacity属性，

$("p").css("opacity","0.3");

4、获取元素的高度

可以通过css()方法获取高度，也可以通过height()方法获取元素的高度。

$("p").css("height");
$("p").height();

height()方法也能用来设置元素的高度。

css()方法和Height()方法的区别：

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

与height()对应的还有一个width()方法。

此外，在CSS-DOM中，还有以下几个经常使用的方法：

5、offset()方法

它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。

var offset=$("p").offset();
var left=offset.left();
var top=offset.top();

6、position()方法

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

7、scrollTop()和scrollLeft()方法

这两个方法的作用分别是获取元素的滚动条距离顶端的距离和距左侧的距离。

十二、案例研究

1、超链接提示效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
*{margin:0px; padding:0px;}
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
//取消title属性默认提示，设置x y坐标，解决由于自制的提示与鼠标距离太近而引起的提示问题。
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){
//鼠标经过
this.myTitle=this.title;
this.title=""; //设置默认的title属性为""
console.info(e.pageY+":"+e.pageX);
var $html=$("<div id='tooltip'>"+this.myTitle+"</div>"); //创建元素
$html.appendTo("body");  //插入文档中
$("#tooltip").css({"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"}).show("fast");   //设置 x y坐标 并显示
}).mouseout(function(){
//鼠标移除
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
});
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
</body>
</html>

2、图片提示效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="file:///F|/html/jquery/jquery-1.7.2.min.js"></script>
<style type="text/css">
*{margin:0px; padding:0px;}
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/javascript">
$(function(){
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var imgTitle=this.MyTitle? "</br>"+this.myTitle :"";
//创建新的新元素
var tooltip=$("<div id='tooltip'> <img src='"+this.href+"' alt='产品预览'/>"+imgTitle+"</div>");
//新创建的元素添加到文档中
$("body").append(tooltip);
$("#tooltip").css({
"top":(e.pageY+y) +"px",
"left":(e.pageX+x) +"px"
}).show("fast");
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip").css({
"top" : (e.pageY+y) +"px",
"left" : (e.pageX+x) +"px"
});
});
});
</script>
</head>
<body>
<h3>有效果：</h3>
<ul>

<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>

<br/><br/><br/><br/>
<br/><br/><br/><br/>

<h3>无效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>
</body>
</html>