jquery 学习之二 属性相关


Posted in Javascript onNovember 23, 2010

attr(name)
取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。
Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned.
返回值
Object

参数
name (String) : 属性名称

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

HTML 代码:

<img src="test.jpg"/>
jQuery 代码:

$("img").attr("src");
结果:

test.jpg
---------------------------------------------------------------------------------------------------------------------------------------
attr(properties)
将一个“名/值”形式的对象设置为所有匹配元素的属性。
这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).
Set a key/value object as properties to all matched elements.
This serves as the best way to set a large number of properties on all matched elements. Note that you must use 'className' as key if you want to set the class-Attribute. Or use .addClass( class ) or .removeClass( class ).
返回值
jQuery

参数
properties (Map) : 作为属性的“名/值对”对象

示例
为所有图像设置src和alt属性。

HTML 代码:

<img/>
jQuery 代码:

$("img").attr({ src: "test.jpg", alt: "Test Image" });
结果:

[ <img src= "test.jpg" alt:="Test Image" /> ]
---------------------------------------------------------------------------------------------------------------------------------------
attr(key,value)
为所有匹配的元素设置一个属性值。
Set a single property to a value, on all matched elements.
返回值
jQuery

参数
key (String) : 属性名称

value (Object) : 属性值

示例
为所有图像设置src属性。

HTML 代码:

<img/>
<img/>
jQuery 代码:

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

[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]
---------------------------------------------------------------------------------------------------------------------------------------
attr(key,fn)
为所有匹配的元素设置一个计算的属性值。
不提供值,而是提供一个函数,由这个函数计算的值作为属性值。
Set a single property to a computed value, on all matched elements.
Instead of supplying a string value as described 'above', a function is provided that computes the value.
返回值
jQuery

参数
key (String) : 属性名称

fn (Function) : 返回值的函数 范围:当前元素, 参数: 当前元素的索引值

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

HTML 代码:

<img src="test.jpg"/>
jQuery 代码:

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

<img src="test.jpg" title="test.jpg" />
---------------------------------------------------------------------------------------------------------------------------------------
removeAttr(name)
从每一个匹配的元素中删除一个属性
Remove an attribute from each of the matched elements.
返回值
jQuery

参数
name (String) : 要删除的属性名

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

HTML 代码:

<img src="test.jpg"/>
jQuery 代码:

$("img").removeAttr("src");
结果:

[ <img /> ]

Javascript 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
jquery事件与绑定事件
Mar 16 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
jquery 学习之一 对象访问
Nov 23 #Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 #Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 #Javascript
基于jquery的滑动样例代码
Nov 20 #Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 #Javascript
简单实用的js调试logger组件实现代码
Nov 20 #Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 #Javascript
You might like
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP Reflection API详解
2015/05/12 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
js实现中文实时时钟
2020/01/15 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
python实现的jpg格式图片修复代码
2015/04/21 Python
python类的继承实例详解
2017/03/30 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
python mysql中in参数化说明
2020/06/05 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
请用用Java代码写一个堆栈
2012/01/26 面试题
毕业自我评价范文
2013/11/17 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL