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 相关文章推荐
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
JQuery小知识
Oct 15 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
使用微信SDK自定义分享的方法
Jul 03 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
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
10款实用的PHP开源工具
2015/10/23 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
JS module的导出和导入的实现代码
2019/02/25 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
vue实现扫码功能
2020/01/17 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python