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 11 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
js保留两位小数方法总结
Jan 31 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 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读写文件的方法(生成HTML)
2006/11/27 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php实现分页工具类分享
2014/01/09 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
详解Layer弹出层样式
2017/08/21 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
Python中操作符重载用法分析
2016/04/29 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Python标准库itertools的使用方法
2020/01/17 Python
详解python中各种文件打开模式
2020/01/19 Python
python简单实现插入排序实例代码
2020/12/16 Python
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
函授大专自我鉴定
2013/11/01 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript