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中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
node.js实现快速截图
Aug 27 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 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制作静态网站的模板框架(二)
2006/10/09 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
PHP打印输出函数汇总
2016/08/28 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
PHP实现递归的三种方法
2020/07/04 PHP
php实现简单四则运算器
2020/11/29 PHP
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
python中shell执行知识点
2020/05/06 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python