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 相关文章推荐
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
代码解析React中setState同步和异步问题
Jun 03 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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
PHP测试程序运行时间的类
2012/02/05 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
Python定时器实例代码
2017/11/01 Python
Django多数据库的实现过程详解
2019/08/01 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
python django中8000端口被占用的解决
2019/12/17 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
全陪导游欢迎词
2014/01/17 职场文书
负责人任命书范本
2014/06/04 职场文书
2014离婚协议书范文
2014/09/10 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
公司行政管理制度范本
2015/08/05 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server