[JS] jQuery의 prop(), attr() 메서드 비교 (+is() 메서드)

 

 

prop()

Dom 속성(property) 값을 가져오거나 설정할 때 사용된다.

주로 DOM 속성을 다룰 때 사용되며, attr() 메서드와 유사하지만, 다루는 대상이 다르다.

 

속성 값을 가져오기 (Getter (매개변수가 하나))

var isDisabled = $("form button").prop("disabled"); // true 또는 false를 반환

 

속성 값을 설정하기 (Setter  (매개변수가 둘))

$("form button").prop("disabled", true); // 버튼을 비활성화

 

attr()

 

HTML요소의 속성(Attribute) 값을 가져오거나 설정할 때 사용된다.

 

특성 값 가져오기 (Getter (매개변수가 하나))

var isDisabled = $("form button").attr("disabled"); 
// 'disabled' 속성이 존재하면 undefined가 아닌 값 반환
// 'disabled' 속성이 있으면 값 (일반적으로"disabled" 텍스트) 반환

 

특성 값 설정하기 (Setter (매개변수가 둘))

$("form button").attr("disabled", "disabled"); // 버튼을 비활성화

 

 

prop()과 attr()의 차이점

 

prop()은 속성(Property)과 관련이 있다.

속성(property)은 브라우저의 DOM 객체에서 관리되는 값으로, 요소의 상태를 반영한다.

예시로, checked, disabled, selected 등의 속성은 요소의 현재 상태를 나타내는 속성이다.

 

attr()은 HTML 특성(Attribute)과 관련이 있다.

특성(attribute)은 요소의 초기 상태를 나타내며, HTML 문서에서 명시된 값을 나타낸다.

attr() 메서드는 주로 HTML 속성 값을 읽거나 설정할 때 사용된다.

 

<!--HTML-->
<input type="checkbox" id="check" checked="checked">

//jQuery
$("#check").prop("checked");
//체크박스의 현재 상태(true 또는 false)를 반환한다.

$("#check").attr("checked");
//HTML에서 설정된 checked 속성의 값을 반환한다.
//일반적으로 문자열 "checked"를 반환한다.

 

 

 

.is()

.is() 메서드는 jQuery에서 특정 요소가 주어진 선택자(selector), 요소(element), 또는 함수에서 정의된 조건과 일치하는지 여부를 확인할 때 사용된다. 이 메서드는 true 또는 false 값을 반환하며, 조건에 따라 요소가 일치하는지 여부를 판단한다.

 

특정 선택자와 일치하는지 확인

요소가 특정 클래스, ID, 태그 등과 일치하는지 확인할 수 있다.

if ($("#myElement").is(":visible")) {
	// #myElement가 보이는 상태일 때
	console.log("Element is visible.");
}

 

특정 요소와 일치하는지 확인

요소가 다른 특정 요소와 일치하는지 확인할 수 있다.

var anotherElement = $("#anotherElement"); 
if ($("#myElement").is(anotherElement)) { 
	// #myElement와 #anotherElement가 동일한 요소일 때 
    console.log("Elements are the same."); 
}

 

함수로 정의된 조건과 일치하는지 확인

사용자 정의 함수로 요소가 특정 조건을 만족하는지 확인할 수 있다.

if ($("#myElement").is(function() { return $(this).hasClass("active"); })) { 
	// #myElement에 "active" 클래스가 있을 때 
	console.log("Element is active."); 
}

 

자주 사용하는 선택자 

• :visible : 요소가 화면에 보이는지 확인할 때 사용한다.
• :hidden : 요소가 화면에서 숨겨져 있는지 확인할 때 사용한다.
• :checked : 체크박스, 라디오 버튼 등이 체크되어 있는지 확인할 때 사용한다.
• :disabled : 요소가 비활성화(disabled) 상태인지 확인할 때 사용한다.

 

 

제이쿼리 태그

<script src="https://code.jquery.com/jquery-latest.min.js"></script>