IT起步网-网页设计起步-软件开发起步-程序开发起步-信息化管理起步-设计开发入门-WEB开发入门-数据库开发入门-软件教程入门-电脑安全常识

热门关键字:
更多关键字>>
当前位置 :| 首页>网页设计>JavaScript>

JQUERY新手学习笔记(五)

来源: 作者: 时间:2008-09-20 Tag:

欢迎进入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()方法有理深入的理解和更好的运用。

最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册

IT起步网-网页设计起步-软件开发起步-程序开发起步-信息化管理起步-设计开发入门-WEB开发入门-数据库开发入门-软件教程入门-电脑安全常识