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 相关文章推荐
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
Angular工具方法学习
Dec 26 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
javascript利用键盘控制小方块的移动
Apr 20 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
php限制ip地址范围的方法
2015/03/31 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
用Python实现数据的透视表的方法
2018/11/16 Python
python设置环境变量的作用和实例
2019/07/09 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
学习保证书怎么写
2015/02/26 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
重阳节简报
2015/07/20 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL