jQuery中attr和prop

原链接 http://www.jb51.net/article/76588.htm

大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。

jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

那么,什么时候使用attr(),什么时候使用prop()?1.添加属性名称该属性就会生效应该使用prop();2.是有true,false两个属性使用prop();3.其他则使用attr();

简单的来说就是:

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
上面的描述也许有点模糊,引用一些大神的博客内容加上我的测试,举几个例子就知道了。

 第一个例子:元素的固有属性以及自定义属性说明

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>
 这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

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

第二个例子:prop()与attr()在表单应用上的区别

先来看一段用attr()方法代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
< html >
  < head >
   < meta charset = "utf-8" />
   < title > attr() vs prop()</ title >
  </ head >
  < body >
   < h3 >用attr()判断是否选中</ h3 >
   < input type = "checkbox" id = "input01" />我是第一个复选框A< br />
   < input type = "checkbox" id = "input02" checked = "checked" />我是第二个复选框B< br />
   < input type = "button" id = "button01" value = "获取A的checked状态" />
   < input type = "button" id = "button02" value = "获取B的checked状态" />
   < script src = "js/jquery-1.11.0.js" type = "text/javascript" charset = "utf-8" ></ script >
   < script type = "text/javascript" >
    $(function(){
     $("#button01").click(function(){
      var $state01=$("#input01").attr("checked");
      alert($state01);
     })
     $("#button02").click(function(){
      var $state02=$("#input02").attr("checked");
      alert($state02);
     })
    })
   </ script >
  </ body >
</ html >

上面这段程序的测试结果是:

从动态图可以看出来,用attr()获取不到用户选中的状态,它只返回表单的初始值。而且若没有明确有checked属性,它返回undefined!

 再来看一段用prop()方法代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
< html >
  < head >
   < meta charset = "utf-8" />
   < title > attr() vs prop()</ title >
  </ head >
  < body >
   < h3 >用prop()判断是否选中</ h3 >
   < input type = "checkbox" id = "input01" />我是第一个复选框A< br />
   < input type = "checkbox" id = "input02" checked = "checked" />我是第二个复选框B< br />
   < input type = "button" id = "button01" value = "获取A的checked状态" />
   < input type = "button" id = "button02" value = "获取B的checked状态" />
   < script src = "js/jquery-1.11.0.js" type = "text/javascript" charset = "utf-8" ></ script >
   < script type = "text/javascript" >
    $(function(){
     $("#button01").click(function(){
      var $state01=$("#input01").prop("checked");
      alert($state01);
     })
     $("#button02").click(function(){
      var $state02=$("#input02").prop("checked");
      alert($state02);
     })
    })
   </ script >
  </ body >
</ html >

上面这段程序的测试结果是:

从动态图可以看出来,用prop()可以实时获取用户的选中与取消操作状态。








  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSDN IT狂飙上传的代码均可运行,功能ok的情况下才上传的,直接替换数据即可使用,小白也能轻松上手 【资源说明】 基于MATLAB实现的数字调制就是把数字基带信号的频谱搬移到高频处,形成适合在信道传输的带通信号基本的数字调制方式有振幅键控(ASK)、频移键控(FSK)、绝对相移键控(PSK)、相对(差分)相移键控(DPSK)在接收端可以基于想干解调或非相干解调还原数字基带信号+使用说明文档 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2020b;若运行有误,根据提示GPT修改;若不会,私信博主(问题描述要详细); 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可后台私信博主; 4.1 期刊或参考文献复现 4.2 Matlab程序定制 4.3 科研合作 功率谱估计: 故障诊断分析: 雷达通信:雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计:SOC估计 目标定位:WSN定位、滤波跟踪、目标定位 生物电信号:肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统:DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信 5、欢迎下载,沟通交流,互相学习,共同进步!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值