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 相关文章推荐
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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
header()函数使用说明
2006/11/23 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
中止javascript执行的方法
2014/02/14 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
uni app仿微信顶部导航条功能
2019/09/17 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
Python探索之创建二叉树
2017/10/25 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Python骚操作之动态定义函数
2019/03/26 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
周鸿祎:教你写创业计划书
2013/12/30 职场文书
大学生思想汇报范文
2013/12/31 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
总经理年会致辞
2015/07/29 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
生产实习心得体会范文
2016/01/22 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
Golang 结构体数据集合
2022/04/22 Golang