jQuery의 메서드(3)

🔴요소의 크기

🔴요소의 위치

🔴프로퍼티 설정

🔴클래스 설정

---

요소의 크기

선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있도록 다양한 메소드를 제공한다.

.width()	선택한 요소 집합의 첫 번째 요소의 너비를 반환하거나, 선택된 요소의 너비를 인수로 전달받은 값으로 설정함.
.height()	선택한 요소 집합의 첫 번째 요소의 높이를 반환하거나, 선택된 요소의 높이를 인수로 전달받은 값으로 설정함.
.innerWidth()	선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역을 포함한 너비를 반환함.
.innerHeight()	선택한 요소 집합의 첫 번째 요소의 높이에 패딩 영역을 포함한 높이를 반환함.
.outerWidth()	선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역과 테두리를 포함한 너비를 반환함. 또한, 인수로 true를 전달받으면 마진 영역까지 포함한 너비를 반환함.
.outerHeight()	선택한 요소 집합의 첫 번째 요소의 높이에 패딩 영역과 테두리를 포함한 높이를 반환함. 또한, 인수로 true를 전달받으면 마진 영역까지 포함한 높이를 반환함.

 

• width, height: 요소의 크기
• innerWidth, innerHeight: 요소의 크기 + 패딩의 크기
• outerWidth, outerHeight: 요소의 크기 + 패딩의 크기 + 테두리의 크기
• outerWidth(true), outerHeight(true): 요소의 크기 + 패딩의 크기 + 테두리의 크기 + 마진의 크기

---

요소의 위치

.offset()	선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환하거나, 선택한 요소의 위치를 인수로 전달받은 값으로 설정함.
.position()	선택한 요소 집합의 첫 번째 요소의 위치를 해당 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대 위치를 반환함.
.scrollLeft()	선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위치를 얻거나, 선택된 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정함.
.scrollTop()	선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나, 선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정함.

---

CSS 스타일 설정

선택한 요소의 스타일에 관한 속성값을 손쉽게 받아오거나 설정할 수 있다.

 

.css() 메소드

.css() 메소드를 사용하여 선택한 요소의 CSS 스타일을 간단하게 설정할 수 있다. 

 

.css() 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정합니다.

$(function() {
    $("button").on("click", function() {
    
        $("p").css("fontSize", "25px");          // 모든 <p>요소의 글씨 크기를 25px로 설정함.
        $("#text").html($("p").css("fontSize")); // 첫 번째 <p>요소의 글씨 크기를 반환함.
    });
});

 

 

선택한 요소의 스타일에 관한 여러 속성값을 한 번에 설정할 수도 있다.

$(function() {
    $("button").on("click", function() {

        $("p").css({
            fontSize: "25px",         // 모든 <p>요소의 글씨 크기를 25px로 설정함.
            backgroundColor: "yellow" // 모든 <p>요소의 배경색을 노란색으로 설정함.
        });
    });
});

 

하이픈(-)으로 연결된 CSS 속성 명과 camelCase 방식의 속성 명을 둘 다 사용할 수 있다.

$(function() {
    $("#fontSize").on("click", function() {

        $("p").css("fontSize", "25px"); // 자바스크립트와 제이쿼리 둘 다 사용할 수 있음.
    });

    $("#backgroundColor").on("click", function() {
        $("p").css("background-color", "red"); // 제이쿼리에서만 사용할 수 있음.
    });
});

---

프로퍼티 설정

특정 프로퍼티의 값을 읽어오거나 설정할 수 있다.

.attr()	선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute)값을 반환하거나, 선택한 요소의 지정된 속성을 전달받은 값으로 설정함.
.prop()	선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정함.
.removeAttr()	선택한 요소에서 지정된 속성(attribute)을 제거함.
.removeProp()	선택한 요소에서 지정된 프로퍼티(property)를 제거함.

---

attr()

$("#word").attr("title") // id가 "word"인 요소에 title 속성의 값을 가져옴.

$("#word").attr("title", "즐거운 제이쿼리 수업") // id가 "word"인 요소에 title 속성을 설정함.
          .css("color", "red"); 

$("#word").removeAttr("title") // 해당 요소에서 title 속성을 제거함.
          .css("color", "black");

---

prop()

$("input[value='jquery']").prop({ // <input>요소 중에서 value 값이 "jquery"인 요소를 선택한 후
        checked: true                 // 해당 요소에 checked 프로퍼티를 true 값으로 설정함.
});

$("#removeBtn").on("click", function() {
        $("input[value='jquery']").removeProp("checked"); // 해당 요소에서 checked 프로퍼티를 삭제함.
});

---

📌어트리뷰트(attr) 와 프로퍼티(prop) 차이

어트리뷰트 와 프로퍼티는 서로 연결되어있다. 둘중 하나를 바꾸면 DOM이 바뀌어진다.

속성(attribute)이란 HTML 요소의 추가적인 정보를 가지고 있는 이름과 값의 한 쌍을 의미하고,
프로퍼티(property)란 위와 같은 속성을 객체화하였을 때의 HTML DOM 트리 내부에서의 값을 의미한다.

attribute는 html 문서 안에서의 정적인(바뀌지 않는) 속성 그 자체를 의미하고, property는 html DOM 안에서 동적인(바뀌는) 속성(또는 그 값)을 의미한다.

<input id="check" type="checkbox" name="lecture" checked="checked">

<script>
// js
var i = document.getElemenyById("check");
i.getAttribute("id"); // 속성 으로서의 id == "check"
i.id; // 프로퍼티로서의 id == "check"

// jquery
$("input").attr("id"); // 속성 으로서의 id == "check"
$("input").prop("id"); // 프로퍼티로서의 id == "check"
</script>​

✔️.attr() 메소드는 속성만을 다루게 하고, 새롭게 제공되는 .prop() 메소드를 이용하여 프로퍼티 값을 다루도록 함

---

클래스 설정

.addClass()	선택한 요소에 인수로 전달받은 클래스를 추가함.
.removeClass()	선택한 요소에서 인수로 전달받은 클래스를 제거함.
.ToggleClass()	선택한 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 추가되어 있으면 제거함.
.hasClass()	인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지를 확인함.

---

addClass, removeClass, toggleClass -> 클래스 명이라고 해서 .을 붙일 필요없다.

<body>
    <div class="container">
      <a class="add" href="#none">넣기</a>
      <a class="remove" href="#none">빼기</a>
      <a class="toggle" href="#none">토글</a>
      <div>box</div>
    </div>

    <!-- 제이쿼리 open source 파일 -->
    <script src="script/jquery-1.12.4.js"></script>
    <!-- 우리가 만드는 커스텀 js -->
    <script src="script/index.js"></script>
  </body>

.container a {  /*명확하게 짚어주기*/
  text-decoration: none;
  color: black;

  /* a태그는 인라인 요소로 크기값을 지정할 수 없으니까 
  inline-block으로 속성을 바꿔주고 크기 값과 
  text를 중앙으로 배치해 준다. */
  display: inline-block;
  width: 60px;
  text-align: center;
  padding: 5px;

  background-color: beige;
}

.container div {  /*명확하게 짚어주기*/
  height: 200px;
  width: 230px;

  margin-top: 10px;

  background-color: aquamarine;

  /* 정중앙에 오게 하게 */
  text-align: center;
  line-height: 200px; /*line-heignt를 높이만큼 설정해주기*/
}

/*위아래 모두 같은 요소를 가르키지만 
class명을 부여했을때 배경색을 달리하겠다는 의미*/

.container div.active {  /*명확하게 짚어주기*/
  background-color: blueviolet;
}

$(".add").click(function () {
  $(".container div").addClass('active');
});
$(".remove").click(function () {
  $(".container div").removeClass('active');
});
$(".toggle").click(function () {
  $(".container div").toggleClass('active');
});

// 즉, 
// $("선택자").addClass("클래스명") -> 해당되는 선택자에 클래스명을 부여
// $("선택자").removeClass("클래스명") -> 해당되는 선택자에 클래스명을 삭제
// $("선택자").toggleClass("클래스명") -> 해당되는 선택자에 클래스명을 부여/삭제

 

 

 

🔗참고🔗

https://tcpschool.com/jquery/jq_style_property

https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EB%A9%94%EC%86%8C%EB%93%9C-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC#%EC%A1%B0%EC%83%81_%EC%9A%94%EC%86%8C_%ED%83%90%EC%83%89