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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
最短的IE判断代码
Mar 13 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 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
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
Javascript 布尔型分析
2008/12/22 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
Python3基础之基本运算符概述
2014/08/13 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Form表单及django的form表单的补充
2019/07/25 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
如何保障Web服务器安全
2014/05/05 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
文员求职信
2014/07/15 职场文书
公证委托书
2014/08/01 职场文书
客户答谢会活动方案
2014/08/31 职场文书
学习教师法的心得体会
2014/09/03 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
员工手册编写范本
2015/05/14 职场文书
人民调解协议书
2016/03/21 职场文书
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫