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 相关文章推荐
js字符编码函数区别分析
Dec 28 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
我所理解的JavaScript中的this指向
Sep 04 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 变量结构体
2017/10/11 PHP
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python处理中文标点符号大集合
2018/05/14 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
使用django实现一个代码发布系统
2019/07/18 Python
python多线程同步之文件读写控制
2021/02/25 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Django nginx配置实现过程详解
2020/09/10 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
工作个人的自我评价
2014/01/14 职场文书
综合实践活动总结
2014/05/05 职场文书
个人收入证明格式
2015/06/24 职场文书
高一地理教学工作总结
2015/08/12 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
Redis分布式锁的7种实现
2022/04/01 Redis
ant design charts 获取后端接口数据展示
2022/05/25 Javascript