jQuery) attr과 prop

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

attr

- 태그 객체에 inline에 작성된 속성 관리

- getter : 해당 속성 값을 리턴 (작성되어 있지 않다면 undefined 리턴) → n개의 요소를 가진 경우 0번지 요소 값을 반환

- setter : 해당 속성을 작성() → n개 모든 요소의 속성을 변경

 

HTML 코드

<div class="img-wrapper">
    <img src="../../sample/image/flower1.PNG">
    <img src="../../sample/image/flower2.PNG" alt="꽃이미지1">
</div>
<button id="btn1">attr</button>

 

CSS 코드

<style>
.img-wrapper img {
    width: 300px;
    margin: 10px 5px;
}
</style>

 

jQuery 코드

$(btn1).click((e) => {
    const $img = $(".img-wrapper img");
    console.log($img);
});

 

getter

// getter
console.log($img.attr("src"));
console.log($img.attr("alt"));

n개 이상의 요소를 갖고 있기 때문에 0번지의 요소 값을 반환합니다.

따라서 src는 flower1을 리턴, alt는 0번지 요소에 존재하지 않으므로 undefined가 리턴되었습니다.

 

setter

// setter
$img.attr('src', '../../sample/image/hyunta.jpg');

n개 모든 요소의 속성을 변경하므로, 두 사진 모두 hyunta.jpg로 변경된 것을 확인할 수 있습니다.

 

---

prop

- 논리형으로 처리될 값을 제어 (javascript를 이용한 동작제어)

 

HTML 코드

<fieldset>
    <legend>prop</legend>
    <input type="checkbox" id="checkAll">
    <label for="checkAll">전체선택/전체해제</label>

    <input type="checkbox" name="menu" id="menu1" value="피자">
    <label for="menu1">피자</label>
    <input type="checkbox" name="menu" id="menu2" value="햄버거" checked="checked">
    <label for="menu2">햄버거</label>
    <input type="checkbox" name="menu" id="menu3" value="핫도그">
    <label for="menu3">핫도그</label>
    <br><br>
    <button id="btn2">확인</button>
</fieldset>

 

jQuery 코드

 

attr와 prop의 차이점

$(btn2).click((e) => {
    const $menu2 = $(menu2);
    console.log($menu2.attr('checked'));
    console.log($menu2.prop('checked'));
});

attr은 inline에 작성된 checked 속성 값을 리턴해주므로, 'checked'가 리턴되었고

prop은 해당 속성 값에 대하여 true/false로 리턴해줍니다. menu2에 checked가 되어있으므로 true가 리턴되었습니다.

 

prop을 이용하여 동적으로 제어해줄 수 있습니다.

$menu2.prop('checked', true);

checked가 false일 때 확인 버튼을 누르면 checked가 true로 변경되어 체크박스가 활성화 됩니다.

 

체크된 요소의 value 값 나열

// 체크된 요소의 value 값 나열
const $menuChecked = $("[name=menu]:checked");
const checkedValues = [];

// jQuery의 foreach -> 매개변수 순서가 index, element이므로 주의!
$menuChecked.each((index, checkbox) => {
    console.log(index, checkbox);
    checkedValues.push($(checkbox).val());
});

alert(checkedValues.length ? checkedValues : '선택된 항목이 없습니다.');

 

햄버거, 핫도그 체크 후 확인 버튼 클릭 시

name이 menu인 요소들 중 checked가 된 요소들을 가져왔고, 이를 each()메소드를 이용하여 하나씩 꺼내와 배열에 담아주었습니다.

여기서 each()는 jQuery의 foreach() 메소드!!!

단, 매개변수의 순서가 index, element 순이므로 주의해야 합니다.

 

 

전체선택/전체해제 버튼

방법 1)

- 순수 자바스크립트 방식

$(checkAll).click((e) => {
    $("[name=menu]").prop('checked', e.target.checked);
});

전체선택/전체해제 버튼이 활성화되면 모든 체크박스가 활성화되고, 비활성화되면 모든 체크박스가 비활성화됩니다.

 

방법 2)

- jQuery 객체로 변환하는 방식

$("[name=menu]").prop('checked', $(e.target).prop('checked'));

 

방법 3)

- is() 메소드 활용

$("[name=menu]").prop('checked', $(e.target).is(':checked'));

e.target이 is(':checked'), is에서 제시한 selector와 일치한지에 대한 여부를 확인하여 true/false를 반환해줍니다.

따라서 e.target이 checked인 지에 대한 여부를 확인하여 true/false를 반환해주므로 이를 이용해 제어할 수도 있겠습니다.

 

console.log($(e.target).is(':checked'))

체크박스가 활성화되면 true, 비활성화되면 false를 리턴하는 것을 확인할 수 있습니다.