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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
jquery ui对话框实例代码
May 10 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
js指定步长实现单方向匀速运动
Jul 17 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
mysql limit查询优化分析
2008/11/12 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
PHP编码转换
2012/11/05 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
python Django模板的使用方法(图文)
2013/11/04 Python
Django框架中方法的访问和查找
2015/07/15 Python
使用C++扩展Python的功能详解
2018/01/12 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
司机的工作范围及职责
2013/11/13 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
财务人员担保书
2014/05/13 职场文书
监察建议书格式
2014/05/19 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
2014年审计工作总结
2014/11/17 职场文书