1. Selector(선택기)
선택기를 통해 특정 HTML요소를 선택하거나 조작 가능
HTML요소의 id, class, 타입, 특성, 특성의 값 등을 기준으로 선택기 사용 가능.
선택기 실행은 $(요소) 형태로 사용
2. ID 선택기
css와 마찬가지로 '#' 을 통해 요소를 선택함
// W3School Exam
// 버튼 누르면 2번 <p> 의 내용이 사라짐.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p>1번 p 태그.</p>
<p id="test">2번 p태그</p>
<p class="classtest">3번 p 태그.</p>
<button>Click me</button>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide(); // " # id "
});
});
버튼 클릭 전 -> 후
3. class 선택기
css와 마찬가지로 '.' 을 통해 선택
// W3School Exam
// 버튼 누르면 3번 <p> 의 내용이 사라짐.
<p>1번 p 태그.</p>
<p id="test">2번 p태그</p>
<p class="classtest">3번 p 태그.</p>
<button>Click me</button>
$(document).ready(function(){
$("button").click(function(){
$(".classtest").hide(); // " . Class Name "
});
});
4. 기타 선택 방법
우선 자주 쓰일 것 같은 선택 방법
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// 클래스 다중 선택
$(document).ready(function(){
$("#button1").click(function(){
$(".classtest1, .classtest2").hide();
});
});
// p 태그 모두 선택
$(document).ready(function(){
$("#button2").click(function(){
$("p").hide();
});
});
// h1과 p태그 선택
$(document).ready(function(){
$("#button3").click(function(){
$("h1,p").hide();
});
});
// 첫번째 p태그 선택
$(document).ready(function(){
$("#button4").click(function(){
$("p:first").hide();
});
});
// 모든 요소 선택
$(document).ready(function(){
$("#button5").click(function(){
$("*").hide();
});
});
// 모두 보여주기
$(document).ready(function(){
$("#button6").click(function(){
$("*").show();
});
});
</script>
</head>
<body>
<h1>h1 태그</h1>
<p>1번 p 태그.</p>
<p id="test">2번 p태그</p>
<p class="classtest1"> p 다중클래스1.</p>
<p class="classtest2"> p 다중클래스2.</p>
<button id="button1">다중 클래스</button>
<button id="button2">P태그 모두 숨기기</button>
<button id="button3">h1과 p모두 숨기기</button>
<button id="button4">첫 번째 p태그 숨기기</button>
<button id="button5">모든 요소 삭제</button>
<button id="button6">되돌리기</button>
</body>
</html>
'JAVASCRIPT > JQUERY' 카테고리의 다른 글
| slide (0) | 2022.08.28 |
|---|---|
| fadeIn - fadeOut (0) | 2022.08.28 |
| hide - show (0) | 2022.08.28 |
| Event (0) | 2022.08.28 |
| Selector (0) | 2022.08.28 |