本文通过具体的实例来讲述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的区别的更多相关文章

  1. jQuery的prop和attr的区别，及判断复选框是否选中

    jQuery的prop和attr的区别 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参数有区别,att ...

  2. jquery中prop和attr的区别

    jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...

  3. 第82天：jQuery中prop()和attr()的区别

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  4. jquery中prop()和attr()的区别

    相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在 ...

  5. jquery中的prop和attr比较区别

    近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...

  6. jQuery学习之prop和attr的区别示例介绍

    1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( ...

  7. jQuery中prop和attr区别

    问题 今天给一个button加onclick事件,由于最后button根据需要转成字符串,因此不能使用jQurey.click(),只能给button添加onclick属性的方式. 于是,$butto ...

  8. jquery中prop，attr，data的区别

    这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...

  9. Jquery 获取Checkbox值，prop 和 attr 函数区别

    总结: 版本 1.6 1.6 1.4 1.4 函数 勾选 取消勾选 勾选 取消勾选 attr('checked') checked undefined true false .prop('checke ...

随机推荐

  1. 【OCP 12c】最新CUUG OCP-071考试题库（62题）

    62.(13-17)choose the best answer: You need to list the employees in DEPARTMENT_ID 30 in a single row ...

  2. 鸡肋点搭配ClickJacking攻击-获取管理员权限

    作者:jing0102 前言 有一段时间没做测试了,偶尔的时候也会去挖挖洞.本文章要写的东西是我利用ClickJacking拿下管理员权限的测试过程.但在说明过程之前,先带大家了解一下ClickJac ...

  3. 阿里云服务器之hexo环境搭建

    上一步主要主要讲解云服务器购买和连接云服务器,以及文件的操作.本文主要讲解利用hexo搭建自己的静态博客,在服务器中建立自己的hexo博客环境,最后达到可以远程访问,以及远程git推送到github. ...

  4. AssertJ断言系列<一>

    1 - Get AssertJ Core assertions Maven的pom.xml加入如下配置: <dependency> <groupId>org.assertj&l ...

  5. Vue-cli 2.9 多页配置及多页面之间的跳转问题

    vue开发,现在大部分做的都是(SPA)应用,但是,由于,需求不同,我们针对的用户需求变更较为,频繁,如果每次都全量打包更新,给开发的自测,及测试妹子的任务就会多,每次都要重新验证一下才放心.所以,想 ...

  6. Cassandra2.0.8导入到eclipse运行

    如果想通过eclipse来调试或者查看Cassandra的代码,将其project导入到eclipse之中不愧是个好选择.下面将讲述将2.0.8 版本导入elcipse的过程. 该篇文章主要参考的官方 ...

  7. npm install 报错： WARN checkPermissions Missing write access to 解决方案

    经过各种百度搜索,发现这个问题的出现并不是管理员权限的问题,而是之前安装失败了,这个文件已经存在了,再次安装无法覆盖写入的问题. 解决方法: 1.找到node的全局安装路径,一般在nodejs文件夹的 ...

  8. 论文分享NO.3（by_xiaojian）

    论文分享第三期-2019.03.29 Fully convolutional networks for semantic segmentation,CVPR 2015,FCN 一.全连接层与全局平均池 ...

  9. [iOS]使用Windows Azure來做iOS的推播通知 （转帖)

    這一篇我們用Windows Azure 的Mobile Service 來實作iOS的推播通知,底下我們分成三個階段來探討如何實作推播通知的服務: 第一階段: 開啓你的Windows Aure服務   ...

  10. window7 下安卓开发环境搭建

    最新Win7下配置搭建安卓开发环境 注意:因为墙的原因 google的更新服务器需要改 hosts 你懂的.. 74.125.237.1       dl-ssl.google.com  不行就VPN ...