zoukankan      html  css  js  c++  java
  • 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是基于setAttributegetAttribute来实现的,所以用attr是获取不到js对象的属性值的;

    而prop是通过对象实现的,如document.getElementById('div').name = 'one';

    那么,在实际中,我们除了上面的情况外,我们什么时候用attr,什么时候用prop呢?

    在我们要操作的是标签元素固有的一些属性时,推荐使用prop,固有属性指的是标签本身就有的一些属性,如a标签的href属性,img标签的src属性;

    而在我们要操作的是自定义的一些属性时,推荐用attr;

  • 相关阅读:
    利用rqalpha完成一个股指期货的回测(二) 分钟数据获取和转换
    利用rqalpha完成一个股指期货的回测(一)
    Pandas
    SAR停损指标
    一些简单的指标
    协程--流畅的Python第16章读书笔记
    python初级(302) 8 列表(选择排序练习二)
    博客已转移至 http://blog.yemou.net/
    将博客搬至51CTO
    将博客搬至CSDN
  • 原文地址:https://www.cnblogs.com/1906859953Lucas/p/9139274.html
Copyright © 2011-2022 走看看