💡깨달음💡/jQuery
jQuery의 메서드(3)
과부하가즈아
2024. 2. 9. 15:15
🔴요소의 크기
🔴요소의 위치
🔴프로퍼티 설정
🔴클래스 설정
요소의 크기
선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있도록 다양한 메소드를 제공한다.
| .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("클래스명") -> 해당되는 선택자에 클래스명을 부여/삭제
🔗참고🔗