第4章 HTML元素属性操作

前面两章一直立足于HTML元素的查找，包括selector（选择器）的种类以及使用方法，和各种selector filter（选择器过滤器）。使用selector和filter可以非常方便的查询网页中的元素，那么找到这些元素之后呢？

在网页中查找元素的目的是为了对元素进行操作（如：修改样式、属性、显示的文本、动态效果等），从本章开始，主要讲解针对JQuery对象的操作方法：

l 属性操作（通过JQuery对象设置HTML元素的各个属性，或内容）

l JQuery对象的的进一步过滤（相当于子查询）

l DOM（文档对象模型）处理

l CSS（样式表）处理

l HTML元素事件处理

l HTML元素特效

l AJAX In JQuery

通过各章节的详细讲解，相信会使大家的JavaScript编写和JQuery框架的使用达到一个新的水平。

本章要讲解的便是属性操作。

1. 操作元素属性

元素属性一般称作property或attribute（在.NET中被叫做特性，用于为类型和类型成员添加元数据），本书中我们使用attribute表示属性。

在HTML中，什么表示属性呢？相信各位读者并不陌生，对于HTML代码<input type = ”text” name = “txt” value=”Hello World” />，定义了一个文本框表单项，在这行HTML代码中，input叫做元素名称（或标签名称），type、name、value这三个叫做input元素的属性，“text”叫做type属性的值，相应的“txt”叫做name属性的值。

元素属性的操作，就是通过JQuery对象，读取或设置元素属性的值。

1) attr(name)

取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined。使用语法：

jQuery(“selector”).attr(name) 或 $(“selector”).attr(name)

参数name：属性名。

返回值：JQuery对象。

值得注意的是，attr(name)函数返回值仍然为JQuery对象，它所包含的HTML元素于调用该函数前没有发生任何变化，所以，JQuery允许我们使用Chain的编码风格简化编码。

我们需要解释一下“取得第一个元素的属性值”，这里的第一个到底值得什么意思呢？我们学习过，一个JQuery对象中可能会包含多个HTML元素，那么上述代码中的jQuery(“selector”)就是一个JQuery对象，里面可能包装了多个HTML元素，这个jQuery对象的attr函数是用来取出它包含的HTML元素中，第一个元素的属性值。如果JQuery对象中的第一个HTML元素没有定义指定的属性（就算第2个元素有，或其它所有的元素都有），该方法返回underfined。有如下HTML代码：

<div>

</div>

要求编写JavaScript代码，找出alt属性为“服务卡”的图片的路径，并在浏览器中打开给图片，JQuery代码如下：

jQuery(function() {

$("img").each(function(index) {

if ($(this).attr("alt") == "服务卡") {

window.open($(this).attr("src"), $(this).attr("alt"));

}

});

</script>

运行该HTML页面，将会打开一个新的浏览器窗口（或新的选项卡），显示alt属性为“服务卡”的那张图片。

我们分析一下如上代码，首先通过标签选择器找到页面中的所有图片元素，接下来使用each函数对JQuery对象中的所有HTML元素迭代，对于每一个HTML元素（实际上是图片），使用$(this)进行包装，目的是借助于JQuery对象的强大处理能力，一旦包装成JQuery对象之后，你便可以为所欲为！

2) attr(key, value)

上一个函数是去属性值，该函数则是为指定的属性（key）赋值（value），attr(name)获取JQuery对象中第一个HTML元素的属性值，attr(key, value)则是为JQuery对象中所有HTMl元素的key属性赋value值。使用语法：

jQuery(“selector”).attr(key, value)

参数key：属性名称，使用name作为参数名可能会更好一些，本书使用的是JQuery API中的定义。

参数value：要为属性赋的值。

返回值：JQuery对象。

值得注意的是，attr(key, value)函数返回值仍然为JQuery对象，它所包含的HTML元素于调用该函数前没有发生任何变化，所以，JQuery允许我们使用Chain的编码风格简化编码。有如下HTML代码：

function showImage(ele) {

// Code here

}

</script>

#container{

width:600px;

border:solid 1px silver;

text-align:center;

}

#current img{

width:128px;

height:128px;

}

#current div{

font-size:1.2em;

}

#images{

border-top:solid 1px silver;

}

#images img{

width:64px;

height:64px;

cursor:pointer;

margin:10px 5px 10px 5px;

}

</style>

……

</div>

</div>

在JavaScript函数showImage(ele){ }中填写代码，当用鼠标点击三个图片中任意一个时，将被点击的图片信息拷贝到“current”中。要实现该功能，首先获取被点击的图片，在上述代码中，已经通过参数ele传递了过去，接下来需要找到“current”中的图片，我们可以使用ID+标签选择器，最后取出被点击img的src和alt属性，并设置到“current”中的图片。实现后的代码如下：

function showImage(ele) {

$("#current img").attr("src", $(ele).attr("src")).attr("alt", $(ele).attr("alt"));

$("#current div").text($(ele).attr("alt"));

}

</script>

代码非常简单，运行结果如下（图4-1）：

图4-1

3) attr(properties)

在上一小节的例子中，有如下JavaScript代码：

function showImage(ele) {

$("#current img").attr("src", $(ele).attr("src")).attr("alt", $(ele).attr("alt"));

$("#current div").text($(ele).attr("alt"));

}

</script>

因为需要修改两个HTML元素属性，就调用了两次attr(key, value)方法，获取你觉得有点繁琐，JQuery中为你多提供了一种选择，就是函数attr(properties)，该函数使用语法：

jQuery(“selector”).attr(properties)

参数properties：包装属性的键值对，类型为JSON数据（在AJAX一章将会详细讲解）。

返回值：JQuery对象。

使用该方法允许一次为HTML元素设置对个属性，现在将上述的JavaScript代码该为如下：

function showImage(ele) {

$("#current img").attr({src:$(ele).attr("src"), alt:$(ele).attr("alt")});

$("#current div").text($(ele).attr("alt"));

}

</script>

上述代码将两次属性的设置（src、alt）使用一个attr(properties)函数完成了。其实，照上面的写法，并没有让代码变的简单，主要原因是attr(properties)使用的位置有些不好，如果用来设置其它函数（或组件）返回的JSON对象到元素属性，那就方便多了。

4) attr(key, function)

该函数同样用来为JQuery对象中的所有HTML元素key属性赋值，但要赋的值没有直接提供，而是作为一个function的返回值，使用语法：

jQuery(“selector”).attr(key, function)

参数key：要设置的属性名。

参数function：作为提供值的函数，该函数可以接受一个参数index，表示要设置的当前元素在JQuery对象中所有元素中的下标（从0开始），函数的上下文（this）为当前HTML元素。

大家可能会对作为参数的function有所困惑，我们知道，attr(key, value)会对JQuery对象中的所有HTML元素指定的属性赋值，赋值方法是直接将value设置到key属性。attr(key, function)函数也只是为JQuery对象中所有的HTML元素指定的的属性赋值，只是值需要通过function进行计算，那么，JQuery对象中有多少个HTML元素，function就需要计算多少次，每次计算都会对应一个HTML元素，所以，这个function就与JQuery对象的当前HTML元素关联起来了，首先function的参数为元素下标，function的上下文就为当前元素。

同样使用上面的HTML代码，编写如下JavaScript：

function showImage(ele) {

$("img").attr("title", function() {

return this.src;

});

}

</script>

代码执行后，每个图片的title属性就被赋值为它的src属性。

5) removeAttr(name)

前面三个函数都是为属性赋值，该函数则是将属性从JQuery对象的每一个HTML元素中删除。使用语法：

jQuery(“selctor”).removeAttr(name)

参数name：要移除的属性名。

返回值：JQuery对象。

有如下HTML代码：

</div>

执行如下JavaScript代码：

jQuery(function() {

$("#images img").removeAttr("src");

});

</script>

运行后，所有img的src属性将被移除，页面中将看不到原始的图片。JavaScript代码执行后，上述HTML代码将变为：

</div>

2. CSS

网页的动态，一般分为三种，一是数据的动态交换（往往需要AJAX），再者是响应用户的交互（往往依赖于鼠标、键盘事件），最后是页面样式的动态效果。

网页的动态效果一般是通过JavaScript，根据用户的不同输入，修改页面HTML元素的样式。直接修改样式表（style）我们在后面章节讲解，本节将详细讲解通过JavaScript（JQuery）修改HTML元素的class属性，即：为HTML元素添加或删除样式。

1) addClass(class)

前面我们说到了使用JavaScript（JQuery）来控制页面的动态效果，即为HTML元素添加或删除样式，我们知道，只要将HTML元素的“style”属性设置为样式表中定义的“类选择器”，相应的HTML元素就会显示样式中定义的效果。相反，如果移除“style”属性，HTML元素上的效果也会消失。

addClass(class)函数就是为JQuery对象封装的HTML元素来设置样式的，使用语法：

jQuery(“selector”).addClass(class)

参数class：样式表中的类选择器名称列表（用空格分割）。

返回值：JQuery对象。

这里要注意，一是jQuery(“selector”)中的selector，它可以使任何一种组合的合法选择器，只要能通过该selector查找到页面中的HTML元素，addClass(class)函数就能为这些HTML元素设置样式；二是addClass(class)函数的返回值仍然是JQuery对象，就是说它允许使用Chain的编码方式来简化代码结构。

在前面章节有这么一个案例，设置表格的奇、偶行显示不同的背景色，当时直接使用css函数，但我们往往对奇、偶行设置的效果不仅仅只是背景色，如果这种效果定义在样式表中，就可以使JQuery代码大大简化，而且样式表中的样式也更容易更新和维护。有如下HTML代码：

.data{

border:solid 1px blue;

width:500px;

font-size:12px;

}

.data th{

background-color:SkyBlue;

text-align:left;

border-bottom:solid 1px SkyBlue;

}

.data td{

border-bottom:solid 1px SkyBlue;

}

.data .even-row{

background-color: #DEEBFB;

}

</style>

……

<thead>

<tr>

<th>User Name</th><th>Email</th><th>MobilePhone</th>

</tr>

</thead>

<tbody>

<tr>

<td>Frank</td><td title="first">eagle@126.com</td><td>13100006688</td>

</tr>

<tr>

</tr>

<tr>

<td>Hello</td><td>Hello@126.com</td><td>13888886688</td>

</tr>

<tr>

<td>World</td><td>World@126.com</td><td>13566668866</td>

</tr>

</tbody>

</table>

要将上述表格中的偶数数据行（不包括标题行），并将其样式（style属性）设置为样式表中定义的even-style，JQuery代码如下：

jQuery(function() {

$(".data>tbody>tr:nth-child(even)").addClass("even-row");

});

</script>

显示效果如下（图4-2）：

图4-2

如果对偶数行的样式不满意，或者想多添加一些效果，只需要改样式表中的even-row即可，对于JQuery代码不需要做任何更改。现在希望将偶数行数据字体改为红色，只要修改even-row样式如下：

.data .even-row{

background-color: #DEEBFB;

color:Red;

}

使用addClass(class)函数，一次可以为JQuery中的HTMl元素添加多个样式。函数参数可以一次接收多个样式类，各样式类间用空格分隔。

2) removeClass(class)

与addClass(class)相反，removeClass(class)用来移除JQuery对象中HTML元素的样式，使用语法如下：

jQuery(“selector”).removeClass(class)

参数class：要移除的样式类名称列表（各样式用空格分隔）。

返回值：JQuery对象。

使用注意事项于addClass(class)函数一样，这里不再详述。要实现如下效果（图4-3）：

图4-3

当点击“Clear Style”按钮时，清除表格中数据偶数行的效果，只需在按钮的点击事件中，找到所有的数据偶数行，并调用removeClass(“even-style”)即可，修改后的JQuery代码如下：

jQuery(function() {

$(".data>tbody>tr:nth-child(even)").addClass("even-row");

});

function clearStyle() {

$(".data>tbody>tr:nth-child(even)").removeClass("even-row");

}

</script>

修改后的HTML代码如下：

<thead>

<tr>

<th>User Name</th><th>Email</th><th>MobilePhone</th>

</tr>

</thead>

<tbody>

<tr>

<td>Frank</td><td title="first">eagle@126.com</td><td>13100006688</td>

</tr>

<tr>

</tr>

<tr>

<td>Hello</td><td>Hello@126.com</td><td>13888886688</td>

</tr>

<tr>

<td>World</td><td>World@126.com</td><td>13566668866</td>

</tr>

</tbody>

</table>

<button onclick="clearStyle();">Clear Style</button>

在浏览器中打开页面，并点击“Clear Style”按钮，结果如下（图4-4）：

图4-4

3) toggleClass(class)

“toggle”表示开关的意思，toggleClass(class)函数同样是样式的开关（添加或删除样式），用来为JQuery对象中的HTML元素添加或删除样式。

那么什么情况下添加，又什么情况下删除呢？该函数很有意思，使用JQuery对象调用该函数时，它会检查当前的HTML元素（函数会在JQuery对象中所有的HTML元素上起作用），如果元素有函数参数所指定的样式，那么就移除该样式，否则就添加样式。使用语法如下：

jQuery(“selector”).toggle(class)

参数class：要切换的样式类列表（各样式类用空格分隔）。

返回值：JQuery对象。

调用该函数时的注意事项于addClass(class)一样，这里不再详述。要实现如下效果（图4-5）：

图4-5

当点击“样式开关”按钮时，切换数据偶数行的样式。同样找到数据偶数行，然后调用JQuery对象的toggleClass(“even-style”)函数，JQuery代码如下：

jQuery(function() {

$(".data>tbody>tr:nth-child(even)").addClass("even-row");

});

function toggleStyle() {

$(".data>tbody>tr:nth-child(even)").toggleClass("even-row");

}

</script>

HTML代码同上，这里不再显示。

我们再对表格数据行样式进行扩展，现在要切换奇、偶行之间的样式，JQuery代码又该如何编写呢？方法与上面的相似，请读者朋友自己实现。

4) toggleClass(class, switch)

该函数同样是一个样式开关，与toggleClass(class)函数不同之处在于，该函数进行样式切换时，是根据第二个参数（switch）的bool值来添加或删除样式的，如果switc为true就添加，否则就删除。该函数的使用语法：

jQuery(“selector”).toggleClass(class, switch)

参数class：要切换的样式类列表（各样式类用空格分隔）。

参数switch：切换开关，bool类型，通常是一个表达式。

返回值：JQuery对象。

函数的switch参数通常作为一个值为bool类型的表达式。同样使用上面的HTML代码，要实现如下效果（图4-6）：

图4-6

点“样式开关”按钮三次，切换数据行偶数行的样式，JQuery代码如下：

var count = 0;

function toggleStyle() {

var sw = (++count) % 3 == 0;

$(".data>tbody>tr:nth-child(even)").toggleClass("even-row", sw);

}

</script>

3. HTML 内容

页面动态处理的另一种就是，通过JavaScript修改网页中元素的内容（新的内容往往通过AJAX从服务器端获取）。在JavaScript中，可以通过HTMl元素（DOM对象）的innerText属性或innerHTML属性来读取或设置元素的内容，使用比较简单，那么为什么还要使用JQuery呢？

大家试想，在设置HTMl元素前首先要找到HTML元素，使用JQuery的selector查找元素确实是太方便了，得到JQuery对象后，通过JQuery对象直接设置HTML元素的内容显然是最方便的。

1) html()

获取JQuery对象中第一个HTML元素的内容（作为HTML返回），该函数不能用于XML文档（通常是AJAX返回的XML），但可以应用在XHTML。使用语法：

jQuery(“selector”).html()

返回值：字符串（内容为HTML）。

请大家注意，该函数范围结果为字符串，不再是JQuery对象。有如下HTML代码：

<ul>

<li>Hello World.</li>

<li>Welcome!</li>

</ul>

</div>

要获取container中的HTML内容，在网页中添加如下JQuery代码：

jQuery(function() {

var str = $("#container").html();

});

</script>

运行后，变量str的内容为：

<ul>

<li>Hello World.</li>

<li>Welcome!</li>

</ul>

2) html(value)

于html()函数相反，html(value)用于为JQuery对象中所有的HTML元素设置内容（HTML格式），该函数不能用于XML文档（通常是AJAX返回的XML），但可以应用在XHTML。使用语法：

jQuery(“selector”).html(value)

参数value：要设置的内容（HTML格式）。

返回值：JQuery对象。

该函数于html()返回类型不同，为JQuery对象，所以支持Chain格式编码。有如下HTML代码：

<ul>

<li>Hello World.</li>

<li>Welcome!</li>

</ul>

</div>

<ul>

<li>Hello World.</li>

<li>Welcome!</li>

</ul>

在页面中添加如下JQuery代码：

jQuery(function() {

$("#container li").html("<h2>JQuery</h2>");

});

</script>

运行结果为：

<ul>

<li><h2>JQuery</h2></li>

</ul>

</div>

<ul>

<li>Hello World.</li>

<li>Welcome!</li>

</ul>

html(value)函数修改了JQuery对象中所有的HTML元素，运行效果如下（图4-7）：

图4-7

4. 文本内容

与HTML内容相对应，部分元素中包含的是普通的字符串，如<span>Hello JQuery</span>中，span元素内部的就是普通的文本。另外，还有一种特殊情况，我想在网页中显示一个字符串：“<h2>Header</h2>”，注意，这里不是要显示一个二级标题，而是将<h2>标签也在浏览器中显示，不被浏览器解析。那么在源代码中我们要编写为：“<h2>Header</h2>”，其中<叫做HTML实体。

显然这种写法很不方便，可读性也很差，尤其是在动态显示数据时！JQuery为我们解决了这种问题。

1) text()

获取JQuery对象中所有HTML元素的内容（作为普通文本，忽略HTML标签），结果由所有HTML元素的内容组合而成，该方法对XML和HTML都有效。使用语法：

jQuery(“selector”).text()

返回值：字符串（不包含HTML标签）。

注意：html()函数只返回JQuery对象中的第一个HTML元素内容（HTML格式），而text()返回所有元素的内容（文本格式）。有如下HTML代码：

<ul>

<li>Hello World.</li>

<li>Welcome!</li>

</ul>

</div>

JQuery代码如下：

jQuery(function() {

$("#container").text();

});

</script>

结果为：

Hello World.Welcome!

2) text(value)

为JQuery对象中所有的HTML元素设置内容。使用语法：

jQuery(“selector”).text(value)

参数value：要设置的文本内容。

注意：如果参数value中包含HTML标签（即：<>符号），JQuery会对其进行HTML编码，将“<”字符编码为“<”，将“>”字符编码为“>”。有如下代码：

<ul>

<li>Hello World.</li>

<li>Welcome!</li>

</ul>

</div>

<ul>

<li>Hello World.</li>

<li>Welcome!</li>

</ul>

在页面中添加如下JQuery代码：

jQuery(function() {

$("#container li").text("<h2>JQuery</h2>");

});

</script>

执行结果为：

<ul>

<li><h2>JQuery</h2></li>

</ul>

</div>

<ul>

<li>Hello World.</li>

<li>Welcome!</li>

</ul>

text(value)函数修改了JQuery对象中所有的HTML元素，运行效果如下（图4-8）：

图4-8

5. 元素值

相信大家对表单都很熟悉，在网页中，用来提交用户数据给服务器的主要方式就是表单。在客户端通过JavaScript获取表单元素值也很重要（如客户端验证，AJAX等）。

JQuery中同样提供了方便的功能来操作表单原始的值（value）。

1) val()

获取JQuery对象中，第一个HTML元素的值（value属性）。该方法支持所有的表单元素，包括input、select、textarea等。如果HTML元素为多选，则返回一个数组。使用语法：

jQuery(“selector”).val()

返回值：字符串或数组。

该函数用于普通（非表单）元素没有意义。有如下HTML代码：

<option>Single</option>

<option>Single2</option>

</select>

<option selected="selected">Multiple</option>

<option>Multiple2</option>

<option selected="selected">Multiple3</option>

</select>

执行如下JQuery代码：

jQuery(function() {

$("p").append(

"<b>Single:</b> " + $("#single").val() +

" <b>Multiple:</b> " + $("#multiple").val().join(", ")

);

});

</script>

执行结果为：

<p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>

2) val(val)

为JQuery对象中所有的表单项赋值（设置value属性），使用语法：

jQuery(“selector”).val(value)

参数value：为表单项设置的值。

3) val(array)

该函数名称同上一个一样，不同之处是参数，该函数参数为数组类型，主要用来为check,select,radio等元素赋值。使用语法：

jQuery(“selector”).val(array)

参数array：为表单项设置的值。

常用的表单类中，有checkbox、select、radio等，这些表单项的特征就是都有多个选项供用户进行选择，val(array)函数就是用来设置这些表单项中的“选项”的。有如下HTML代码：

<table>

<tr>

<td>

</select>

</td>

</tr>

<tr>

<td>

<input name="gender" type="radio" value="男" />男

<input name="gender" type="radio" value="女" />女

</td>

</tr>

<tr>

<td>

<input name="fav" type="checkbox" value="爬山" />爬山

<input name="fav" type="checkbox" value="计算机" />计算机

<input name="fav" type="checkbox" value="路边小吃" />路边小吃

</td>

</tr>

</table>

页面显示结果如下图4-9：

图4-9

现在对页面中的表单元素进行初始化，添加如下JQuery代码：

jQuery(function() {

$("#province").val("广西");

$(":att[name=gender]").val(["女"]);

$(":att[name=fav]").val(["爬山","计算机"]);

});

</script>

将省份选择为“广西”，性别（name属性为gender）设置为女，爱好（name属性为fav）设置为“爬山”和“计算机”，运行后效果如下（图4-10）：

图4-10

posted on 2009-06-12 19:56 netEagle 阅读(1619) 评论(0) 编辑收藏举报