prop()和attr()我该翻谁的牌子?
先上代码:
// 全选
function CheckAll() {
if ($("#th_checkbox").prop('checked'))
$('input[name="subCheckBox"]').each(function () {
$(this).prop('checked', true);
});
else
$('input[name="subCheckBox"]').each(function () {
$(this).prop('checked', false);
});
}
之前在做病理接收的页面的时候,需要做一个全选与反选的控件。在做控件的过程中,遇到一个问题,就是将代码中的prop方法换成attr方法,这个控件就失效了,改成prop方法就又可以了。以前也遇到过这个问题,当时并没有深究,这次就好好查了下资料,结合网上的例子,明确了二者之间的区别。
1.prop()
(1)对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
如果把DOM元素看成是一个普通的Object对象,这个对象在其定义时就具有一些属性(property),比如:
var option =
{
selected:false,
disabled:false,
attributes:[],
...
}
这个时候就使用prop()方法。
再举个例子:
<a href="#" id="link1" action="delete">删除</a>
当需要对a标签中的href进行操作时就要用prop()方法,因为href和id是a标签的固有属性。如图:
(2)jq 1.6的官方文档建议,对值为true和false的属性使用prop()
<input type="checkbox" id="check1"/>记住密码
<input type="checkbox" id="check1" checked="checked"/>记住密码 $("#chke1").prop("checked");// false
$("#chke2").prop("checked");// true $("#chke1").attr("checked"); //undefined
$("#chke2").attr("checked");//"checked"
$('').prop()返回的是DOM对象
2.attr()
(1) attr是从页面搜索获得元素值,所以页面必须明确定义元素才能获取值
(2)$('').attr()返回的是html对象
(3) 标签中我们自定义的属性用attr()
如:
<a href="#" id="link1" action="delete">删除</a>
其中action是我们自定义的属性,这时候我们要用attr()
根据(1),再举个例子:
<img src="https://www.runoob.com/images/pulpit.jpg" />
此时用 $("img").attr("width")是获取不到值的,因为页面源码中没有定义width属性,因为attr()扫描了页面源码。而用$("img").prop("width") 可返回 284。
综上所述:
1、当需要对页面标签自带的属性进行操作时,用prop(),其他属性用attr()
2、当属性值只有true和false的值时,用prop()
3、操作checkbox、radio时用prop()
4、官方建议,如图:
补充一点说明,虽然官方建议图中关于checked属性attr和prop都可以,但开发中还是用prop,因为checked对于attr可以选中但是不能取消,选中时值是不会变的,而用prop选中时值是会变的,可以选中也可以取消。
prop()和attr()我该翻谁的牌子?的更多相关文章
- jQuery学习之prop和attr的区别示例介绍
1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( ...
- jquery中的prop和attr比较区别
近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...
- jquery的prop()和attr()
jQuery1.6以后prop()和attr()的应用场景如下: 第一原则:只添加属性名称该属性就会立即生效应该使用prop(); 第二原则:只存在true/false的属性应该使用prop(); 设 ...
- 浅谈.prop() 和 attr() 的区别
今天编码时遇到一个问题,通过后台查询的数据设置前端checkbox的选中状态,设置选中状态为.attr('checked','true');没有问题,但是当数据重新加载时,checkbox应清空即所有 ...
- JQUERY prop与attr差额
1. 1-9-1之前和之后之间的差 <html> <script src="Js/jquery-1.9.0.js" type="text/javasc ...
- 【Jquery】prop与attr的差别
近期因项目须要用到复选框,当中一个控制全选. // 全选 $(".ckb_all").click(function(){ if($(this).attr("checked ...
- 【Jquery系列】prop和attr区别
问题描述 由于prop(property的缩写)和attr(attribute的缩写)翻译成汉语,均有“特性.属性”等意思的原因,导致大家容易混淆分不清,本篇文章将试图从英文含义,中文含义和Jquer ...
- prop与attr的区别
与prop一样attr也可以用来获取与设置元素的属性. 区别在于,对于自定义属性和选中属性的处理. 选中属性指的是 checked,selected 这2种属性 1. 对于自定义属性 attr能够获取 ...
- jQuery 选择器 prop() 和attr()
Day30 jQuery 1.1.1.1 什么是jQuery? n jQuery是javaScript的前端框架.对常见的对象和常用的方法进行封装,使用更方便. 它兼容CSS3,还兼容各种浏览器.文档 ...
随机推荐
- JVM系列【2】Class文件结构
JVM系列笔记目录 虚拟机的基础概念 class文件结构 class文件加载过程 jvm内存模型 JVM常用指令 GC与调优 如何查看class字节码文件 在idea中可以通过插件BinEd来查看二进 ...
- IP协议那些事
IP协议作为通信子网的最高层.提供无连接的数据报传输机制. IP协议的作用 寻址和路由 传递服务:提供不可靠,无连接的服务. 为什么说IP协议不可靠.无连接 不可靠:是指不能保证IP数据包能成成功到达 ...
- 洛谷 P4819 [中山市选]杀人游戏(tarjan缩点)
P4819 [中山市选]杀人游戏 思路分析 题意最开始理解错了(我太菜了) 把题意简化一下,就是找到可以确定杀手身份的最小的危险查看数 (就是不知道该村名的身份,查看他的身份具有危险的查看数量),用 ...
- HTML语义化罗嗦罗嗦
CSS还未诞生之前,为了实现一些样式效果.设计师必须使用一些物理标签,例如font.b等.这样会造成页面中充满了为实现各种样式的标签,特别是使用table标签来实现一些特殊的布局,俗称为"标 ...
- 说明资源路径位置类型无法解析The type javax.servlet.http.HttpServletResponse cannot be resolved.
导入dispatch项目后报错: 解决办法:在项目上单击鼠标右键> Add Libraries 选择 Server Runtime,下一步 选中Apache Tomcat7 完成 切换标 ...
- spring boot报错:Invalid bound statement (not found): com.
经检查发现mapper的namespace没写全导致的 正确应该写成这样就可以了:
- Asp.Net Core 查漏补缺《一》 —— IStartFilter
Asp.Net Core 查漏补缺<一> -- IStartFilter IStartFilter 实现了Configure,如下图一,而Configure方法接受并返回Action< ...
- java面试题:多线程交替输出偶数和奇数
一个面试题:实现两个线程A,B交替输出偶数和奇数 问题:创建两个线程A和B,让他们交替打印0到100的所有整数,其中A线程打印偶数,B线程打印奇数 这个问题配合java的多线程,很多种实现方式 在具体 ...
- JavaScript正则表达式随笔
概念先行. 正则表达式:又称规则表达式.常用于检索,替换符合某种符合(规则)的文本. 组成:普通字符和元字符,普通字符就是一个普通的查找串,如abc,原字符具有特殊含义. 这里研究的是JavaScri ...
- git的远程分支是干啥的,和本地的有什么区别?
不知道大家有没有经历过,当我们切换到了一个新的分支想要提交代码的时候,总会遇到这样的错误. 我们把日志里的英文翻译过来是说,我们当前的分支没有设置任何上游分支.然后git提示我们可以运行下面这行代码来 ...