jQuery DOM操作 基于命令改變頁面
2024-05-06 14:11:57
供稿：網友
呃，貌似是廣告哈？呵呵，不過的確是這樣，jQuery為我們提供了豐富的DOM操作方法，使這些復雜的DOM操作變得簡單。
繼上一回寫jQuery的筆記貌似已經過去很長時間了，這一節也確實有必要寫一下了，呵呵，Let's Go~
操作屬性：
之前，我們說過.addClass()及.removeClass()方法，更改的其實也是DOM的屬性：className。
說到這就得再提一下，為啥元素的類名叫做className而不是直接叫class，因為class是js的保留字。嗯。
那么除了class，DOM元素的其它屬性，如：id、rel及href之類的，對于這些屬性我們咋操作？
別急，jQuery提供了.attr()和.removeAttr()方法。
甚至，你也可以用這兩個方法來替代.class()方法——如果你想給自己找點麻煩的話，呵呵。。
下面，讓我們把紅色的字，變成綠色的，而且，我喜歡GOOGLE，但是有一些人喜歡百度，那么好，讓我們選擇自己喜歡的。
代碼如下:
這里有個超鏈接，超鏈接的地址為<a href='http:/www.baidu.com' target='_blank' class='link'>百度</a>
<br/>
點擊這個按鈕，讓百度變GOOGLE,再點一下就讓它再變回百度<input type='button' value='變GOOGLE吧' id='but_link'/>
<br/><br/>
這里有幾個字，字的顏色呢，是紅色的，<font color='red' class='font'>我是紅色，我是紅色</font>
<br/>
點擊這個按鈕，讓紅色變綠色<input type='button' value='變綠色吧' id='but_color'/>
代碼如下:
$(document).ready(function(){
$('#but_link').toggle(function(){
$('.link').attr('href','http://www.google.com');
$('.link').text('GOOGLE');
$(this).attr('value','變BAIDU吧');
},function(){
$('.link').attr('href','http://www.baidu.com');
$('.link').text('百度');
$(this).attr('value','變GOOGLE吧');
});
$('#but_color').toggle(function(){
$('.font').attr('color','green');
$('.font').text('我是綠色，我是綠色');
$(this).attr('value','變紅色吧');
},function(){
$('.font').attr('color','red');
$('.font').text('我是紅色，我是紅色');
$(this).attr('value','變綠色吧');
});
});
如果想要循環對一些DOM對象做處理，比如書中的例子，想要對一個DIV下的每個A標簽都給其一個唯一的ID
那么就可以用到jQuery的.each()方法，其類似于一個迭代器，有點像PHP的foreach
代碼如下:
$(document).ready(function() {
$('div.chapter a').each(function(index) {
$(this).attr({
'id': 'wikilink-' + index,
});
});
});
這個index參數類似于一個計數器，對第一個鏈接它的值為0，然后對每個后續的鏈接它的值會遞增1。依此類推。
呃，稍候這些例子，我一起給出演示地址。不過很無奈的是，我國外空間的那個地址被墻了。嗯。
深入理解$()工廠函數：
