jQuery에서 attr과 prop의 차이점은 무엇입니까-JS 튜토리얼-php.cn

jQuery에서 attr과 prop의 차이점은 무엇입니까

清浅

풀어 주다： 2018-11-23 16:22:22

원래의

2920명이 탐색했습니다.

이 기사에서는 속성 설정 및 속성 가져오기에 대한 jQuery의 attr()과 prop()의 차이점에 대해 설명합니다. 이는 특정 참조 값을 가지며 모든 사람에게 도움이 되기를 바랍니다.

우리는 종종 attr을 사용하는 데 익숙합니다. () 메소드를 사용하여 속성 값을 가져옵니다. 예를 들어 이미지의 alt 속성을 가져오려면 attr을 사용하여 직접 가져올 수 있습니다. 그러나 일부 요소에서는 표준 속성(true/false)을 직접 가져올 수 없습니다. ) 나중에 prop 속성이 도입되었고 그 반환 값은 표준 속성이므로 어떤 속성이 attr을 사용하고 어떤 속성이 prop을 사용합니까?

attr 속성

attr(name|properties|key,value|fn)

은 선택한 요소의 속성 값을 설정하거나 반환하는 데 사용됩니다.

속성 값을 반환하는 데 사용되는 경우 첫 번째로 일치하는 요소의 값만 반환됩니다.

속성 값을 설정하는 데 사용되면 일치하는 요소 집합에 대해 하나 이상의 속성/값 쌍이 설정됩니다.

예: 모든 이미지에 대해 src 속성과 길이 및 너비 설정

<body>
	<img>
	<script src="jquery/jquery-1.12.4.js"></script>
	<script>
		$(function(){
$("img").attr({width:"100px",height:"100px","src":"images/1.jpg"});
		})//为img添加多个属性值
</script>
</body>

로그인 후 복사

Image 11.jpg

prop 속성

일치하는 요소 집합에서 첫 번째 요소의 속성값 가져오기

true로 선택, false로 선택 취소

취미 선택 시 모두 선택, 나머지 단일 선택, 4개 모두 선택 시 모든 취미 선택

<script src="jquery/jquery-1.12.4.js"></script>
<script>
 $(function () {
 
  $("#j_cbAll").click(function () {
   //修改下面的哪些checkbox
   $("#j_tb input").prop("checked", $(this).prop("checked"));
 });
  $("#j_tb input").click(function () {
   if($("#j_tb input:checked").length  ==  $("#j_tb input").length){
    $("#j_cbAll").prop("checked", true)
}else {
    $("#j_cbAll").prop("checked", false)
  }
 });
 
});

</script>

로그인 후 복사

단일 선택 시

Image 12.jpg