JQuery中attr方法和removeAttr方法用法实例


Posted in Javascript onMay 18, 2015

本文实例讲述了JQuery中attr方法和removeAttr方法用法。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div{width:100px;margin:0px auto;border:1px solid red;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  $("#btnChange").click(function () {
    var $divs = $("div");
    //----1.举例1
    //$divs.eq(0).attr("MyAttr", "Ronaldo");
    //eq返回指定下标的JQuery对象(注意:此时$divs中有两个div的dom元素)
    //$divs.eq(1).attr("MyAttr", "Ronaldo1");
    //alert($divs.attr("MyAttr"));
    //读取MyAttr属性,注意,只会读取出第一个元素的该属性
    //----2.举例2  使用JSon格式设置attr
    //$divs.eq(0).attr({ "MyAttr": "Ronaldo", "Age": "19" });
    //$divs.eq(1).attr({ "MyAttr": "Rivaldo", "Age": "29" });
    //alert("MyAttr:" + $divs.eq(1).attr("MyAttr") + ",Age:" + $divs.eq(1).attr("Age"));
    //----3.举例3  移除属性
    $divs.eq(0).attr({ "MyAttr": "Ronaldo", "Age": "19" });
    $divs.eq(1).attr({ "MyAttr": "Rivaldo", "Age": "29" });
    alert("MyAttr:" + $divs.eq(1).attr("MyAttr") + ",Age:" + $divs.eq(1).attr("Age"));
    $divs.eq(1).removeAttr("Age");
    alert("MyAttr:" + $divs.eq(1).attr("MyAttr") + ",Age:" + $divs.eq(1).attr("Age"));
  });
});
</script>
</head>
<body>
<input id="btnChange" type="button" value="Click Me" />
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
根据json字符串生成Html的一种方式
Jan 09 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
JQuery中节点遍历方法实例
May 18 #Javascript
Jquery实现动态切换图片的方法
May 18 #Javascript
JQuery中基础过滤选择器用法实例分析
May 18 #Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 #Javascript
JQuery中属性过滤选择器用法实例分析
May 18 #Javascript
jquery表单对象属性过滤选择器实例分析
May 18 #Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 #Javascript
You might like
php获取用户浏览器版本的方法
2015/01/03 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
JavaScript 原型继承
2011/12/26 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
js实现无缝轮播图
2020/03/09 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Python实现的简单hangman游戏实例
2015/06/28 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
《理想》教学反思
2014/02/17 职场文书
餐厅总厨求职信
2014/03/04 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
党员剖析材料范文
2014/09/30 职场文书
万能检讨书
2015/01/27 职场文书
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android