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实现的网页局布刷新效果
Dec 01 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
js判断节假日实例代码
Dec 27 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 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
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP新手上路(九)
2006/10/09 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
vue登录注册实例详解
2019/09/14 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
汽车队司机先进事迹材料
2014/02/01 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
廉洁使者实施方案
2014/03/29 职场文书
合同意向书范本
2014/07/30 职场文书
公司市场部岗位职责
2015/04/15 职场文书
同意转租证明
2015/06/24 职场文书
运动会开幕式主持词
2015/07/01 职场文书
学习心理学心得体会
2016/01/22 职场文书
python爬虫selenium模块详解
2021/03/30 Python
golang正则之命名分组方式
2021/04/25 Golang