jQuery第三章

一、jQuery中的DOM操作

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

1.DOM Core

JavaScript中的getElementById()、getElemntByTagName()、getAttribute()和setAttribute()等方法，都是DOM Core的核心，例如：

（1）使用DOM Core来获取表单对象的方法：

document.getElementByTagName(“form”)；

（2）使用DOM Core来获取某元素的src属性的方法：

element.getAttribute(“src”)；

2.HTML-DOM

提供了一些简单的记号来描述各种HTML元素的属性，例如：

（1）使用HTML-DOM来获取表单对象的方法：

document.forms

（2）使用HTML-DOM来获取某元素的src属性的方法：

element.src

3.CSS-DOM

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

（1）设置某元素style对象字体颜色的方法：

element.style.color=“red”；

二、jQuery中的DOM操作

为了能全面的讲解DOM操作，首先需要构建一个网页。因为每一张网页都能用DOM表示出来，而每一份DOM都可以看作一棵DOM树。

HTML代码如下：

//…省略其他代码

<p title = “选择你最喜欢的水果.” >你最喜欢的水果是？</p>

<ul>

<li title = ‘苹果’>苹果</li>

<li title = ‘橘子’>橘子</li>

<li title = ‘菠萝’>菠萝</li>

</ul>

//…省略其他代码

1.查找节点

可以用jQuery选择器完成在文档树上查找节点。

（1）查找元素节点

获取元素节点并打印出它的文本内容，jQuery代码如下：

var $li = $(“ul li : eq(1)”) ;

var li_txt = $li.text() ;

alert(li_txt);

（2）查找属性节点

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

获取属性节点并打印出它的文本内容，jQuery代码如下：

var $para = $(“p”) ;

var p_txt = $para.attr(“title”) ;

alert(p_txt) ;

2.创建节点

在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互的目的。

（1）创建元素节点

例如要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。

首先，创建两个<li>新元素，可以使用jQuery的工厂函数$()来完成。$(html) 方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。jQuery代码如下：

var $li_1 = $(“<li></li>”) ;

var $li_2 = $(“<li></li>”) ;

然后，将这两个元素插入文档中，可以使用jQuery中的append()方法，代码如下：

$(“ul”).append($li_1) ;

$(“ul”).append($li_2) ;

（2）创建文本节点

已经创建了两个<li>元素节点并把它们插入了文档中。此时需要为创建的元素节点添加文本内容。jQuery代码如下：

var $li_1 = $(“<li>香蕉</li>”) ;

var $li_2 = $(“<li>雪梨</li>”) ;

$(“ul”).append($li_1) ;

$(“ul”).append($li_2) ;

（3）创建属性节点

创建属性节点与创建文本节点类似，也是直接在创建元素节点时一起创建，jQuery代码如下：

var $li_1 = $(“<li title = ‘香蕉’>香蕉</li>”) ;

var $li_2 = $(“<li title = ‘雪梨’>雪梨</li>”) ;

$(“ul”).append($li_1) ;

$(“ul”).append($li_2) ;

3.插入节点

动态创建HTML元素并没有实际用处，还需要将新创建的元素插入文档中。将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。前面使用了一个插入节点的方法append()，它会在元素内部追加新创建的内容。

将新创建的节点插入某个文档的方法并非只有一种，在jQuery中还提供了其他几种插入节点的方法，如表所示：

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

例如：利用它们创建新元素并对其进行插入操作。

jQuery代码如下：

var $li_1 = $(“<li title = ‘香蕉’>香蕉</li>”) ;

var $li_2 = $(“<li title = ‘雪梨’>雪梨</li>”) ;

var $li_3 = $(“<li title = ‘其他’>其他</li>”) ;

var $parent = $(“ul”) ;

var $two_li = $(“ ul li : eq(1)”) ;

$parent : append($li_1) ;

$parent : prepend($li_2) ;

$li_3.insertAfter($two_li) ;

　　

利用它们对DOM元素进行移动

jQuery代码如下：

var $one_li = $(“ul li : eq(1)”) ;

var $two_li = $(“ul li : eq(2)”) ;

$two_li.insertBefore($one_li) ;

4.删除节点

（1）remove()方法

作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。

例如，删除<ul>节点中的第2个<li>元素节点，jQuery代码如下：

$(“ul li : eq(1)”).remove() ;

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。另外，remove()方法也可以通过传递参数来选择性地删除元素，jQuery代码如下：

$(“u l li”).remove(“li[title! = 菠萝]”) ;

//将<li>元素中属性title不等于“菠萝”的<li>元素删除

（2）detach()方法

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据都会保留下来。

（3）empty()方法

严格来讲，empty()不是删除节点而是清空节点，它能清空元素中的所有后代节点。jQuery代码如下：

$(“ul li : eq(1)”).empty() ;

//获取第2个<li>元素节点后，清空次元素里的内容，注意是元素里。

5.复制节点

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

继续沿用之前的例子，如果单击<li>元素后需要再复制一个<li>元素，就可以使用clone()方法来完成。jQuery代码如下：

$(“ul li”).click(function){

$(this.clone().appendTo(“ul”)) ; //赋值当前单击的节点，并将它追加到<ul>中。

})

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

$(this).clone(true).appendTo(“body”) ;

6.替换节点

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

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

jQuery代码如下：

$(“p”).replaceWith(“<strong>你最不喜欢的水果是？</strong>”)

replaceAll()与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作，可以使用如下jQuery代码：

$(“<strong>你最不喜欢的水果是？</strong>”).replaceAll(“p”) ;

7.包裹节点

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

jQuery代码如下：

$(“strong”).wrap(“<b></b>”) ;

（1）wrapAll()方法

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

（2）wrapInner()方法

该方法将每一个匹配的元素的子内容用其他结构化的标记包裹起来。例如：可以使用它来包裹<strong>标签的子内容，jQuery代码如下：

$(“strong”).wrapInner(“<b></b>”) ;

8.属性操作

（1）获取属性和设置属性

如果要获取<p>元素的属性title，那么只需要给attr()方法传递一个参数，即属性名称。

jQuery代码如下：

var $para = $(“p”) ;

var p_txt = $para.attr(“title”) ;

如果要设置<p>元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名和对应的值。

jQuery代码如下：

$(“p”).attr(“title” , “your title”) ;

如果需要一次性为同一个元素设置多个属性，可以使用下面的代码来实现：

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

（2）删除属性

在某些情况下，需要删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成该任务。

如果需要删除<p>元素的title属性，可以使用下面的代码实现：

$(“p”).removeAttr(“title”) ;

9.样式操作

（1）获取样式和设置样式

例如，有HTML代码如下：

<p class = “myClass” title = “选择你最喜欢的水果.”>你最喜欢的水果是？</p>

在上面的代码中，class也是<p>元素的属性，因此获取class和设置class都可以使用attr()方法来完成。使用attr()方法来获取<p>元素的class，jQuery代码如下：

var p_class = $(“p”).attr(“class”) ;

也可以使用attr()方法来获取<p>元素的class，jQuery代码如下：

$(“p”).attr(“class” , “high”) ;

运行后的HTML代码变成：

<p class = “high” title = “选择你最喜欢的水果.”>你最喜欢的水果是？</p>

（2）追加样式

jQuery提供了专门的addClass()方法来追加样式。为了使例子更容易理解，首先在<style>里面添加另一组样式：

<style>

/*.high{

font-weight: bold;     /*粗体字*/

color: red;          /*  字体颜色设置为红色*/

}*/

/*追加样式   所需的*/

/*.another{

font-style: italic;     /*斜体字*/

color: blue;            /*  字体颜色设置为红色*/

}*/

运行之后HTML代码变成：

<p class= “high another” title = “选择你最喜欢的水果.”>你最喜欢的水果是？</p>

addClass()给元素添加class之后，会同时存在两个class，但是后者会覆盖前者。

（3）移除样式

上述例子中HTML代码变成：

<p class= “high another” title = “选择你最喜欢的水果.”>你最喜欢的水果是？</p>

两个class的值同时存在，因此想要删除class的某个值，可以使用removeClass()方法。

例如：

$(“p”).removeClass(“high”) ;

输出结果为：

<p class= “another” title = “选择你最喜欢的水果.”>你最喜欢的水果是？</p>

要把两个class都删除就要使用两次removeClass()方法。

另外，还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时，就会将class的值全部删除，jQuery代码如下：

$(“p”).removeClass( ) ;

此时HTML的结果为：

<p  title = “选择你最喜欢的水果.”>你最喜欢的水果是？</p>

（4）切换样式

toggle()方法的作用是交替执行代码③和代码④两个函数，如果元素原来是显示的，则隐藏它；如果元素原来是隐藏的，则显示它。此时，toggle()方法主要是控制行为上的重复切换。

另外，jQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。例如，有HTML代码如下：

<p class= “high another” title = “选择你最喜欢的水果.”>你最喜欢的水果是？</p>

对<p>元素进行toggleClass()方法操作：

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

<p>元素的HTML代码变成：

<p class= “high” title = “选择你最喜欢的水果.”>你最喜欢的水果是？</p>

再执行一次$(“p”).toggleClass(“another”) ;       <p>元素的HTML代码变成：

<p class= “high another” title = “选择你最喜欢的水果.”>你最喜欢的水果是？</p>

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

hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。例如，可以使用下面的代码来判断<p>元素是否含有“another”的class：

$(“p”).hasClass(“another”) ;

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

（1）html()方法

此方法类似于javascript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。为了更清楚地展示效果，将<p>元素的HTML代码改成：

<p title = “选择你最喜欢的水果.”><strong>你最喜欢的水果是？</strong></p>

然后用html()方法对<p>元素进行操作：

var p_html = $(“p”).html() ;

alert(p_html) ;

如果需要设置某元素的HTML代码，那么也可以使用该方法，不过需要为它传递一个参数，例如，要设置<p>元素的HTML代码，可以使用如下代码：

$("p").html("<strong>你最喜欢的水果是？</strong>");

（2）text()方法

此方法类似于javascript中的innerText属性，用来读取或设置某个元素中的文本内容，例如：HTML代码如下：

<p title = “选择你最喜欢的水果.”><strong>你最喜欢的水果是？</strong></p>

用text()方法对<p>元素进行操作：

var p_text = $(“p”).text() ;

alert(p_text) ;

与html()方法一样，如果需要为某元素设置文本内容，那么也需要传递一个参数。例如对<p>元素设置文本内容，代码如下：

$(“p”).text(“你最喜欢的水果是？”) ;

（3）val()方法

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

例如，邮箱登陆界面，默认状态下，邮箱地址文本框和邮箱密码框内分别有“请输入邮箱地址”和“请输入邮箱密码”的提示.

当将鼠标聚焦到邮箱地址文本框时，文本框内的“请输入邮箱地址”文字将被清空。

如果没有在邮箱地址框中输入任何内容，然后将鼠标焦点聚焦到密码输入框，则会发现密码输入框的内容被清空了同时邮箱地址输入框的提示也被还原了。

实现步骤如下：

HTML代码：

<input type="text" id="address" value="请输入邮箱地址"/>

<input type="text" id="password" value="请输入邮箱密码"/>

<input type="button" value="登录"/>

jQuery代码：

$(function(){

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

var txt_value = $(this).val();    //获取地址文本框的值

if (txt_value == '请输入邮箱地址') {

$(this).val("");

}

});

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

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

if (txt_value == "") {

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

}

})

//对密码框进行操作

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

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

if (txt_value == "请输入邮箱密码") {

$(this).val("");

}

})

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

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

if (txt_value == "") {

$(this).val("请输入邮箱密码");

}

})

});

在该例子中，也可以使用表单元素的defaultValue属性来实现同样的功能，defaultValue属性包含该表单元素的初始值。代码如下：

$(function(){

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

var txt_value = $(this).val();    //获取地址文本框的值

if (txt_value == this.defaultValue) {

$(this).val("");

}

});

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

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

if (txt_value == "") {

$(this).val(this.defaultValue);

}

})

//对密码框进行操作

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

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

if (txt_value == this.defaultValue) {

$(this).val("");

}

})

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

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

if (txt_value == "") {

$(this).val( this.defaultValue);

}

})

});

val()方法还有另外一个用处，就是它能使select（下拉列表框）、checkbox（多选框）和radio（单选框）相应的选项被选中，在表单操作中经常用到。

下面构建一个网页来演示val()方法的选中功能。

HTML代码如下：

<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>

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

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

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

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

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

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

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

该网页中有一些元素是默认选中的，可以通过val()方法改变它们的选中项。如果要使第1个下拉框的第2项被选中，下拉列表的第2项和第3项被选中，可以使用以下jQuery代码实现：

$("#single").val("选择2号");

$("#multiple").val(["选择2号","选择3号"]);

和下面的代码等价：

$(":checkbox").val(["chekc2","check3"]);

$(":radio").vla("[radio2]");

11.遍历节点

（1）children()方法

该方法用于取得匹配元素的子元素集合。

根据DOM树的结构，可以知道各个元素之间的关系以及它们子节点的个数。

例如，有HTML代码如下：

<p title = “选择你最喜欢的水果.” >你最喜欢的水果是？</p>

<ul>

<li title = ‘苹果’>苹果</li>

<li title = ‘橘子’>橘子</li>

<li title = ‘菠萝’>菠萝</li>

</ul>

jQuery代码如下：

var $body = $("body").children();

var $p = $("p").children();

var $ul = $("ul").children();

alert($body.length);    //<body>元素下有2个子元素

alert($p.length);       //<p>元素下有0个子元素

alert($ul.length);       //<ul>元素下有3个子元素

for(var i = 0,len = $ul.length;i<length;i++){

alert($ul[i].innerHTML);       //循环输出<li>元素的HTML内容

}

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

（2）next()方法

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

从DOM树的结构中可以知道<p>元素的下一个同辈节点是<ul>，因此可以通过next()方法获取<ul>元素，代码如下：

var $p1 = $(“p”).next() ;

得到的结果将是：

<ul>

<li title = ‘苹果’>苹果</li>

<li title = ‘菠萝’>菠萝</li>

</ul>

（3）prev()方法

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

从DOM树的结构中可以知道<ul>元素的上一个同辈节点是<p>，因此可以通过prev()方法来获取<p>元素，代码如下：

var $ul = $(“ul”).prev() ;

得到的结果将是：

<p title = “选择你最喜欢的水果.”>你最喜欢的水果是？</p>

（4）siblings()方法

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

以DOM树的结构为例。<ul>元素和<p>元素互为同辈元素，<ul>元素下的3个<li>元素也都互为同辈元素。如果要获取<p>元素的同辈元素，则可以使用如下代码：

var $p2 = $(“p”).siblings() ;

得到的结果将是：

<ul>

<li title = ‘苹果’>苹果</li>

<li title = ‘橘子’>橘子</li>

<li title = ‘菠萝’>菠萝</li>

</ul>

（5）closest()

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

比如，给点击的目标元素的最近的li元素添加颜色，可以使用如下代码：

$(document).bind(“click”,function(e){

$(e.target).closest(“li”).css(“color” , “red”) ;

})

12.CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式信息，然而在jQuery中，这些都是非常的简单。

可以直接利用css()方法获取元素的样式属性，jQuery代码如下：

$(“p”).css(“color”) ;

css()方法也可以同时设置多个样式属性，代码如下：

$("p").css({"color":"red","fontSize":"30px"});

对透明度的设置，可以直接用opacity属性，如下代码：

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

如果需要获取某个元素的height属性，则可以通过如下jQuery代码实现：

$(element).css(“height”)        ;

在jQuery中还有另外一种方法也可以获取元素的高度，即height()。它的作用是取得匹配元素当前计算的高度值（px）。jQuery代码如下：

$(“p”).height() ;

height()方法如果传递的值是一个参数，则默认单位是px，如果要用其他单位，则必须传递一个字符串。jQuery代码如下：

$(“p”).height(100) ;

$(“p”).height(“10em”) ;

在CSS-DOM中，关于元素定位有以下几个经常使用的方法：

（1）offset()方法

它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。例如，用它来获取<p>元素的偏移量，jQuery代码如下：

var offset = $(“p”).offset() ;      //获取<p>元素的offset()

var left = $(“p”).left() ;          //获取左偏移

var top = $(“p”).top() ;          //获取右偏移

（2）position()方法

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

var position = $(“p”).position() ;       //获取<p>元素的position()

var left = $(“p”).left() ;                    //获取左偏移

var top = $(“p”).top() ;                    //获取右偏移

（3）scrollTop()方法和scrollLeft()方法

这两个方法的作用分别是获取元素的滚动条顶端的距离和距左侧的距离。例如使用下面的代码获取<p>元素的滚动条距离：

var $p = $(“p”) ;

var scrollTop = $p.scrollTop() ;

var scrollLeft = $p.scrollLeft() ;

另外，可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。例如使用如下代码控制元素内的滚动条滚动到距顶端300和距左侧300的位置：

$(“textarea”).scrollTop(300) ;

$(“textarea”).scrollLeft(300) ;