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 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
创建nuxt.js项目流程图解
Mar 13 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
PHP5 安装方法
2006/10/09 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
Python的log日志功能及设置方法
2019/07/11 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
python创建学生成绩管理系统
2019/11/22 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
python 批量将中文名转换为拼音
2021/02/07 Python
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
初一体育教学反思
2014/01/29 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
收银员岗位职责
2015/02/03 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
消防验收申请报告
2015/05/15 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL