1.attr()是jQuery 1.0版本就有的函数,prop()是jQuery 1.6版本新增的函数。毫无疑问,在1.6之前,你只能使用attr()函数;1.6及以后版本,你可以根据实际需要选择对应的函数。

2.在jQuery中,prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象,Element类型)上的属性(property);attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

3.在jQuery 1.6之前,只有attr()函数可用,该函数不仅承担了attribute的设置和获取工作,还同时承担了property的设置和获取工作。例如:在jQuery 1.6之前,attr()也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。

直到jQuery 1.6新增prop()函数,并用来承担property的设置或获取工作之后,attr()才只用来负责attribute的设置和获取工作。

此外,对于表单元素的checkedselecteddisabled等属性,在jQuery 1.6之前,attr()获取这些属性的返回值为Boolean类型:如果被选中(或禁用)就返回true,否则返回false

但是从1.6开始,使用attr()获取这些属性的返回值为String类型,如果被选中(或禁用)就返回checkedselecteddisabled,否则(即元素节点没有该属性)返回undefined。并且,在某些版本中,这些属性值表示文档加载时的初始状态值,即使之后更改了这些元素的选中(或禁用)状态,对应的属性值也不会发生改变。

因为jQuery认为:attribute的checkedselecteddisabled就是表示该属性初始状态的值,property的checkedselecteddisabled才表示该属性实时状态的值(值为truefalse)。

4.selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked,和defaultSelected应该被使用.prop()方法获取和设置。在jQuery1.6版本之前,这些properties是通过.attr()方法获取的,

<div id="n1">
    <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
    <input id="n3" name="order_id" type="checkbox" value="1">
    <input id="n4" name="order_id" type="checkbox" checked="checked" value="2">
</div>

var $n2 = $("#n2");

// prop()操作针对的是元素(Element对象)的属性,而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined
 
document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function
 
// 以对象形式同时设置多个属性,属性值可以是对象、数组等任意类型

$n2.prop( {
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://www.jb51.net/" }
} );
 
-------------------------attr-----------------------------prop-----------------------------------
w( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)导致class(attitude)也随之更改
w( $msg.attr("class") ); // newTest

jQuery.prop() 与attr()的更多相关文章

  1. JQUERY prop与attr差额

    1.  1-9-1之前和之后之间的差 <html> <script src="Js/jquery-1.9.0.js" type="text/javasc ...

  2. jquery prop和attr的区别

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...

  3. jquery prop and attr

    http://www.javascript100.com/?p=877 http://blog.sina.com.cn/s/blog_655388ed01017cnc.html http://www. ...

  4. jQuery学习之prop和attr的区别示例介绍

    1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( ...

  5. jQuery的prop和attr方法之间区别

    JQuery.attr(): Get the value of an attribute for the first element in the set of matched elements. J ...

  6. jquery的prop()和attr()

    jQuery1.6以后prop()和attr()的应用场景如下: 第一原则:只添加属性名称该属性就会立即生效应该使用prop(); 第二原则:只存在true/false的属性应该使用prop(); 设 ...

  7. 【Jquery】prop与attr的差别

    近期因项目须要用到复选框,当中一个控制全选. // 全选 $(".ckb_all").click(function(){ if($(this).attr("checked ...

  8. 【Jquery系列】prop和attr区别

    问题描述 由于prop(property的缩写)和attr(attribute的缩写)翻译成汉语,均有“特性.属性”等意思的原因,导致大家容易混淆分不清,本篇文章将试图从英文含义,中文含义和Jquer ...

  9. jQuery 选择器 prop() 和attr()

    Day30 jQuery 1.1.1.1 什么是jQuery? n jQuery是javaScript的前端框架.对常见的对象和常用的方法进行封装,使用更方便. 它兼容CSS3,还兼容各种浏览器.文档 ...

随机推荐

  1. python基础之面向对象(二)

    面向对象对程序设计OOD 找对象---->找类(归纳对象相同的特征与技能,还有没和对象独有的特征)面向对象编程OOP 先定义类---->实例化出对象查看成绩,交作业 在python3中,所 ...

  2. NODE 性能优化

    五个手段 “如果你的 node 服务器前面没有 nginx, 那么你可能做错了.”—Bryan Hughes Node.js 是使用 最流行的语言— JavaScript 构建服务器端应用的领先工具 ...

  3. android源码下载以及编译自己的ROM

    android源码下载以及编译自己的ROM 最近发现kernel.org被墙了,为什么这种网站也能被墙了? 要想下载源码的话,只能绕过去了.下面是我从网上搜索到的一些下载方法: =========== ...

  4. eclipse mars4.5安装hibernate开发环境

    在安装hibernate插件过程中遇到下面前三张图片所示的现象是没关系的,只要最后能看到第四张图的结果就说明安装成功,我一开始不知道走了好多弯路.我用的eclipse mars4.5,采用了在线安装的 ...

  5. iOS开发之Documentation.build/Script-BC552B3A15.sh:

    /Users/hbbhao/Library/Developer/Xcode/DerivedData/AWLive-dmbegyhgamayzudqqdentwngdpkr/Build/Intermed ...

  6. Robot Framework接口测试(3)--http请求之post

    http请求更多的是post请求,我们可以:查看说明:很多网站在登录的时候需要加上头部信息即headers,这个信息可以通过抓包工具获得——fiddler,一个轻量级的抓包工具,大神用了都说好~这里模 ...

  7. LA2218 Triathlon

    题意 PDF 分析 设出长度\(x,y,1-x-y\),就是关于它们的二元一次不等式,判断有没有解. 可以用半平面交来解决. x/V[i]+y/U[i]+(1-x-y)/W[i] < x/V[j ...

  8. codevs4189字典

    沙茶 题目大意:求某一个字符串前缀有没有在n个字符串前缀里出现过 题解:Trie树 查询前缀有没有出现 代码: //codevs4189 #include<iostream> #inclu ...

  9. Vue.js 中的动态路由

    静态路由是不可以传递参数的.需要传递参数得用到动态路由 那么如何将参数作为路由呢? //在参数名前面加上 : ,然后将参数写在路由的 path 内 routes: [ //将页面组件与path指令的路 ...

  10. bzoj 5093 [Lydsy1711月赛]图的价值——第二类斯特林数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=5093 不要见到组合数就拆! 枚举每个点的度数,则答案为 \( n*\sum\limits_{ ...