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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
Date对象格式化函数代码
Jul 17 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python递归查询菜单并转换成json实例
2017/03/27 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python调用其他文件函数或类的示例
2019/07/16 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
外企C语言笔试题
2013/11/10 面试题
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
职业生涯规划怎么写
2013/12/29 职场文书
卫生安全检查制度
2014/02/04 职场文书
学习决心书范文
2014/03/11 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python