- 자바스크립트 단순화 라이브러리
- 특징
- 빠르고, 작고, 기능이 많은 JavaScript라이브러리
- HTML문서 조작, 이벤트 처리, 애니메이션, Ajax와 같은 것들을 간편하게 사용하게 함
- 업계에서는 표준에 가까운 점유율을 가지고 있음
- 라이브러리
- 자주 사용되는 함수, 기능들을 재활용 가능하도록 만든 묶음
- javascript는 다양한 라이브러리를 보유 : jQuery, React, Moment, lodash 등
- jQuery는 javascript 프로그래밍 시에 도움이 되는 여러 함수들을 제공
$("#continue").text("NextStep...")
vs
document.getElementById("continue").innerHTML ="Nextstep..."
- $ : Jquery라는 것을 정의
- (selector) : 질의하거나 찾을 html요소
- action() : 이 요소가 수행할 기능
Click함수
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<button id="alert">Alert!</p>
<script src="./0512-example.js"></script>
</body>
$("#alert").click(function() {
alert("Button Clicked!")
});
<body>
<button id="alert">Alert!</p>
<button id="button2">Click me!</p>
<script src="./0512-example.js"></script>
</body>
$("#alert").click(function() {
alert("Button Clicked!");
});
$("#button2").click(function() {
$("#alert").click();
});
- html 태그의 내용을 가져온다.
- html태그의 내용을 변경한다.
<body>
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
<script>
alert($("div.demo-container").html());
</script>
</body>
<body>
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
<button id="btn">Click me!</p>
<script>
$("#btn").click(function() {
$("div.demo-container").html("<div>Button Clicked!</div>");
});
</script>
</body>
text 함수
- html 태그의 텍스트 내용을 가져온다.
- html태그의 텍스트 내용을 변경한다.
<script>
$("#btn").click(function() {
alert($("div.demo-box").text());
});
</script>
<body>
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
<button id="btn">Click me!</p>
<script>
$("#btn").click(function() {
$("div.demo-box").remove();
});
</script>
</body>
결과 :
<div class="demo-container"></div>
empty함수
<script>
$("#btn").click(function() {
$("div.demo-box").empty();
});
</script>
결과:
<div class="demo-container"><div class="demo-box"></div></div>
<script>
$("#btn").click(function() {
$("div.demo-box").append("<p>Append Sample</p>");
});
</script>
- addClass : 선택한 태그에 class를 추가한다
- removeClass : 선택한 태그에서 class를 제거한다.
- hasClass : 선택한 태그가 해당 class를 가지고 있는지 확인한다.
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
.red { color: red; }
.yellow { color: yellow; }
</style>
</head>
<body>
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
<button id="red_btn">Red</p>
<button id="yellow_btn">Yellow</p>
<script>
$("#red_btn").click(function() {
$("div.demo-box").removeClass("yellow");
$("div.demo-box").addClass("red");
});
$("#yellow_btn").click(function() {
$("div.demo-box").removeClass("red");
$("div.demo-box").addClass("yellow");
});
</script>
</body>
<body>
<input type="text" id="inputBox">
<select id="selectBox">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<script>
$("#inputBox").val("Hi hi");
$("#selectBox").val(3);
</script>
</body>