对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。  对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。

关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单:

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。  对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

上面的描述也许有点模糊,举几个例子就知道了。

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

这个例子里元素的DOM属性有“href、target和class",这些属性就是元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

再举一个例子:

<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

jQuery中 prop() attr()使用详解的更多相关文章

  1. jQuery中prop() , attr() ,css() 的区别

    1.  HTML属性是指页面标记中放在引号中的值,而DOM属性则是指通过JavaScript能够存取的值. (1)在jQuery中,prop()是操作DOM属性,attr()是操作HTML属性. HT ...

  2. jquery中的ajax方法详解

    定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...

  3. jquery中的each()方法详解

    each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...

  4. jquery中的$()详解

    一.jQuery的三种$() $号是jQuery“类”的一个别称,$()构造了一个jQuery对象.所以,“$()”可以叫做jQuery的构造函数. 1.$()可以是$(expresion),即css ...

  5. Jquery中.ajax和.post详解

    之前写过一篇<.NET MVC 异步提交和返回参数> ,里面有一些ajax的内容,但是不深入,这次详细剖析下jquery中$.ajax的用法. 首先,上代码: jquery-1.5.1 $ ...

  6. jQuery中关于Ajax的详解

    原文来自:http://developer.51cto.com/art/201205/335732.htm Ajax让用户页面丰富起来, 增强用户体验. Ajax是所有Web开发的必修课. 虽然Aja ...

  7. 生死相依:说说JQuery中die()、live()详解[翻译]

    一个web前端工程师,应该知道jquery的.live()函数,知道它是做什么用的,但是不知它是怎么样工作的,使用起来也是不得得心应手的,甚至也没听说过.die()(去掉bind事件).即使你能熟悉这 ...

  8. JQuery中$.ajax()方法参数详解

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  9. JQuery中$.ajax()方法参数详解 及 async属性说明

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

随机推荐

  1. 【每天一个Linux命令】13. Linux中whereis命令的用法

      命令用途 whereis命令用来查找命令的位置,包括执行文件.源代码和手册页文件 命令用法 1. 查找指定命令<command>的位置,包括执行文件.源代码和手册页文件 格式:wher ...

  2. MediaController

    前言 本章内容是android.widget.MediaController,版本为Android 2.3 r1,翻译来自"唐明",再次感谢"唐明" !期待你一 ...

  3. JSthis对象

    第一章: this是javascript语言的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如 function test(){ ; } 随着函数使用场合的不同,this ...

  4. How to Send an Email Using UTL_SMTP with Authenticated Mail Server. (文档 ID 885522.1)

    APPLIES TO: PL/SQL - Version 9.2.0.1 to 12.1.0.1 [Release 9.2 to 12.1]Information in this document a ...

  5. static函数和普通函数的区别

    static函数与普通函数的区别: 用static修饰的函数,本限定在本源码文件中,不能被本源码文件以外的代码文件调用.而普通的函数,默认是extern的,也就是说,可以被其它代码文件调用该函数. 在 ...

  6. Linux学习之find命令

    find是我们很常用的一个Linux命令,但是我们一般查找出来的并不仅仅是看看而已,还会有进一步的操作,这个时候exec的作用就显现出来了. exec解释: -exec  参数后面跟的是command ...

  7. python 32位、64位确定

    1.python 进入交互式命令行,如下: 2.执行以下命令: import struct;print struct.calcsize("P") * 8

  8. 移动web开发

    在现代网页开发中,新增了一个移动设备网页开发,在这样的需求下,你需要考虑如何将移动web和pc web同步处理 /* * 浏览器如何识别移动设备 * */ var ua = navigator.use ...

  9. 手把手教程 Surface如何进行系统恢复?

    手把手教程 Surface如何进行系统恢复? 2015-01-29 05:53:00  [  中关村在线 原创  ]   作者: 周博林 |  责编:周博林 收藏文章 分享到 评论(10) Windo ...

  10. Cortex-M3 .s启动文件分析

    1. 基本概念(CMSIS): Cortex Micro-controller Software Interface Standard,微控制器软件接口标准. 2. CMSIS标准的文件结构: a) ...