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 相关文章推荐
javascript事件模型代码
Jul 01 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
浅谈php://filter的妙用
2019/03/05 PHP
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
vue filters的使用详解
2018/06/11 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
对Python中range()函数和list的比较
2018/04/19 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
python 网络编程要点总结
2021/06/18 Python
详解Oracle块修改跟踪功能
2021/11/07 Oracle
Java无向树分析 实现最小高度树
2022/04/09 Javascript