欢迎进入IT起步网社区,中国最大的IT新手技术交流平台>>进入
在前面我们学习到了.addClass()和.removeClass()方法的作用,即.addClass()方法是创建或增加ClassName属性,而.removeClass()则是删除或缩短ClassName属性,这里我们还应该注意到.toggleClass()的作用,它就是能够交替地添加和移除一个类。
这里我们针对的只限于class属性的改变或访问,但是在我们的DIV+CSS布局中还应该用到id,rel,href等,对于这样的属性,我们又该如何去改变和访问它们的,别急,JQUERY早就为我们想好了,它也提供了相应的两个方法.attr()和.removeAttr()。我们来看看下面这个例子:
<div id="xrend"><a href="http://www.xrend.com">IT起步网</a></div>
<div class="xrendcom"><h7><a href="http://www.xrend.com">IT起步网</a>---中国最大的IT新手技术交流平台</h7>
<h7><a href="http://www.xrend.com">IT起步网</a>---中国最大的IT新手技术交流平台</h7>
<h7><a href="http://www.xrend.com">IT起步网</a>---中国最大的IT新手技术交流平台</h7>
<h7><a href="http://www.xrend.com">IT起步网</a>---中国最大的IT新手技术交流平台</h7>
</div>
如果我们要遍历<div class=”xrendcom”>中的每个链接,并为他们添加属性,则我们可以用以下代码来简单地实现:
$(document).ready(function(){
$(‘div.xrendcom a’).attr({‘rel’:’external’});
});
我们这里只是为其添加的共公属性。在jQuery中提供了一个.each()方法,该方法的作用就是遍历,类似一个迭代器,相当于我们平常见到的FOR语句。对于上面的链接,如果我们要为其添加一个ID属性,一个REL属性,一个TITLE属性,那我们应该怎么办的?首先我们应该分析下:上面的链接有好多个,我们就应该考虑到用循环,再次,我们知道,为它添加的属性并不是CLASS属性。最后一点,也是最重要的一点就是,我们应该考虑到上面两步中的细节问题,有什么细节呢,先看完代码再为大家分析,
$(document).ready(function(){
$(‘div.xrendcom a[@href*=xrend]’).each(function(index)){
Var $thisLink = $(this);
$thisLink.attr({‘rel’:’external’,’id’:’xrend-’+index,
‘title’:’learn more about at www.’+$thisLink.text() + ‘.com’});
});
});
加粗体字的目的是什么呢,这就是我们的细节,为什么要这样一句,因为要多次使用到$(this),所以我们把它保存到名为$thisLink的变量中,.each中这里起到的是循环的作用,
其中,@表示是属性,*是匹配字符串用的,这句的含义是找到href属性里面包含xrend的元素
好了就到这样了,希望大家能够对jquery中的.attr()方法有理深入的理解和更好的运用。



