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 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
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与javascript对多项选择的处理
2006/10/09 PHP
PHP通用检测函数集合
2011/02/08 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
javascript json 新手入门文档
2009/12/03 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
python实现list由于numpy array的转换
2018/04/04 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python @property使用方法解析
2019/09/17 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
环境科学毕业生自荐信
2013/11/21 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
护理学专业求职信
2014/06/29 职场文书
车间统计员岗位职责
2015/04/14 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
深入理解Pytorch微调torchvision模型
2021/11/11 Python