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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
javascript hashtable实现代码
Oct 13 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 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 dirname()与__FILE__常量的应用
2013/06/24 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
微信小程序异步处理详解
2017/11/10 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
网吧消防安全制度
2014/01/28 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
2014年班干部工作总结
2014/11/25 职场文书
党校学习党性分析材料
2014/12/19 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
队名及霸气口号大全
2015/12/25 职场文书
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers