现在的位置: 首页 > 综合 > 正文

learning jQuery 学习笔记九(+jQuery 1.4.1 API)– DOM操作-基于命令改变页面 —-操作属性

2017年12月03日 ⁄ 综合 ⁄ 共 1750字 ⁄ 字号 评论关闭

注:本笔记内容摘自《jQuery基础教程》+ jQuery 1.4.1中文参考

操作属性

.addClass()方法创建或增加这个属性,而.removeClass()则删除或缩短该属性。而具备了这两种操作的.toggleClass()方法能够交替地添加和移除一个类。这样,我们就具有了处理类的一种有效而可靠的方式。

但是class只是需要访问和改变的属性中的一种,其它属性还有id、rel及href等。对于其它属性,jQuery提供了.attr()和.removeAttr()方法。甚至可以使用.attr()和.removeAttr()来分别代替相应的.class()方法。

 

jQuery 1.4.1 API

attr(name)                                 返回值:Object

概述

取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。

参数

name       String

属性名称

示例

描述:

返回文档中第一个图像的src属性值。

HTML 代码:

<img src="test.jpg"/>

jQuery 代码:

$("img").attr("src");

结果:

test.jpg

 

attr(key, value)                   返回值:jQuery

概述

为所有匹配的元素设置一个属性值。

参数

key  String

属性名称

value       Object

属性值

示例

描述:

为所有图像设置src属性。

HTML 代码:

<img/>

<img/>

jQuery 代码:

$("img").attr("src","test.jpg");

结果:

[ <imgsrc= "test.jpg" /> , <img src= "test.jpg" /> ]

 

attr(key, function(index, attr))         返回值:jQuery

概述

为所有匹配的元素设置一个计算的属性值。

不提供值,而是提供一个函数,由这个函数计算的值作为属性值。

参数

key  String

属性名称

function(index,attr)Function

返回属性值的函数 ,第一个参数为当前元素的索引值,第二个参数为原先的属性值。

示例

描述:

把src属性的值设置为title属性的值。

HTML 代码:

<imgsrc="test.jpg"/>

jQuery 代码:

$("img").attr("title",function() { return this.src });

结果:

<imgsrc="test.jpg" title="test.jpg" />

removeAttr(name)                                  返回值:jQuery

概述

从每一个匹配的元素中删除一个属性

参数

name       String

要删除的属性名

示例

描述:

将文档中图像的src属性删除

HTML 代码:

<imgsrc="test.jpg"/>

jQuery 代码:

$("img").removeAttr("src");

结果:

[ <img/> ]

非class属性

       有些属性不通过jQuery并不容易操作,而且通过jQuery还可以一次性修改多个属性。

对所有的链接设置一个公共属性值,通过在$(document).ready处理程序中通过一行代码即可完成这一操作:

       $(document).ready(function(){

              $(‘div.chapter a’).attr({‘rel’,’external’});

});

实际上,对于给定的文档,如果要保证JavaScript代码有效,那么每个id属性的值必须唯一。要为每个连接设置唯一的id,必须放弃单行解决方案,转而使用jQuery的.each()方法。

$(document).ready(function(){

              $(‘div.chapter a’).each(function(index){

       $(this).attr({

              ‘rel’:’external’,

              ‘’id:’wikilink’+index

});

});

});

 

抱歉!评论已关闭.