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 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
vue-router 路由基础的详解
Oct 17 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 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/10/01 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
python基于opencv实现人脸识别
2021/01/04 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
运动会通讯稿200字
2014/02/16 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
浅谈Python中的正则表达式
2021/06/28 Python