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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
Vue中插入HTML代码的方法
Sep 21 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数据库支持的简易留言本的编写
2006/10/09 PHP
PHP中的日期及时间
2006/11/23 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
php微信开发之关注事件
2018/06/14 PHP
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
关于逃课的检讨书
2014/01/23 职场文书
学生党支部先进事迹
2014/02/04 职场文书
禁烟标语大全
2014/06/11 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
保姆聘用合同
2015/09/21 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
用JS写一个发布订阅模式
2021/11/07 Javascript
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技