JQuery는 자바스크립트의 오픈 라이선스 라이브러리 중 하나다. 자바스크립트 기본 문법으로서 내장된 게 아니라 script로 소스를 연결해야 제이쿼리 문법을 사용할 수 있다.

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous">
</script>

📖 라이브러리?

개발자가 매번 코드를 작성할 필요가 없도록 자주 쓰는 함수, 객체 등의 자원을 모아놓은 묶음이다. 도서관의 수많은 서적이 주제별로 분류되었듯 쓰임에 따라 프로그래밍 언어에서 사용할 수 있는 다양한 라이브러리가 존재한다.

제이쿼리 장점

• 대부분 브라우저에서 지원
• 오픈 라이선스여서 누구나 자유롭게 이용 가능.
• 자바스크립트보다 더 짧은 코드로 구현해서 HTML DOM과 CSS 스타일 모두 간단하게 조작/적용할 수 있다.
  • ex. 자바스크립트의 document.get~~ / document.querySelector(s)를 $('선택자')로 축약.
• 애니메이션이나 대화형 처리도 간단하게 적용.

🔍 대화형 처리?

prompt처럼 사용자의 입력에 즉각적으로 결과를 출력할 때.

기본 문법

$('선택자').동작함수();

HTML 문서에 접근할 때 document부터 선택할 방식까지 골라야 하는 자바스크립트의 단점을 간편하게 만들었다. 그리고 해당 선택자에 바로 함수를 명령하기 때문에 바로 동작과 연결 지을 수 있고, 어디에 무엇을 할 것인지도 명확하게 보인다.

예시 HTML

• head

    <style>
        #container {
            display: flex;
        }
        .box {
            width: 100px;
            height: 200px;
        }

        .yellow {
            background-color: yellow;
        }

        .purple {
            background-color: purple;
        }

        .beige {
            background-color: beige;
        }

        .brown {
            background-color: brown;
        }
    </style>

• body

    <input id="input" type="text" name="name" value="your name" />
    <span id="greeting">Greeting</span>

    <hr />
	
	<div id="container">
        <div class="container box purple" ></div>
        <div class="container box beige" ></div>
        <div class="container box brown" ></div>
    </div>

    <button type="button" onclick="useAppend()">append</button>

메서드 동작을 손쉽게 확인하려면, 메서드마다 버튼을 만들어 onclick에 해당 메서드가 담긴 함수를 실행해 보아도 된다.

<button type="button" onclick="메서드 이름()">버튼 이름</button>

제이쿼리 메서드

선택자로 짚은 요소에 다음과 같은 동작을 부여할 수 있다.

값 가져오기 & 설정하기 .val()

function useVal() {
  // id=input인 태그 선택하여 그 input의 value를 가져옴
  const value = $("#input").val(); // 값을 가지고 올 땐 인자가 없다.
  // in JS => const value = document.getElementById("input").value;
  console.log(value);
	}

  // id=input인 태그 선택하여 그 input에 value를 등록
  $("#input").val("Write your name plz");
  // document.getElementById("input").value = '설정하고 싶은 값';
        }

style 변경하기 .css()

function useCss() {
  //id가 greeting인 요소의 폰트 사이즈를 30으로 변경
  $("#greeting").css("font-size", "30px");

  //선택자 요소를 변수로 지정하여 두 가지 속성 부여
  const span = $("#greeting");
  span.css("font-size", "30px");
  span.css("color", "blue");

  /* in JS
  * const greeting = document.getElementById("greeting");
  * greeting.style = "font-size: 30px; color: blue;"
  */ 
        }

속성 변경하기 .attr()

function useAttr () {
  $("#input").val("")
  $("#input").attr("placeholder", "이름을 입력하세요.");
  			//laceholder는 value가 없을 때 보이는 속성
  
  /* in JS
  * const input =
  * document.getElementById("input").setAttributes("placeholder")
  */
        }

text 변경하기 .text()

function useText () {
  // innerText와 같은 동작
  $("#greeting").text("hallooooooooooo");

HTML 변경하기 .html()

$('#greeting').html('Great to <b> see </b> you!');

형제/자식 요소 추가하기

1. 자식 요소 중 마지막에 추가 .append()

function useAppend() {
  $('#container').append
  //백틱으로 묶기
  (`<div class="yellow box"
		 style="background-color: yellow">
	</div>`);
        }

2. 자식 요소 중 첫번째로 추가 .prepend()

$('#container').prepend(`<div class="box yellow"</div>`)

3. 이전 형제로 추가 .before()

$("#container").before(`<div class="box yellow"></div>`);

4. 다음 형제로 추가 .after()

$("#container").after(`<div class="box yellow"></div>`);

DOM트리에서 요소 삭제하기

1. 조건에 만족하는 요소만 .remove()

$(".box.yellow").remove();
//yellow div 자식이 아무것도 없어서 empty는 불가

2. 선택한 요소의 자식 요소 모두 삭제 (선택자만 남는 상황) .empty()

$("#container").empty();

요소 탐색하기

1. 바로 위에 있는 부모 요소 1개 선택 .parent()

console.log($("parent", $(".box.yellow").parent()));
//배열+가장 가까운 상위요소

2. 모든 부모, 조상 선택 .parents()

console.log("parents", $("#container").parents());
//배열+모든 상위요소

3. 바로 다음에 위치한 형제 요소 선택 .next()

console.log("next", $(".box.yellow").next());

4. 바로 이전에 있는 형제 요소 선택 .prev()

console.log("prev",$(".box.yellow").prev());

5. 모든 자식 요소 선택.children()

console.log("children", $("#container").children());

클래스 조작하기

1. 클래스 추가 .addClass()

$('.box.yellow').addClass('red');

2. 클래스 삭제 .removeClass()

$('.box.yellow').removeClass('red');

3. 해당 클래스가 있는지 .hasClass()

$('.box.yellow').hasClass('yellow');

4. 클래스가 있으면 삭제하고 없으면 추가.toggleClass()

$('.box.yellow').toggleClass('yellow');

이 중에서 자주 사용하는 메서드

class 조작, prepend(), append(), remove()

---

생각들

• 실습하면서 클래스를 넣고 뺄 수 있는 기능이 유용하다고 느꼈다. 공통부분은 하나의 클래스에 지정하고, 바뀔 부분만 각자의 클래스를 지정해 두기.

  • html에 있는 요소에 css를 입히는 방향으로만 생각했는데, 자바스크립트가 들어서니 그 순서가 완전히 뒤바뀌는 기분이다.

• 제이쿼리는 바닐라 자바스크립트보다 훨씬 간단하게 표현할 수 있어서 그만큼 코드를 읽고 해석하기 쉬워서 좋은 것 같다.

• 하나하나의 의미를 이론적으로 들었을 땐 아하 그렇구나 싶다가도 막상 무언가를 구현할 땐 뭐가 필요한지 고르는 것부터가 어렵다.

  • 몸에 익으려면 많이 해봐야 한다는데 그러려면 🤔.. 정의를 정리하는 것도 좋지만, 실제로 적용할 수 있는 방법이 필요하다. 그래서 개인 프로젝트를 해보라는 말이 많나보다. 근데 적용할 만한 게 뭐가 있지..? 투두리스트 생각해봤는데 음 일단 고민 말고 시작을...... 해야 하는데 공부할 게 산더미인 느낌이라 겨를이 없다.
  • 나에게 맞는 공부방법을 이젠 나름 안다고 생각했는데.. 공부 방향 잡는 건 늘 고민스러운 것 같다. 딥다이브 책이 어렵긴 한데 읽히긴 하고, 근데 아주 세세한 책이라 지금 내 수준에선 직접적인 도움을 받을 정도는 아닌 것 같고.. 1회독을 하지 말고 훨씬 짧고 좀더 쉽다는 코어 자바스크립트를 구입하는 게 나을지도 모르겠다. 고 생각하면서 망설이는 건 21장까지 해온 게 아까워서 이러는듯.

• 결론 : 매몰비용을 잊자..