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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
jQuery动画与特效详解
Feb 01 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
【js设计模式】SOLID五大设计原则
Mar 24 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
Home Coffee Roasting
2021/03/03 咖啡文化
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
浅析Python __name__ 是什么
2020/07/07 Python
python实现学生信息管理系统源码
2021/02/22 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
中医专业应届生求职信
2013/11/17 职场文书
《尊严》教学反思
2014/02/11 职场文书
挂牌仪式主持词
2014/03/20 职场文书
初三学生个人自我评定
2014/04/06 职场文书
房屋继承公证书
2014/04/10 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
财会专业大学生求职信
2014/09/26 职场文书
签订劳动合同通知书
2015/04/16 职场文书
详解Vue的options
2021/05/15 Vue.js
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript