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 相关文章推荐
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
js实现移动端轮播图
Dec 21 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
优化Vue中date format的性能详解
Jan 13 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数组应用之比较两个时间的相减排序
2008/08/18 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
python单元测试unittest实例详解
2015/05/11 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
对python 调用类属性的方法详解
2019/07/02 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python 实现一个计时器
2020/07/28 Python
英国航空官网:British Airways
2016/09/11 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
最新的咖啡店创业计划书
2013/12/30 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
原材料检验岗位职责
2014/03/15 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书