728x90
Jquery의 속성 메소드를 사용하여 태그 속성 값을 가져오거나 설정할 수 있다.
| 메소드 | 예시 | 설명 |
|---|---|---|
| 💡 .attr() | $("selector").attr("속성명") | 지정된 속성명에 해당하는 속성값 반환 일치하는 요소가 다수면 처음 일치하는 요소 |
| $("selector").attr("속성명", "속성값") | 지정된 속성명에 속성값을 설정 일치하는 요소가 많으면 모두 설정 |
|
| 💡 .val() | $("selector").val() | 선택된 요소의 값을 반환 |
| $("selector").val("값") | 선택된 요소의 값을 설정 | |
| 💡 .text() | $("selector").text() | 선택된 요소의 text 값 반환 (자손포함) |
| $("selector").text("값") | 선택된 요소에 text값 설정 | |
| 💡 .html() | $("selector").html() | 선택된 요소의 html 태그 포함 text 값 반환 (자손포함) |
| $("selector").html("값") | 선택된 요소에 html 태그 포함하여 text 값 설정 | |
| 💡 .addClass() | $("selector").addClass("클래스 속성") | 선택된 요소에 클래스 속성 추가 한꺼번에 여러 개의 속성값 설정 가능 |
| 💡 .removeClass() | $("selector").removeClass("클래스 속성") | 선택된 요소에 클래스 속성 제거 한꺼번에 여러 개의 속성값 제거 가능 |
| 💡 .toggleClass() | $("selector").toggleClass("클래스 속성") | 선택된 요소에 해당하는 class 속성이 존재하면 제거, 존재하지 않으면 설정 |
🍀 addClass removeClass toggleClass 를 사용하기 위해서 클래스 속성을 생성한다.
<style>
.important {
font-size: xx-large;
font-weight: bold;
}
.highlight {
color: blue;
}
</style>🍀 속성 method를 이용하여 클래스 속성 적용하기
<head>
<script>
$(document).ready(function () {
$("#large").on("click", function(){
$("p, h2").addClass("important highlight");
// p태그와 h2태그에 important와 highlight 클래스 속성 적용
})
$("#normal").on("click", function(){
$("p").removeClass("important highlight");
// p태그에 important와 highlight 클래스 속성 제거
})
$("#toggle").on("click", function(){
$("p").toggleClass("important highlight");
// p태그에 important와 highlight 클래스 속성 번갈아 가며 적용
})
});
</script>
</head>
<body>
<h2>Heading2</h2>
<p>이것은 중요한 내용이다.</p>
<button id="large">크게보기</button><br>
<button id="normal">보통</button><br>
<button id="toggle">toggle</button>
</body>
728x90
'Framework & Library > JQeury' 카테고리의 다른 글
| [JQuery] Utility method 유틸리티 메소드 (0) | 2023.07.14 |
|---|---|
| [JQuery] Mainipulation method (0) | 2023.07.14 |
| [JQuery] Traversing (0) | 2023.07.13 |
| [JQuery] 필터 선택자(Filter Selector) 종류 (0) | 2023.07.13 |
| [JQuery] 제이쿼리 기본 (0) | 2023.07.13 |
