jQuery
jQuery(기초문법)_2024-07-24
앵보몬
2024. 7. 24. 13:28
728x90
반응형
q제이쿼리 문법
제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있습니다.
제이쿼리의 기본 문법은 다음과 같습니다.
문법
$(선택자).동작함수();달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다.
선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다.
$() 함수
$() 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할을 합니다.
$() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있습니다.
이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체(jQuery object)라고 합니다.
제이쿼리는 이렇게 생성된 제이쿼리 객체의 메소드를 사용하여 여러 동작을 설정할 수 있습니다.
Document 객체의 ready() 메소드
자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 합니다.
보통은 별다른 문제가 발생하지 않지만, 다음과 같은 경우에는 오류가 발생합니다.
- 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우
- 아직 로드되지 않은 이미지의 크기를 얻으려고 할 경우
다음 예제는 아직 생성되지 않은 HTML 요소에 속성을 추가하는 예제입니다.
예제
function func() {
addAttribute(); // 아이디가 "para"인 HTML 요소에 속성을 추가함.
createElement(); // 아이디가 "para"인 HTML 요소를 생성함.
}
function createElement() {
var criteriaNode = document.getElementById("text");
var newNode = document.createElement("p") newNode.innerHTML = "새로운 단락입니다.";
newNode.setAttribute("id", "para");
document.body.insertBefore(newNode, criteriaNode);
}
function addAttribute() {
document.getElementById("para").setAttribute("style", "color: red");
}위의 예제에서 addAttribute() 함수는 아이디가 "para"인 HTML 요소에 새로운 속성을 추가하는 함수입니다.
또한, createElement() 함수는 아이디가 "para"인 HTML 요소를 생성하여 추가해 주는 함수입니다.
위의 예제에서는 아이디가 "para"인 HTML 요소가 생성되기 전에 해당 요소에 속성을 추가해 주는 addAttribute() 함수가 호출되므로, Uncaught TypeError가 발생하여 실행중이던 스크립트는 중지될 것입니다.
만약 먼저 호출되는 addAttribute() 함수를 createElement() 함수 뒤에 호출하면, 정상적으로 동작할 것입니다.
웹 브라우저에서는 현재 HTML 문서에서 발생한 오류를 F12 버튼으로 확인할 수 있습니다.
HTML 요소의 생성과 속성의 추가에 대한 더 자세한 사항은 자바스크립트 노드의 관리 수업에서 확인할 수 있습니다.
그래서 자바스크립트에서는 Window 객체의 onload() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정합니다.
문법
window.onload = function() {
자바스크립트 코드;
};마찬가지로 제이쿼리에서는 Document 객체의 ready() 메소드를 이용하여 같은 결과를 보장하고 있습니다.
문법
$(document).ready(function() {
제이쿼리 코드;
});또한, jQuery Team에서는 같은 결과를 보장하는 더욱 짧은 문법을 다음과 같이 제공하고 있습니다.
문법
$(function() {
제이쿼리 코드;
});다음 예제는 문서가 모두 로드되는 시점과 창이 모두 로드되는 시점의 차이를 보여주는 예제입니다.
예제
$(document).ready( function() {
$("#doc").text("문서가 전부 로드됐어요!");
});
$(window).load( function() {
$("#win").text("창이 모두 로드됐어요!");
});https://www.tcpschool.com/jquery/jq_basic_syntax
jquery_3.7.1.js
0.28MB
test3.html
0.00MB
test4.html
0.00MB
test5.html
0.00MB
test6.html
0.00MB
test7.html
0.00MB
test8.html
0.00MB
test3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>기본 선택자</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<header id="header">
<div class="logo">로고</div>
<div class="util">회원가입</div>
<nav id="gnb">
<ul>
<li>메뉴1
<ul>
<li>메뉴1_1</li>
</ul>
</li>
</ul>
</nav>
<div id="visual">
<p>비주얼</p>
</div>
<div id="content">
<div class="left">왼쪽</div>
<div class="right">
<div class="util">오른쪽</div>
</div>
</div>
<div id="banner">배너</div>
<footer id="footer">푸터</footer>
</header>
<script>
$(document).ready(function(){
$("p").css("border", "3px solid red");
$("#gnb").css("border", "3px solid orange");
$(".logo").css("background", "yellow");
$("#gnb > ul > li").css("border", "3px solid green");
$("#gnb > ul > li > ul > li").css("color", "blue");
$("#gnb > ul").css("border", "3px soild blue");
$("#visual + #content").css("border", "5px solid red");
$("#visual ~ #footer").css("border", "10px solid blue");
$("div.util").css("border","10px solid pink");
$(".left,.right,#banner").css("border", "10px solid gray");
$("*").css('color', "pink").css('font-size', '30px');
});
</script>
</body>
</html>
test4.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<ul class="list1">
<li class="list_1">내용1_1</li>
<li class="list_2">내용1_2</li>
<li class="list_3">내용1_3</li>
</ul>
<ul class="list2">
<li class="list bg">내용2_1</li>
<li class="list_1">내용2_2</li>
<li class="list_2">내용2_3</li>
</ul>
<ul class="list3">
<li class="list">내용3_1</li>
<li class="list-1">내용3_2</li>
<li class="list-bg">내용3_3</li>
</ul>
<ul class="list4">
<li class="list-1">내용4_1</li>
<li class="list">내용4_2</li>
<li class="list bg">내용4_3</li>
</ul>
<script>
$(document).ready(function(){
$(".list1 > li[class = 'list_1']").css("border", "2px solid red");
$(".list1 > li[class != 'list_1']").css("border", "3px solid green");
$(".list2 > li[class *= 'list']").css("border", "5px solid green");
$(".list4 > li[class $= 'bg']").css("background", "purple");
$(".list3 > li[class |= 'list']").css("border", "8px solid red");
$(".list4 > li[class ^= 'list']").css("border", "2px solid navy");
});
</script>
</body>
</html>
test5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>제이쿼리 연습 하기</p>
<p id ="click">클릭 해주세요</p>
<p id ="doubleclick">클릭 해주세요</p>
<p id ="p1">마우스를 mouseenter</p>
<p id ="p2">마우스를 mouseleave</p>
<p id ="p3">마우스를 mousedown</p>
<p id ="p4">버튼을 클릭하면 숨기기/보이기</p>
<p id ="p5">토글버튼 (숨기기/보이기)한방에</p>
<br><br>
<button id="hide">숨기기</button>
<button id="show">보이기</button>
<button id="toggle">토글버튼</button>
<script>
$(document).ready(function(){
$("#click").click(function(){
$(this).hide();
});
$("#doubleclick").click(function(){
$(this).hide();
});
// $("#p1").mouseenter(function(){
// alert("마우스 mouseenter 작동")
// });
// $("#p2").mouseleave(function(){
// alert("마우스 mouseleave 떠남")
// });
$("#p3").mousedown(function(){
alert("mouse down over p3");
});
$("#hide").click(function(){
$("#p4").hide(1000);
});
$("#show").click(function(){
$("#p4").show();
});
$("#toggle").click(function(){
$("#p5").toggle(1000);
});
});
</script>
</body>
</html>
test6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>제이쿼리 효과 fadeIn</p>
<button type="button" class="button1">fadeIn()</button><br><br>
<button type="button" class="button2">fadeOut()</button><br><br>
<button type="button" class="button3">fadeToggle()</button><br><br>
<div id="div1" style="width: 80px;height: 80px;display: none;background-color: red;"></div><br>
<div id="div2" style="width: 80px;height: 80px;display: none;background-color: red;"></div><br>
<div id="div3" style="width: 80px;height: 80px;display: none;background-color: red;"></div>
<script>
$(document).ready(function(){
$(".button1").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$(".button2").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
$(".button3").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</body>
</html>
test7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<style>
#id1, #id2{
padding: 5px;
text-align: center;
background-color: goldenrod;
border: solid 1px grey;
};
#id2{
padding: 50px;
display: none;
};
</style>
</head>
<body>
<div id="id1" class="div1">클릭 slide panel</div>
<div id="id2" class="div2">hello world</div>
<script>
$(document).ready(function(){
$("#id1").click(function(){
$('#id2').slideDown("slow");
});
$("#id1").click(function(){
$('#id2').slideUp("slow");
});
$("#id1").click(function(){
$('#id2').slideToggle("slow");
});
});
</script>
</body>
</html>
test8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<nav>
<ul>
<li>
<a href="#">Menu 1</a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<!-- 더 많은 메뉴 항목 추가 가능 -->
</ul>
</nav>
<script>
$(document).ready(function(){
$('nav > ul > li > a').click(function(){
$(this).toggleClass('active');
// $(this).next('.dropdown-menu').slideToggle();
$(this).next('.dropdown-menu').fadeToggle(1500);
});
});
</script>
</body>
</html>
728x90
반응형