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控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
jqgrid 简单学习笔记
May 03 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
js实现旋转的星空效果
Nov 01 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
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应用技巧
2008/03/27 PHP
php 日期时间处理函数小结
2009/12/18 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php上传文件常见问题总结
2015/02/03 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
Vue实现购物车功能
2017/04/27 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
python比较两个列表是否相等的方法
2015/07/28 Python
Python编码爬坑指南(必看)
2016/06/10 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
python中删除某个元素的方法解析
2019/11/05 Python
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
拉拉队口号
2014/06/16 职场文书
社会学专业求职信
2014/07/17 职场文书
妈妈活动方案
2014/08/15 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
公司2014年度工作总结
2014/12/10 职场文书
观看建国大业观后感
2015/06/01 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL