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。依此类推。
呃，稍候这些例子，我一起给出演示地址。不过很无奈的是，我国外空间的那个地址被墙了。嗯。
深入理解$()工厂函数：
