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实现多物体缓冲运动实例代码
Nov 29 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
table行随鼠标移动变色示例
May 07 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
es6函数中的作用域实例分析
Apr 18 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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
PHP新手入门学习方法
2011/05/08 PHP
Laravel 5 学习笔记
2015/03/06 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
javascript iframe编程相关代码
2009/12/28 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
Python解析微信dat文件的方法
2020/11/30 Python
Pandas之缺失数据的实现
2021/01/06 Python
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
三八妇女节活动总结
2014/05/04 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers