jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

https://developers.google.com/speed/libraries?hl=ko#jquery
스크립트 태그 위에 </body>위에 대입.

jQuery의 기능

$ = document.querySelector()

간략화 가능 이외에도 여러 기능들을 $로 간략화할수있다.

VisualStudioCode

.big-title {
    font-size: 10rem;
    color: yellow;
    font-family: cursive;
}

$("h1").addClass("big-title margin-50");

개발자 도구

console 창
$("h1").hasClass("margin-50"); // margin-50이 있는지 확인
$("h1").addClass("big-title margin-50") // margin-50을 추가
$("h1").removeClass("margin-50") // margin-50을 제거

innerHTML = $

.html = innerHTML

$("h1").text("Bye");
$("h1").html("<em>Don't Click Me</em>");

jQuery = HTML

<img>tag
$("img").attr("src"); = <img src="./Drum.png" alt = "">

  <a>tag
  $("a").attr("href"."https://www.google.com"); = <a href="https://www.google.com"></a>

<class>tag
<h1 class="big-title margin-50">Hello<h1>

  console 창
  $("h1").attr("class")
	="big-title margin-50"

jQuery = eventListener

click

$("button").click(function() {
 $("h1").css("color", "purple") 
});

=

for (var i = 0; i<5; i++) {
    document.querySelectorAll("button")[i].addEventListener("click", function(){
        document.querySelector("h1").style.color = "purple";
    });
}

keypress

$(document).keypress(function(event){
    $("h1").text(event.key)
// h1의 글자를 타이핑에 따라 변화

.on Methods

.on("addEventListener","callback함수")
on Methods를 통해 모든 메소드를 첫번째 매개변수("addEventListenr")에
넣으면 된다.(ex. mouseover, keypress, click 등등..)

example

$("h1").on("mouseover", function(){
  $("h1").css("color", "purple")
});

Adding and Removing Elements with jQuery

before <> after

console

$("h1").before("<button>New</button>");

$("h1").after("<button>New</button>");

prepend <> append

console

$("h1").prepend("<button>New</button>");

$("h1").append("<button>New</button>");

remove

$("button").remove // 모든 버튼 삭제

website Animation with jQuery

hide <> show

$("button").on("click", function(){
  $("h1").hide(); //"h1"이 "button"을 누를때 사라짐
  $("h1").show(); //"h1"이 "button"을 누를때 나타남

toggle

$("button").on("click", function(){
  $("h1").toggle(); // "h1"이 "button"을 누를때마다 hide , show 을 함

fadeOut <> fadeIn

$("button").on("click", function(){
  $("h1").fadeOut(); // "h1"이 "button"을 누를때 서서히 사라짐
  $("h1").fadeIn();

fadeToggle

$("button").on("click", function(){
  $("h1").fadeToggle(); // "h1"이 "button"을 누를때마다 fadeout , fadein을 함

slideDown <> slideUp

$("button").on("click", function(){
  $("h1").slideDown(); // "h1"이 "button"을 누를때 서서히 내려감
  $("h1").slideUp();	 // "h1"이 "button"을 누를때 서서히 올라감

slideToggle

$("button").on("click", function(){
  $("h1").slideToggle(); // "h1"이 "button"을 누를때마다 fslideDown , slideUp을 함

animate

$("button").on("click", function(){
  $("h1").animate({opacity: 0.5}) //animate 괄호안에는 숫자 값이 있는 CSS규칙을 사용

chain

$("button").on("click", function(){
  $("h1").slideDown().slideUp().animate({opacity: 0.5}) //연속적으로 사용

Reference

jQuery의 관한 문서
https://api.jquery.com/