attr 与 prop 都可以对某个属性进行获取和设置的操作，二者的用法相同：

<script src = 'jQuery.js'></script>

<script>

    // attr:

    // 设置单个属性

    $(element).attr(name,value);

    // 设置多个属性

    $(element).attr(obj);

    // 获取属性

    $(element).attr(name);

    // prop:

    // 设置单个属性

    $(element).prop(name,value);

    // 设置多个属性

    $(element).prop(obj);

    // 获取属性

    $(element).prop(name);

</script>

用处和区别却是不一样的，对于返回值是布尔类型的属性，如：disabled, checked只能使用 prop 进行操作，当然更大的区别在于，attr 操作的是写在元素内的字面属性，而 prop 操作的是元素的 DOM 属性：

<body>

    // 以访问网站的形式打开页面

    // 例：假设文件在C盘中，上层主目录文件夹为 folder-min

    <img id="img" src="/folder/image.jpg" />

    <input id="check1" type="checkbox" checked="checked" />

    <input id="check2" type="checkbox" />

<script>

    $( '#img' ).attr( 'src' );  // 控制台输出："/folder/image.jpg"

    $( '#check' ).prop( 'src' );  // "http://folder-min/folder/image.jpg"

    $( '#check1' ).attr( 'checked' );  // checked

    $( '#check1' ).prop( 'checked' );  // true 或 false 取决于复选框状态

    $( '#check2' ).attr( 'checked' );  // undefined

    $( '#check2' ).prop( 'checked' );  // true 或 false 取决于复选框的状态

</script>

</body>

jQuery中操作属性的方法attr与prop的区别的更多相关文章

  1. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

  2. jQuery中获取属性值：attr()、html()、text()、val()等(一)

    <!DOCTYPE html> <html> <head> <title>01_basic.html</title> <meta na ...

  3. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  4. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  5. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  6. jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )

    jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...

  7. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  8. jquery中attr和prop的区别（转）

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  9. jQuery中常用的函数方法

    jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...

随机推荐

  1. 【Tool】Windows系统安装Maven依赖管理工具

    安装Maven依赖管理工具 官网下载地址:http://maven.apache.org/download.cgi 系统环境要求: [JDK]Maven3.3版本+需要JDK1.7版本以上支持 [内存 ...

  2. golang实现常用集合原理介绍

    golang本身对常用集合的封装还是比较少的,主要有数组(切片).双向链表.堆等.在工作中可能用到其他常用的集合,于是我自己对常用的集合进行了封装,并对原理做了简单介绍,代码库地址:https://g ...

  3. 利用浏览器的console篡改cookie

    背景: 最近公司有个客户问题,是由于浏览器的cookie中多记录过期的session id导致重复登录,普通操作无法复现,因此尝试进行cookie篡改复现问题. 方法: 首先,要知道软件定义的sess ...

  4. 落谷 P1734 最大约数和

    题目描述 选取和不超过S的若干个不同的正整数,使得所有数的约数(不含它本身)之和最大. 输入格式 输入一个正整数S. 输出格式 输出最大的约数之和. 输入输出样例 输入 #1复制 11 输出 #1复制 ...

  5. [linux] [nginx] 一键安装web环境全攻略phpstudy版,超详细！

    找到运行中的服务器(实例). 打开这个主要是看它的IP,是公网ip,公网ip,公网ip,重要的事情说三遍. 接下来我们可以不用在阿里云上操作了,直接用客户端操作,这两个客户端就是Xshell 5和Xf ...

  6. python之excel表操作

    python对excel表操作主要用到三个库,xlrd,xlwt,xlutils,分别用于excel表读,写,修改操作,以下将一个简单介绍 一.生成excel表:xlwt类 新建excel表,并写入数 ...

  7. IOC趣味理解

    假设一个场景:   假设你是一个四岁孩子,饿了,想吃东西.怎么做? 1,哪有吃的去哪拿,你知道冰箱有吃的,你去冰箱拿〉会有风险.比如,拿了生的吃的,吃坏肚子,甚至拿了不能吃的东西. 2, 找父母(IO ...

  8. C# WCF之用接口创建服务契约、部署及客户端连接

    服务契约描述了暴露给外部的类型(接口或类).服务所支持的操作.使用的消息交换模式和消息的格式.每个WCF服务必须实现至少一个服务契约.使用服务契约必须要引用命名空间System.ServiceMode ...

  9. 2层感知机（神经网络）实现非线性回归（非线性拟合）【pytorch】

    import torch import numpy import random from torch.autograd import Variable import torch.nn.function ...

  10. ES6系列-什么是ES6?新手应该怎么理解

    ECMAScript 是什么 很多初学者都很困惑,ECMAScript是什么?它跟JavaScript有什么关系? 大家注意到了吗?从题目中我们就可以看出来了,ECMAScript是JavaScrip ...