jquery는 체크박스의 체크 상태를 확인하고 attr과 prop_jquery를 구별합니다.
- WBOY원래의
- 2016-05-16 15:25:001932검색
최근 프로젝트에서 입력의 체크박스가 선택되었는지 확인하기 위해 jquery를 사용해야 했습니다. attr()을 사용하면 체크박스의 변경된 상태를 가져올 수 없다는 사실을 발견했습니다. jQuery 1.6에는 공식에서 차용한 prop() 메소드가 추가되었습니다. 이에 대한 설명은 다음과 같습니다.
특정 상황에서는 속성과 속성의 차이가 중요할 수 있습니다. jQuery 1.6 이전에는 일부 속성을 검색할 때 .attr() 메서드가 속성 값을 고려하는 경우가 있었는데, 이로 인해 일관되지 않은 동작이 발생할 수 있었습니다. jQuery 1.6부터 .prop() 메소드는 속성 값을 명시적으로 검색하는 방법을 제공하는 반면, .attr()는 속성을 검색합니다.
위의 번역은 아마도 다음과 같을 것입니다. prop()은 많은 기본 속성을 포함하는 노드 객체에서 나오는 속성을 처리하고 attr()은 객체의 속성에서 나옵니다. 요소 노드에 속성을 추가합니다. 노드만 존재합니다. 물론 이전 번역은 제 개인적인 관점일 뿐입니다. 틀린 부분이 있으면 지적해주시면 됩니다~~
간단히 말하면
HTML 요소 자체에 내재된 속성을 처리할 때 prop 메소드를 사용하세요.
HTML 요소의 사용자 정의 DOM 속성을 처리할 때 attr 메소드를 사용합니다.
위의 설명은 다소 모호할 수 있습니다. 전문가의 블로그 내용을 인용하고 몇 가지 예를 제공하기 위해 테스트를 추가하겠습니다.
첫 번째 예: 요소의 고유 속성 및 사용자 정의 속성 설명
3bf9641bf4d128c196981f801f852009Baidu5db79b134e9f6b82c0b36e0489ee08ed
이 예에서 3499910bf9dac5ae3c52d5ede7383485 요소의 DOM 속성에는 "href, target 및 class"가 포함됩니다. 이러한 속성은 W3C 표준이나 다른 요소에도 포함됩니다. 즉, IDE에서 지능적으로 프롬프트할 수 있는 속성을 고유 속성이라고 합니다. 이러한 속성을 다룰 때는 prop 메소드를 사용하는 것이 좋습니다.
ddec45da1f9fc3d73ad4ec9e6cfd94cb삭제5db79b134e9f6b82c0b36e0489ee08ed
이 예에서 3499910bf9dac5ae3c52d5ede7383485 요소의 DOM 속성에는 "href, id 및 action"이 포함됩니다. 물론 처음 두 개는 고유한 속성이고, 후자의 "action" 속성은 사용자 정의됩니다. 자체에는 이 속성이 없습니다. 이는 사용자 정의 DOM 속성입니다. 이러한 속성을 처리할 때는 attr 메소드를 사용하는 것이 좋습니다. prop 메서드를 사용하여 값을 가져오고 속성 값을 설정하면 정의되지 않은 값이 반환됩니다.
두 번째 예: 양식 애플리케이션에서 prop()과 attr()의 차이점
먼저 attr() 메서드를 사용하는 코드를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> attr() vs prop()</title>
</head>
<body>
<h3>用attr（）判断是否选中</h3>
<input type="checkbox" id="input01" />我是第一个复选框A<br />
<input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
<input type="button" id="button01" value="获取A的checked状态" />
<input type="button" id="button02" value="获取B的checked状态" />
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#button01").click(function(){
var $state01=$("#input01").attr("checked");
alert($state01);
})
$("#button02").click(function(){
var $state02=$("#input02").attr("checked");
alert($state02);
})
})
</script>
</body>
</html>
위 프로그램의 테스트 결과는 다음과 같습니다.
동적 다이어그램에서 볼 수 있듯이 attr()을 사용하면 사용자가 선택한 상태를 얻을 수 없으며 양식의 초기 값만 반환됩니다.
prop() 메서드를 사용하는 코드를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> attr() vs prop()</title>
</head>
<body>
<h3>用prop（）判断是否选中</h3>
<input type="checkbox" id="input01" />我是第一个复选框A<br />
<input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
<input type="button" id="button01" value="获取A的checked状态" />
<input type="button" id="button02" value="获取B的checked状态" />
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#button01").click(function(){
var $state01=$("#input01").prop("checked");
alert($state01);
})
$("#button02").click(function(){
var $state02=$("#input02").prop("checked");
alert($state02);
})
})
</script>
</body>
</html>
위 프로그램의 테스트 결과는 다음과 같습니다.
동적 다이어그램에서 볼 수 있듯이 prop()을 사용하면 사용자의 선택 및 취소 작업 상태를 실시간으로 얻을 수 있습니다.
그래서 제가 정리한 차이점은 속성에 의해 기록된 값은 사용자의 작업에 따라 실시간으로 업데이트되는 반면, 속성에 의해 기록된 값은 초기 값이므로 내 의견일 뿐입니다.
이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.