第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>
<img src="icons/1.png" alt="报表" />
<img src="icons/2.png" alt="服务卡" />
<img src="icons/3.png" alt="曲线图"/>
</div>
要求编写JavaScript代码,找出alt属性为“服务卡”的图片的路径,并在浏览器中打开给图片,JQuery代码如下:
<script type="text/javascript">
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代码:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
function showImage(ele) {
// Code here
}
</script>
<style type="text/css">
#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 id="container">
<div id="current">
<img src="icons/1.png" alt="报表" />
<div>报表</div>
</div>
<div id="images">
<img src="icons/1.png" alt="报表" onclick="showImage(this);" />
<img src="icons/2.png" alt="服务卡" onclick="showImage(this);" />
<img src="icons/3.png" alt="曲线图" onclick="showImage(this);"/>
</div>
</div>
在JavaScript函数showImage(ele){ }中填写代码,当用鼠标点击三个图片中任意一个时,将被点击的图片信息拷贝到“current”中。要实现该功能,首先获取被点击的图片,在上述代码中,已经通过参数ele传递了过去,接下来需要找到“current”中的图片,我们可以使用ID+标签选择器,最后取出被点击img的src和alt属性,并设置到“current”中的图片。实现后的代码如下:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
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代码:
<script type="text/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代码该为如下:
<script type="text/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:
<script type="text/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 id="images">
<img src="icons/1.png" alt="报表" />
<img src="icons/2.png" alt="服务卡" />
<img src="icons/3.png" alt="曲线图" />
</div>
执行如下JavaScript代码:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function() {
$("#images img").removeAttr("src");
});
</script>
运行后,所有img的src属性将被移除,页面中将看不到原始的图片。JavaScript代码执行后,上述HTML代码将变为:
<div id="images">
<img alt="报表" />
<img alt="服务卡" />
<img alt="曲线图" />
</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代码:
<style type="text/css">
.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>
……
<table class="data" cellpadding="2" cellspacing="0">
<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>
<td title="second">Jack</td><td>jack@126.com</td><td>13544446688</td>
</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代码如下:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
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代码如下:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function() {
$(".data>tbody>tr:nth-child(even)").addClass("even-row");
});
function clearStyle() {
$(".data>tbody>tr:nth-child(even)").removeClass("even-row");
}
</script>
修改后的HTML代码如下:
<table class="data" cellpadding="2" cellspacing="0">
<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>
<td title="second">Jack</td><td>jack@126.com</td><td>13544446688</td>
</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代码如下:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
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代码如下:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
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代码:
<div id="container">
<ul>
<li>Hello World.</li>
<li>Welcome!</li>
</ul>
</div>
要获取container中的HTML内容,在网页中添加如下JQuery代码:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
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代码:
<div id="container">
<ul>
<li>Hello World.</li>
<li>Welcome!</li>
</ul>
</div>
<ul>
<li>Hello World.</li>
<li>Welcome!</li>
</ul>
在页面中添加如下JQuery代码:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function() {
$("#container li").html("<h2>JQuery</h2>");
});
</script>
运行结果为:
<div id="container">
<ul>
<li><h2>JQuery</h2></li>
<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代码:
<div id="container">
<ul>
<li>Hello World.</li>
<li>Welcome!</li>
</ul>
</div>
JQuery代码如下:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function() {
$("#container").text();
});
</script>
结果为:
Hello World.Welcome!
2) text(value)
为JQuery对象中所有的HTML元素设置内容。使用语法:
jQuery(“selector”).text(value)
参数value:要设置的文本内容。
注意:如果参数value中包含HTML标签(即:<>符号),JQuery会对其进行HTML编码,将“<”字符编码为“<”,将“>”字符编码为“>”。有如下代码:
<div id="container">
<ul>
<li>Hello World.</li>
<li>Welcome!</li>
</ul>
</div>
<ul>
<li>Hello World.</li>
<li>Welcome!</li>
</ul>
在页面中添加如下JQuery代码:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function() {
$("#container li").text("<h2>JQuery</h2>");
});
</script>
执行结果为:
<div id="container">
<ul>
<li><h2>JQuery</h2></li>
<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代码:
<p></p><br/>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
执行如下JQuery代码:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
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>省份:</td>
<td>
<select id="province">
<option>广东</option>
<option>广西</option>
<option>湖南</option>
</select>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input name="gender" type="radio" value="男" />男
<input name="gender" type="radio" value="女" />女
</td>
</tr>
<tr>
<td>爱好:</td>
<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代码:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function() {
$("#province").val("广西");
$(":att[name=gender]").val(["女"]);
$(":att[name=fav]").val(["爬山","计算机"]);
});
</script>
将省份选择为“广西”,性别(name属性为gender)设置为女,爱好(name属性为fav)设置为“爬山”和“计算机”,运行后效果如下(图4-10):
图4-10