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 相关文章推荐
JSONP 跨域共享信息
Aug 16 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
express启用https使用小记
May 21 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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分页类的代码
2011/05/18 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
php递归函数怎么用才有效
2018/02/24 PHP
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
python中import学习备忘笔记
2017/01/24 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
销售冠军获奖感言
2014/02/03 职场文书
食品安全汇报材料
2014/08/18 职场文书
鲁迅故居导游词
2015/02/05 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python