jquery里prop和attr的区别

简介:   本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法。在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢?其实很简单:attr可以用来获取或生成“直接写在html标签里的属性”prop可以用来获取元素的JS属性,如scrollHeight,offsetHeight等。

  本文通过具体的实例来讲述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;

目录
相关文章
|
7月前
|
JavaScript 前端开发 API
vue和jQuery有什么区别
vue和jQuery有什么区别
51 0
|
4月前
|
JavaScript Serverless
jquery attr()方法
【8月更文挑战第24天】在jQuery中,`attr()` 方法简化了对元素属性的操作。它可获取或设置属性值,支持四种用法:1) `attr(属性名)` 获取属性值;2) `attr(属性名, 属性值)` 设置属性值;3) `attr(属性名, 函数)` 设置动态属性值;4) `attr(属性对象)` 批量设置多个属性值。例如,获取或修改列表项的 `title` 或 `value` 属性。此外,`removeAttr()` 可用于删除属性。这极大地提高了DOM操作的效率和便捷性。
57 7
|
4月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
35 0
|
7月前
|
JavaScript 前端开发 API
js和jquery的区别
js和jquery的区别
62 8
|
7月前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
7月前
|
JavaScript 前端开发
jQuery 和 Zepto 的区别? 各自的使用场景?
jQuery 和 Zepto 的区别? 各自的使用场景?
47 1
|
7月前
|
JavaScript 前端开发 API
JavaScript和jQuery的区别
JavaScript和jQuery的区别
|
7月前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
62 0
|
7月前
|
JavaScript 前端开发 API
JQuery的attr()属性和JS的属性的方法
JQuery的attr()属性和JS的属性的方法
37 0
|
7月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
87 0