对于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. Android——采用SQLiteDatabase操作SQLite数据库

    除了能够使用文件或SharedPreferences存储数据.还能够选择使用SQLite数据库存储数据. 在Android平台上,集成了一个嵌入式关系型数据库-SQLite,SQLite3支持 NUL ...

  2. html系列教程--base button canvas caption

    <base> 标签 <base> 标签为页面上的所有链接规定默认地址或默认. demo: <head> <base href="http://www ...

  3. JAVA-反射-getGenericSuperclass()

    1 public class Person<T> { 2 3 } 4 5 import java.lang.reflect.ParameterizedType; 6 import java ...

  4. JVM学习之GC常用算法

    出处:博客园左潇龙的技术博客--http://www.cnblogs.com/zuoxiaolong,多谢分享 GC策略解决了哪些问题? 既然是要进行自动GC,那必然会有相应的策略,而这些策略解决了哪 ...

  5. Android setOnTouchListener识别滑动手势

    setOnTouchListener(new OnTouchListener() { private float startX, startY, offsetX, offsetY; @Override ...

  6. CSS3弹性盒模型布局模块

    原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-d ...

  7. C#BASE64 UTF8字符串加密解密

    base 64 解码 base64 bb = new base64(); string orgStr= Encoding.Default.GetString(bb.GetDecoded("b ...

  8. Task和backStack(本篇章核心)

     对Task和backStack的认识过程 1.由demo测试得到的关系图: 1.一个task中可以有多个app的Activity, 由于一个app可以对应一个或多个process, 2.所以一个ta ...

  9. selenium webdriver 学习笔记(一)

    selenium webdriver 第一个脚本: #coding = utf-8 from selenium import webdriver import time url = "htt ...

  10. oracle 高级分组

    oracle 高级分组 博客分类: 数据库基础 oraclesql  10.高级分组 本章目标: 对于增强的group by需要掌握: 1.使用rollup(也就是roll up累计的意思)操作产生s ...