jQuery中 prop() attr()使用详解
对于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()使用详解的更多相关文章
- jQuery中prop() , attr() ,css() 的区别
1. HTML属性是指页面标记中放在引号中的值,而DOM属性则是指通过JavaScript能够存取的值. (1)在jQuery中,prop()是操作DOM属性,attr()是操作HTML属性. HT ...
- jquery中的ajax方法详解
定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...
- jquery中的each()方法详解
each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...
- jquery中的$()详解
一.jQuery的三种$() $号是jQuery“类”的一个别称,$()构造了一个jQuery对象.所以,“$()”可以叫做jQuery的构造函数. 1.$()可以是$(expresion),即css ...
- Jquery中.ajax和.post详解
之前写过一篇<.NET MVC 异步提交和返回参数> ,里面有一些ajax的内容,但是不深入,这次详细剖析下jquery中$.ajax的用法. 首先,上代码: jquery-1.5.1 $ ...
- jQuery中关于Ajax的详解
原文来自:http://developer.51cto.com/art/201205/335732.htm Ajax让用户页面丰富起来, 增强用户体验. Ajax是所有Web开发的必修课. 虽然Aja ...
- 生死相依:说说JQuery中die()、live()详解[翻译]
一个web前端工程师,应该知道jquery的.live()函数,知道它是做什么用的,但是不知它是怎么样工作的,使用起来也是不得得心应手的,甚至也没听说过.die()(去掉bind事件).即使你能熟悉这 ...
- JQuery中$.ajax()方法参数详解
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
- JQuery中$.ajax()方法参数详解 及 async属性说明
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
随机推荐
- Android——采用SQLiteDatabase操作SQLite数据库
除了能够使用文件或SharedPreferences存储数据.还能够选择使用SQLite数据库存储数据. 在Android平台上,集成了一个嵌入式关系型数据库-SQLite,SQLite3支持 NUL ...
- html系列教程--base button canvas caption
<base> 标签 <base> 标签为页面上的所有链接规定默认地址或默认. demo: <head> <base href="http://www ...
- JAVA-反射-getGenericSuperclass()
1 public class Person<T> { 2 3 } 4 5 import java.lang.reflect.ParameterizedType; 6 import java ...
- JVM学习之GC常用算法
出处:博客园左潇龙的技术博客--http://www.cnblogs.com/zuoxiaolong,多谢分享 GC策略解决了哪些问题? 既然是要进行自动GC,那必然会有相应的策略,而这些策略解决了哪 ...
- Android setOnTouchListener识别滑动手势
setOnTouchListener(new OnTouchListener() { private float startX, startY, offsetX, offsetY; @Override ...
- CSS3弹性盒模型布局模块
原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-d ...
- C#BASE64 UTF8字符串加密解密
base 64 解码 base64 bb = new base64(); string orgStr= Encoding.Default.GetString(bb.GetDecoded("b ...
- Task和backStack(本篇章核心)
对Task和backStack的认识过程 1.由demo测试得到的关系图: 1.一个task中可以有多个app的Activity, 由于一个app可以对应一个或多个process, 2.所以一个ta ...
- selenium webdriver 学习笔记(一)
selenium webdriver 第一个脚本: #coding = utf-8 from selenium import webdriver import time url = "htt ...
- oracle 高级分组
oracle 高级分组 博客分类: 数据库基础 oraclesql 10.高级分组 本章目标: 对于增强的group by需要掌握: 1.使用rollup(也就是roll up累计的意思)操作产生s ...