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游戏之优化篇
Nov 08 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
深入详解JS函数的柯里化
Jun 09 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使用百度天气接口示例
2014/04/22 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
Python实现扫码工具的示例代码
2020/10/09 Python
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
.NET方向面试题
2014/11/20 面试题
顶岗实习计划书
2014/01/10 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
环保小标语
2014/06/13 职场文书
2015年售票员工作总结
2015/04/29 职场文书
房产遗嘱范本
2015/08/06 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS