快捷導(dǎo)航

jQuery第三課修改元素屬性及內(nèi)容的代碼

更新時(shí)間：2010年03月14日 16:55:23 作者：

上文介紹了如何篩選到需要的元素。得到了元素之后就要對其進(jìn)行操作。

1. 操作屬性
上文介紹了如何篩選到需要的元素。得到了元素之后就要對其進(jìn)行操作。一個(gè)常見的需求是遍歷得到的元素集，對每一個(gè)元素進(jìn)行一個(gè)操作。jQuery提供的函數(shù)是
each(iterator)，其中iterator是一個(gè)函數(shù)，接受一個(gè)整數(shù)作為參數(shù)，表示第幾個(gè)元素?？匆粋€(gè)簡單的例子。

復(fù)制代碼代碼如下:

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

結(jié)果用Firebug查看下：

在上例中，采用了原生javascript的方法存取屬性，jQuery 提供了一個(gè)更加一般的方法來存取屬性，attr：

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

attr(name,value),當(dāng)name是字符串的時(shí)候，就把屬性name的值設(shè)置為value，當(dāng)value是一個(gè)函數(shù)的時(shí)候，則對包裝集中的每個(gè)元素調(diào)用此函數(shù)，將其name的值設(shè)置為函數(shù)的返回值。

看一個(gè)簡單的例子，html代碼仍然使用上面的：

復(fù)制代碼代碼如下:

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

結(jié)果為：

要?jiǎng)h除屬性，使用removeAttr(name)方法。
要注意，屬性中有一個(gè)比較特殊的屬性class。class屬性十分常用，而他恰好又是javascript的關(guān)鍵字。要存取class屬性，需要使用className而不是class。例如：
$('img').attr('className', 'photo');class和其他屬性不一樣，一個(gè)元素可以有多個(gè)class，它們用空格隔開，例如 class='big strong',正因?yàn)閏lass特殊而又常用，jQuery有專門的方法處理class屬性。
addClass(names),添加類；
removeClass(names), 刪除類；
toggleClass(names),如果元素有該類，則刪除，否則添加。
其中的names是一個(gè)字符串，可以是由空格分隔的多個(gè)類名組成。addClass和removeClass使用簡單不再舉例，toggleClass尤為簡單實(shí)用，下面看一個(gè)例子,html代碼仍然用上面的:

復(fù)制代碼代碼如下:

 
<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注冊事件，鼠標(biāo)進(jìn)入和離開的事件是一樣的，使用toggleClass它能自動判斷當(dāng)前的類是否存在從而采取不同的操作。
有時(shí)候我們不需要為某個(gè)元素加載某個(gè)class，只需要改變其css屬性中的某一項(xiàng)，可以采用css方法，css方法在前面兩篇文章中早已用到，不再介紹。
2. 操作DOM節(jié)點(diǎn)
要移動一些內(nèi)容到當(dāng)前包裝集內(nèi)的元素的內(nèi)部，可以用append(content)方法，這里的content可以是一個(gè)html片段，也可以是元素，或者包裝集。看一個(gè)例子：

復(fù)制代碼代碼如下:

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

最終結(jié)果如下：

還有一個(gè)appendTo(target)，它和append方法的方向反一反，append把參數(shù)添加到調(diào)用者內(nèi)部，appendTo把調(diào)用者添加到參數(shù)的內(nèi)部。還有幾對方法和append,appendTo類似：

prepend,prependTo:append方法當(dāng)目的元素內(nèi)部中有其他元素的時(shí)候，添加的元素是在原有的元素的最后，prepend則是在最前。

before,insertBefore:插在目的元素之前一個(gè)，而不是內(nèi)部

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

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

3. 操作表單元素的值
操作表單元素的值十分常用，但并不容易。jQuery提供了一個(gè)val方法來簡化操作。不帶參數(shù)的val()方法返回當(dāng)前元素的值。val(values)方法用來將當(dāng)前元素的值設(shè)置為values,如果values是一個(gè)數(shù)組，則更為有趣一點(diǎn)，它用于匹配select元素中的值，包括在values中的值將會變成選中狀態(tài)。

您可能感興趣的文章: