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 相关文章推荐
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
JS实现的几个常用算法
Nov 12 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
ES6基础之默认参数值
Feb 21 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
浅析Python中signal包的使用
2015/11/13 Python
python re模块findall()函数实例解析
2018/01/19 Python
学生信息管理系统python版
2018/10/17 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
2014年转正工作总结
2014/11/08 职场文书
小孩不笨观后感
2015/06/03 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP