DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery第三課 修改元素屬性及內容的代碼
jQuery第三課 修改元素屬性及內容的代碼
編輯:JQuery特效代碼     
1. 操作屬性
上文介紹了如何篩選到需要的元素。得到了元素之後就要對其進行操作。一個常見的需求是遍歷得到的元素集,對每一個元素進行一個操作。jQuery提供的函數是
each(iterator),其中iterator是一個函數,接受一個整數作為參數,表示第幾個元素。看一個簡單的例子。
代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Operation</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('img').each(function(n) {
this.alt = "This is " + n + "th picture";
});
});
</script>
</head>
<body>
<h1>Image Gallery<br />March 13th,2010</h1>
<img src="img/bee.jpg" alt="" width="150px"/>
<img src="img/bright.jpg" alt="" width="150px"/>
<img src="img/crowd.jpg" alt="" width="150px"/>
<img src="img/pink.jpg" alt="" width="150px"/>
<img src="img/white.jpg" alt="" width="150px"/>
</body>
</html>

結果用Firebug查看下:

image

在上例中,采用了原生javascript的方法存取屬性,jQuery 提供了一個更加一般的方法來存取屬性,attr:

attr(name),如果name是字符串,獲得第一個元素的屬性的name的值;如果name是一個對象,則對象的屬性被作為元素的屬性而復制到包裝集的所有元素上。

attr(name,value),當name是字符串的時候,就把屬性name的值設置為value,當value是一個函數的時候,則對包裝集中的每個元素調用此函數,將其name的值設置為函數的返回值。

看一個簡單的例子,html代碼仍然使用上面的:
代碼如下:
<scripttype="text/javascript">
$(function() {
$('body').children().attr('title', function(n) {
return"This is "+ n + "th element";
});
$('img').attr('alt', 'A photo taken by YinZixin');
alert($('h1').attr('title'));
});
</script>

結果為:
image
要刪除屬性,使用removeAttr(name)方法。
要注意,屬性中有一個比較特殊的屬性class。class屬性十分常用,而他恰好又是javascript的關鍵字。要存取class屬性,需要使用className而不是class。例如:
$('img').attr('className', 'photo');class和其他屬性不一樣,一個元素可以有多個class,它們用空格隔開,例如 class='big strong',正因為class特殊而又常用,jQuery有專門的方法處理class屬性。
addClass(names),添加類;
removeClass(names), 刪除類;
toggleClass(names),如果元素有該類,則刪除,否則添加。
其中的names是一個字符串,可以是由空格分隔的多個類名組成。addClass和removeClass使用簡單不再舉例,toggleClass尤為簡單實用,下面看一個例子,html代碼仍然用上面的:
代碼如下:
<style type="text/css">
.red_border
{
border: solid 2px red;
}
</style>
<script type="text/javascript">
function swap() {
$('img').toggleClass('red_border');
}
$(function() {
$('img').mouseover(swap);
$('img').mouseout(swap);
});
</script>

其中最後兩句是為img注冊事件,鼠標進入和離開的事件是一樣的,使用toggleClass它能自動判斷當前的類是否存在從而采取不同的操作。
有時候我們不需要為某個元素加載某個class,只需要改變其css屬性中的某一項,可以采用css方法,css方法在前面兩篇文章中早已用到,不再介紹。
2. 操作DOM節點
要移動一些內容到當前包裝集內的元素的內部,可以用append(content)方法,這裡的content可以是一個html片段,也可以是元素,或者包裝集。看一個例子:
代碼如下:
<head>
<title>jQuery Operation</title>
<scripttype="text/javascript"src="jquery-1.3.2.js"></script>
<scripttype="text/javascript">
$(function() {
$('td:odd').append($('span'));
$('div:first').append($('p')).append('<span style="color:red;font-size:small">sub title</span>');
});
</script>
</head>
<body>
<div></div>
<table>
<tr><td>1</td><td></td></tr>
<tr><td>2</td><td></td></tr>
</table>
<span>Hello JQuery</span>
<p>Title</p>
</body>
</html>

最終結果如下:
image
還有一個appendTo(target),它和append方法的方向反一反,append把參數添加到調用者內部,appendTo把調用者添加到參數的內部。還有幾對方法和append,appendTo類似:

prepend,prependTo:append方法當目的元素內部中有其他元素的時候,添加的元素是在原有的元素的最後,prepend則是在最前。

before,insertBefore:插在目的元素之前一個,而不是內部

after,insertAfter:插在目的元素之後。

要刪除元素,可以使用remove 或者 empty方法。注意remove會把選中的元素從頁面上刪除,同時把這些元素作為返回值返回,這些元素不會被垃圾收集,可以對他們進行進一步操作,也可以用append之類的方法重新顯示到頁面上,而empty方法則徹底刪除元素。

3. 操作表單元素的值
操作表單元素的值十分常用,但並不容易。jQuery提供了一個val方法來簡化操作。不帶參數的val()方法返回當前元素的值。val(values)方法用來將當前元素的值設置為values,如果values是一個數組,則更為有趣一點,它用於匹配select元素中的值,包括在values中的值將會變成選中狀態。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved