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的区别

最新文章

热门文章