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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
js实现选项卡效果
Mar 07 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
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
thinkphp循环结构用法实例
2014/11/24 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
利用Python获取操作系统信息实例
2016/09/02 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
python实现年会抽奖程序
2019/01/22 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
python利用opencv实现颜色检测
2021/02/23 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
项目投资合作意向书
2014/07/29 职场文书
技术员个人工作总结
2015/03/03 职场文书
综合测评个人总结
2015/03/03 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
Flask response响应的具体使用
2021/07/15 Python
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android