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 onpropertychange输入框 事件获取属性
Mar 26 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
JavaScript中交换值的10种方法总结
Aug 18 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
浅析Python 责任链设计模式
2020/09/11 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
火山动力Java笔试题
2014/06/26 面试题
先进个人获奖感言
2014/01/24 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
高一学生期末评语
2014/04/25 职场文书
医学生求职自荐书
2014/06/12 职场文书
人民调解协议书范本
2014/10/11 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
Java 在线考试云平台的实现
2021/11/23 Java/Android
DE1103使用报告
2022/04/05 无线电