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 相关文章推荐
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
关于uniApp editor微信滑动问题
Jan 15 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实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
改进Django中的表单的简单方法
2015/07/17 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
2015年度护士个人工作总结
2015/04/09 职场文书
活动总结模板大全
2015/05/11 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python