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 格式字符串的应用
Mar 29 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
vue+element 模态框表格形式的可编辑表单实现
Jun 07 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
mac下安装nginx和php
2013/11/04 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
浅析python中的del用法
2020/09/02 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
中海讯通笔试题
2015/09/15 面试题
精彩的推荐信范文
2013/11/26 职场文书
董事长岗位职责
2013/11/30 职场文书
代理商会议邀请函
2014/01/27 职场文书
优秀经理事迹材料
2014/02/01 职场文书
高中运动会入场词
2014/02/14 职场文书
考研导师推荐信范文
2015/03/27 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
vue中 this.$set的使用详解
2021/11/17 Vue.js
利用js实现简单开关灯代码
2021/11/23 Javascript
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis