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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
详解React 元素渲染
Jul 07 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
珊瑚虫IP库浅析
2007/02/15 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
Javascript实现的分页函数
2007/02/07 Javascript
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
深入解析Python中的上下文管理器
2016/06/28 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
Python 多进程、多线程效率对比
2020/11/19 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
特色冷饮店创业计划书
2014/01/28 职场文书
课程改革实施方案
2014/03/16 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
离婚协议书范本2014
2014/10/27 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
投资申请报告
2015/05/19 职场文书
大学开学感言
2015/08/01 职场文书
小学英语教学反思范文
2016/02/15 职场文书