[jQuery]제이쿼리 속성조작 메서드

# 속성조작 메서드

- $("요소선택").html() => 선택한 요소안의 내용을 가져오거나, 다른 내용으로 바꾼다.

- .attr("속성선택") - 속성값을 가져온다.

 

See the Pen [js]속성조작 메서드 by kaia (@kaiaakim) on CodePen.

<div class="study">
  <h1>jQuary를 공부합시다!!</h1>
  <p>속성조작 메서드</p>
</div>
<div class="colorBox">
  <h1>속성변경</h1>
  <p class="color" type="text">
    <span class="red" style="color:red; background:yellow;">red</span>    <span class="hotpink" style="color:hotpink;">hotpink</span>      
    </p>
</div>

*{
  margin: 0; padding: 0;
}
li{
  list-style: none;
}
a{
  text-decoration: none; color: #000;
}

$(function(){
  const jqHtml = $(".study").html();
  console.log(jqHtml); //<h1>jQuary를 공부합시다!!</h1> <p>속성조작 메서드</p>

  const typeVal = $("p.color").attr("type"); //.attr() - 속성값을 가져온다.
  console.log(typeVal); //"text"

  const colorVal = $("p.color .red").attr("style");
  console.log(colorVal); //"color:red; background:yellow;"

  const borderVal = $("p.color .red").attr("border");
  console.log(borderVal); //2

  $("p.color .red").attr({
    "style":"color:yellow; background:skyblue;"
  }); //배경과 폰트컬러를 불러와 변경함
});