jquery里prop和attr的区别
本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法。
在jquery里，我们要获取一个标签元素的属性，可以用attr或者prop，那么两者有什么区别呢？
其实很简单：
attr可以用来获取或生成“直接写在html标签里的属性”
prop可以用来获取元素的JS属性，如scrollHeight,offsetHeight等。
我们知道，scrollHeight是js里用来获取元素的完整高度，它是js的属性，并不是jquery属性，如果要在jquery里使用这个属性的话，需要把jquery对象转换成js对象，这样才能使用js的属性，而另一种方法就是用jquery里的prop函数
一个关于滚动条的实例：
<!doctype html>
<html lang="en">
<head>
<title>jquery操作滚动条的在线演示-aijQuery.cn</title>
<script language="JavaScript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body style="height:2000px">
<DIV id="aijquery1" class="container-fluid text-center pt-4" style="height:350px">
这是div#aijquery1<br>
<button id="bt1">滚动到div#aijquery2</button>
</DIV>
<DIV id="aijquery2" class="container-fluid text-center pt-4" style="height:200px;overflow:auto;border:2px solid red">
这是div#aijquery2<br><button id="bt2">滚动到div#aijquery1</button>
<div style="height:450px;border:1px solid #green;padding-top:50px">
这是div#aijquery2内的子DIV<br>
<button id="bt3">操作div#aijquery2的滚动条滚动到底端</button>
</div>
这是div#aijquery2的底部
</DIV>
<script language="javascript">
$("#bt1").click(function(){
//$("html,body").scrollTop($("#aijquery2").offset().top);
$("html,body").animate({scrollTop:$("#aijquery2").offset().top},1000);
});
$("#bt2").click(function(){
//$("html,body").scrollTop($("#aijquery1").offset().top);
$("html,body").animate({scrollTop:$("#aijquery1").offset().top},1000);
});
$("#bt3").click(function(){
//$("#aijquery2").scrollTop($("#aijquery2")[0].scrollHeight);
$("#aijquery2").animate({scrollTop:$("#aijquery2").prop("scrollHeight")},500);
});
</script>
</body>
</html>
在上面的实例里，我们要操作滚动条滚动到元素的底部时，就需要取得元素的scrollHiehgt属性的值，我们可以直接用"$(div).prop('scrollHeight')"来获取，但如果换成attr就获取不到了。
如果我们深入jquery的源码来研究，就能发现，jquery里的attr是基于setAttribute和getAttribute来实现的，所以用attr是获取不到js对象的属性值的；
而prop是通过对象实现的，如document.getElementById('div').name = 'one';
那么，在实际中，我们除了上面的情况外，我们什么时候用attr，什么时候用prop呢？
在我们要操作的是标签元素固有的一些属性时，推荐使用prop，固有属性指的是标签本身就有的一些属性，如a标签的href属性，img标签的src属性；
而在我们要操作的是自定义的一些属性时，推荐用attr；
jquery里prop和attr的区别的更多相关文章
- jQuery的prop和attr的区别，及判断复选框是否选中
jQuery的prop和attr的区别 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参数有区别,att ...
- jquery中prop和attr的区别
jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...
- 第82天：jQuery中prop()和attr()的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...
- jquery中prop()和attr()的区别
相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在 ...
- jquery中的prop和attr比较区别
近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...
- jQuery学习之prop和attr的区别示例介绍
1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( ...
- jQuery中prop和attr区别
问题 今天给一个button加onclick事件,由于最后button根据需要转成字符串,因此不能使用jQurey.click(),只能给button添加onclick属性的方式. 于是,$butto ...
- jquery中prop，attr，data的区别
这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...
- Jquery 获取Checkbox值，prop 和 attr 函数区别
总结: 版本 1.6 1.6 1.4 1.4 函数 勾选 取消勾选 勾选 取消勾选 attr('checked') checked undefined true false .prop('checke ...
随机推荐
- Mycat SqlServer Do not have slave connection to use, use master connection instead
Do not have slave connection to use, use master connection instead 很奇怪啊 都是按照配置配置的 怎么就是不通呢 有点怀疑人生了吧 其 ...
- iOS 优秀开源项目
1. 界面 iCarousel: 用来做图片旋转显示效果(相册). MZTimerLabel:用来制作一个计时并显示时间的 label. MSDynamicsDrawerViewController, ...
- Java50道经典习题-程序6 求最大公约数及最小公倍数
题目:输入两个正整数m和n,求其最大公约数和最小公倍数.分析:用辗转相除法求最大公约数 两个数的最大公约数:设两个数分别为n和m,(n>=m);用定义一个变量i,使用for循环,将i的取值 ...
- Mysql 优化与测试
由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 : --> 点击这里 以下的测试数据根据环境的不同所耗费的时间有所不同,例如我在腾讯云上的测试 ...
- mycat引起的insert后马上select不到数据的故障分析
由于有2个task表t_task和e_task,代码中Insert了t_task后马上select t_task然后把结果Insert到e_task,结果发现经常e_task会没有任何数据. 原因分析 ...
- java_I/O字符流
I/O流(Stream) INPUT:输入流,从文件里读OUPUT:输出流,写内容到文件 IO流分为:字符流和字节流 字符流:处理纯文本文件. 字节流:处理可以所有文件. 字符输出流测试: @Test ...
- linux 多线程之间信号传递
函数 sigwait sigwait的含义就如同它的字面意思:等待某个信号的到来.如果调用该函数的线程没有等到它想等待的信号那么该线程就休眠.要达到等到一个信号,我们得做下面的事: 首先,定义一个信号 ...
- FPGA实战操作(2) -- PCIe总线（协议简述）
目录 1. PCIe基础知识 2. 事务层协议 2.1 数据包结构 2.2 帧头含义详述 3. 报文举例 3.1 寄存器读报文 3.2 完成报文 4. 机制简述 4.1 Non-Posted和Post ...
- 语言模型预训练方法（ELMo、GPT和BERT）——自然语言处理（NLP）
1. 引言 在介绍论文之前,我将先简单介绍一些相关背景知识.首先是语言模型(Language Model),语言模型简单来说就是一串词序列的概率分布.具体来说,语言模型的作用是为一个长度为m的文本确定 ...
- 1.CentOS6.5下的基础DNS配置
常规DNS的安全和配置1.安装DNSyum -y install bind bind-utils安装后生成的文件,我们主要配置下面几个/etc/named.conf/var/named/xx这个xx是 ...