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 08 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 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创建动态图像
2006/10/09 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
Jquery中对数组的操作代码
2011/08/12 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Python实现图片添加文字
2019/11/26 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
PageFactory设计模式基于python实现
2020/04/14 Python
销售个人求职信范文
2014/04/28 职场文书
环境卫生倡议书
2014/08/29 职场文书