( 공부복습 ) 기본형식 + 기본선택자
1. 기본형식
jQuery는 기본적으로 $(document).ready()로 시작합니다.
ready는 jQuery 이벤트로 앞에서 학습한 자바스크립트의 load 이벤트와 유사한 기능을 가지고 있습니다
이부분에 관련된 자세한 내용은 [ 윈도우 관련 이벤트 ] 부분에서 설명하도록 하겠습니다.
---------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본형식</title>
<script>
< 첫번째 방법 >
$(document).ready(function() {
실행문;
});
< 두번째 방법 - $(document).ready( )를 짧게 표현할 수 도 있으며,
두 개의 구문 중 편한 것으로 사용하면 됩니다.>
$(function() {
실행문;
});
</script>
</head>
<body>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------
2. jQuery 선택자
jQuery는 html 요소와 관련된 기능구현이 많아 그만큼 css와 매우 밀접한 관계가 있으며
이런 이유 때문에 앞으로 학습할 주제별 실습에서도 css를 포함한 예제로 구성!
▶ 기본선택자
| 선택자 종류 | 설명 | |
| 태그선택자 | $("p") | p요소를 선택 |
| id 선택자 | $("#gnb") | #gnb 요소를 선택 |
| class 선택자 | $(".logo") | .logo인 요소를 선택 |
| 자식(자손) 선택자 | $("#gnd > ul > li") | #gnd의 자식요소의 자식요소 li를 선택 |
| 하위(후손) 선택자 | $("gnd ul") | #gnd의 하위에 있는 모든 ul요소를 선택 |
| 인접 선택자 | $("#vis + #con") | #vis 다음에 오는 #con 요소를 선택 |
| 형제 선택자 | $("#vis ~ #foo") | #vis의 형제 요소 #foo를 선택 |
| 종속 선택자 | $("div.uti") | div 요소 중 class가 uit인 요소를 선택 |
| 그룹 선택자 | $(".left, .right, #ban") | .left, .right, .ban 요소들을 선택 |
| 전체 선택자 | $("*") | 모든 요소를 선택 |
---------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자</title>
<style>
* {
margin: 5px;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("p").css("border", "4px solid red");
$("#gnb").css("border", "4px solid orange");
$(".logo").css("border", "4px solid yellow");
$("#gnb > ul >li").css("border", "4px solid green");
$("#gnb ul").css("border", "4px solid blue");
$("#vis + #con").css("border", "4px solid navy");
$("#vis ~ #foo").css("border", "4px solid purple");
$("div.uti").css("border", "4px solid pink");
$(".left, .right, #ban").css("border", "4px solid gray");
});
</script>
</head>
<body>
<header id="header">
<div class="logo">로고</div>
<div class="uti">회원가입</div>
<nav id="gnb">
<ul>
<li>
메뉴1
<ul>
메뉴1_1
</ul>
</li>
</ul>
</nav>
<div id="vis">
<p>비주얼</p>
</div>
<div id="con">
<div class="left">왼쪽</div>
<div class="right">
<div class="uti">오른쪽</div>
</div>
</div>
<div id="ban">배너</div>
<div id="foo">푸터</div>
</header>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------