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读取XML文件数据并显示的实现代码
Dec 16 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 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加密解密字符串汇总
2015/04/26 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
Django框架多表查询实例分析
2018/07/04 Python
python读取文件名并改名字的实例
2019/01/07 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python wsgiref源码解析
2021/02/06 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
canvas烟花特效锦集
2018/01/17 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
会计电算化个人求职信范文
2014/01/24 职场文书
拆迁委托协议书
2014/09/15 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL