Jquery下attr和removeAttr的使用方法


Posted in Javascript onDecember 28, 2010

下面我们来具体看一下attr的用法:
一、attr(name):取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。其中name为string.下面我用一个img元素演示一下这种用法:

//html文件中 <img src="a.gif" /> 
//我们可以用attr获得img元素的src属性,具体用法如下: 
$(function(){ 
var imgSrc = $("img").attr('src'); 
alert(imgSrc); //显示 a.gif 
})

二、attr(key,value):为所有匹配的元素设置一个属性值。key为string属性名,value为object属性值,用法演示:
//html文件中 <img /> 
//使用此方法设置img的src属性 
$(function(){ 
$("img").attr('src', 'a.gif'); //文件中显示 <img src="a.gif" /> 
})

三、attr(properties):这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).
//文件中 <img /> 
$(function(){ 
$("img").attr({src:'a.gif', title:'this is a image', className: 'filter'}); 
}) 
// 显示为<img src="a.gif" title="this is a image" class="filter">

四、attr(key, fn):为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。
//文件中 <img src="a.gif" /> 
$(function(){ 
$("img").attr('title', function(){ return this.src }); //显示 <img src="a.gif" title="a.gif" /> 
})

以上介绍的是attr的一些用法,下面是removeAttr的用法 remove故明思意就是移除的意思,从每一个匹配的元素中删除一个属性。它的具体用法就是:
//文档中 <img src="a.gif" title="this is a image" ?> 
$(function(){ 
$("img").removeAttr('title'); //显示 <img src="a.gif" /> 
})

以上介绍了attr和removeAttr的基本用法,在实际的工作中还会遇到一些更为复杂的应用,这就需要我们掌握基本用法的同时,多多总结和尝试其他用法。
Javascript 相关文章推荐
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
微信小程序入门教程
Nov 18 Javascript
AngularJS实现路由实例
Feb 12 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 #Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 #Javascript
基于Jquery的标签智能验证实现代码
Dec 27 #Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 #Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 #Javascript
extjs之去除s.gif的影响
Dec 25 #Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 #Javascript
You might like
使用PHP的日期与时间函数技巧
2008/04/24 PHP
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
Yii分页用法实例详解
2014/12/04 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python下的subprocess模块的入门指引
2015/04/16 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
基于Django用户认证系统详解
2018/02/21 Python
python join方法使用详解
2019/07/30 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
知识竞赛活动方案
2014/02/18 职场文书
幼师求职信
2014/06/23 职场文书
楚门的世界观后感
2015/06/03 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python