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放大镜效果超漂亮噢
Nov 15 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
js实现多图左右切换功能
Aug 04 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 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 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
php实现telnet功能示例
2014/04/08 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
python实现数组插入新元素的方法
2015/05/22 Python
Python os模块学习笔记
2015/06/21 Python
使用Python读取大文件的方法
2018/02/11 Python
浅析python的优势和不足之处
2018/11/20 Python
用Python逐行分析文件方法
2019/01/28 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
原生python实现knn分类算法
2019/10/24 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Python多线程多进程实例对比解析
2020/03/12 Python
python中如何打包用户自定义模块
2020/09/23 Python
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers