07.27(attr, prop)

attr

문서객체의 작성된 특정속성을 가져오거나 세팅할 수 있음

작성되지 않은 속성을 가져오려고 하면, undefined를 리턴

<img src="images/flower3.PNG" width="300px">
<img src="images/flower4.PNG" width="300px">
<input type="button" value="확인" id="btn1">
<script>
$("#btn1").click(()=>{
//attr : getter 첫번째 요소의 속성값을 리턴
//이미지가 두개가 담겼지만 첫번째img 값만 가져옴(세팅할때는 모든 요소 세팅)
// let attrSrc = $("img").attr('src');
// console.log($("img"));
// console.log(attrSrc);

//attr : setter 모든 요소의 속성값을 변경
$("img").attr('src', "images/flower1.png");
});
</script>

 

 

prop

문서객체의 속성값을 js를 처리하기 위해 true/false값 처리

<input type="checkbox" name="hobby" id="game" value="game">
<label for="game">게임</label>
<input type="checkbox" name="hobby" id="movie" value="movie">
<label for="movie">영화</label>
<input type="checkbox" name="hobby" id="fitness" value="fitness">
<label for="fitness">운동</label>
<input type="button" value="실행" id="btn2">
<script>
$("#btn2").click(()=>{
  //getter
  $("[name=hobby]").each((index, elem) => {
      console.log($(elem).val() + " : " + $(elem).prop('checked'));

   	  //setter
   	  // $(elem).prop("checked", true);
   	  // $(elem).prop("checked", !$(elem).prop('checked'));
    });
  $("[name=hobby]").prop("checked", true);
});
</script>