🧀 [UIUX] 0206 JQUERY Coding, 제이쿼리 1일차

✏️ 2025. 02월 06일 / jQuery 1일차

🥚 제이쿼리
제이쿼리는 자바스크립트를 기반으로 만들어진 라이브러리 언어 입니다.
라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합입니다.
-
제이쿼리는 기존 자바스크립트가 가지고 있던 브라우저 호환성 문제를 해결한 언어로
특히 문서 객체 호환성을 높인 언어 입니다.
그리고 제이쿼리를 이용하면 편리하게 애니메이션을 구현할 수 있어 개발자 사이에서 굉장히 인기있던 언어였습니다.
-
제이쿼리는 문서 작성에 앞서 먼저 제이쿼리 파일을 연결해야 사용이 가능합니다.
제이쿼리 파일은https://cdnjs.com/libraries/jquery/1.12.4 사이트에서 압축 파일을 다운받아 쓰거나,
cdn 방식으로 연결하여 사용합니다.
만약 옛날 버전의 라이브러리를 연동했다면 호환성을 위해 호환성 파일인
https://cdnjs.com/libraries/jquery-migrate 미그레이트 파일을 함께 연결해주는 것이 좋습니다.

      파일 연결 순서 
      --------------------------------------------------------------
      1. 제이쿼리 파일 연결
      2. 미그레이트 파일 연결 (선택사항, 호환성이 우려될 경우)
      3. 내가 사용할 js 파일을 연결

🍳 제이쿼리의 기본 구조
제이쿼리는 html처럼 기본구조가 정해져 있습니다.
기본 구조를 쓴 후에 안에 사용할 코드들을 작성해야 합니다.
제이쿼리의 기본형을 쓸 때 제일먼저 $를 씁니다.
$는 곧 제이쿼리를 의미하며 $ 뒤에는 ()가 붙습니다.
()는 함수(함수의 호출문)를 의미하고,
$()는 '제이쿼리 함수'라는 의미 입니다.

      [기본형]
      1.
      $(function(){
        제이쿼리 코드;
      });
      ----------------------------------
      2.
      $(document).ready(function(){
        제이쿼리 코드;
      });

🍙 제이쿼리의 선택자
제이쿼리에서 태그를 불러올 때 자바스크립트처럼
querySelector나 getElementBy~가 필요하지 않습니다.
css에서 사용하던 선택자를 그대로 사용하고, 아래에 있는 문법을 이용하여 불러옵니다.

      [기본형]
      $('클래스명 또는 아이디명 또는 태그명')

🍛 제이쿼리 자주 쓰는 문법

      1. 선택한 요소의 지정한 스타일을 적용합니다.
      $('선택자').css("css속성", "값");
      2. 선택한 요소의 속성을 바꿉니다.
        해당 속성이 없을 경우에는 속성을 추가해줍니다.
      $('선택자').attr("속성명","값")

🍽️ 메서드를 여러 개 연결하는 체이닝 기법
하나의 태그에 여러 메서드를 연결하고자 할 때
아래와 같은 방식을 사용할 수 있습니다.
태그를 불러와서 여러 메서드를 뒤에 줄줄이 붙여서 쓰는 방식입니다.
이 방식을 마치 체인이 연결된 것과 비슷하다고 하여 체이닝 기법이라고 부릅니다.

      [기본형]
      $('요소').css("속성","값").attr("속성","값")

🔎 부모 요소 선택자
선택한 요소를 감싸고 있는 부모 요소를 뜻합니다.

      [기본형]
      $("요소").parent()

🔎 하위 요소 선택자
하위 요소 선택자는 선택한 부모 요소를 기준으로 안쪽에 있는 하위 요소를 선택할 때 사용합니다.
css 후손 문법과 동일합니다.

      [기본형]
      $("부모요소 자식요소")

🔎 자식요소 선택자
자식요소 선택자는 부모요소의 자손요소를 선택할 때 사용합니다.
css 문법과 동일하게 사용하거나 메서드를 이용할 수 있습니다.

      [기본형]
      1. $("부모요소 > 자손요소")
      2. $("부모요소").children("자손요소")
      : 1번 2번은 선택한 요소를 기준으로 지정한 자식 요소만 불러옵니다.
      --------------------------------------------------------------
      3. $("부모요소").children()
      : 선택한 요소를 기준으로 모든 자식 요소들을 불러올 때 사용합니다.

🔎 css를 한 번에 여러개 적용하는 css 메서드 문법
css를 한 번에 적용하려면 css 메서드 안에 객체를 넣어 사용할 수 있습니다.
만약 css 속성들을 변수에 넣고 싶다면, 자바스크립트 문법 그대로 변수를 생성하여
객체를 참조시키고 css 메서드에 변수를 전달할 수도 있습니다.

      [기본형]
      1.
      $("요소 선택").css({
        속성 : 값,
        속성 : 값,
      })
      -----------------------------------
      2.
      let 변수 = {
        속성 : 값,
        속성 : 값,
      }
      $("요소 선택").css(변수)

🔎 형(prev) / 동생(next) 요소 선택자
형 요소 선택자는 선택한 요소를 기준으로 바로 위에 있는 형 태그 하나를 선택하고,
동생 요소 선택자는 선택한 요소를 기준으로 바로 아래에 있는 동생 태그 하나를 선택합니다.

      [기본형]
      1. $("요소").prev(); -> 요소 윗줄의 형 요소를 선택
      2. $("요소").next(); -> 요소 아랫줄의 동생 요소를 선택
      2. $("형 + 동생"); -> css 동위 선택자 문법

🔎 전체 형(prev) / 동생(next)요소 선택자
전체 형 요소 선택자는 선택한 요소를 기준으로 윗쪽의 모든 형 요소를 선택하고,
전체 동생 요소 선택자는 선택한 요소를 기준으로 모든 동생 요소를 선택합니다.

      [기본형]
      $("요소선택").prevAll()
      $("요소선택").nextAll()

🔎 전체 형제 요소 선택자
전체 형제 요소 선택자는 선택한 요소의 모든 형, 동생 요소를 선택합니다.

      [기본형]
      $("요소").siblings();

🔎 범위 제한 형/동생 요소 선택자
범위 제한 형/동생 요소 선택자는 선택한 요소를 기준으로
지정한 범위 내의 전체 형 요소를 선택하거나 전체 동생 요소를 선택합니다.

      [기본형]
      $("요소").prevUntil("형요소")
      : 기준 요소부터 형 요소 사이의 형 요소들을 선택합니다.
      -----------------------------------------------
      $("요소").nextUntil("동생요소")
      : 기준 요소부터 동생 요소 사이의 동생 요소들을 선택합니다.

🔎 상위 요소 선택자
상위 요소 선택자는 선택한 요소를 기준으로 모든 상위 요소를 선택하거나
상위 요소 중 특정 요소를 선택하고 싶을 때 사용합니다.

      [기본형]
      $('자식요소').parents();
      : 선택한 요소를 기준으로 상위 요소를 모두 선택합니다.
      ------------------------------------------------
      $('자식요소').parents('부모요소');
      : 선택한 요소를 기준으로 특정 상위 요소를 선택합니다.

🔎 가장 가까운 상위 요소 선택자
선택한 요소를 기준으로 가장 가까운 상위 요소를 선택할 때 사용합니다.
()를 비워두면 .parent와 동일한 효과를 가지고,
()안에 부모 선택자가 들어있으면 .parents와 동일한 효과를 가집니다.

      [기본형]
      $('자식요소').closest('요소 선택');

🔎 탐색 선택자
탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한번 더 선택하여
좀 더 정확하게 태그를 선택할 수 있습니다.
대표적인 탐색 선택자에는 배열의 인데스 번호를 사용해 선택하는 '위치 탐색 선택자'와
배열에 담겨진 요소 중에 지정된 속성과 값을 선택하는 '속성 탐색 선택자'가 있습니다.
⭐ 위치 탐색 선택자
기본 선택자로 선택한 요소는 배열에 담깁니다.
이때 배열의 인덱스를 사용하면 특정 요소를 더 정확하게 선택할 수 있습니다.

      [선택자 종류]
      1. $('요소 선택:first') 또는 $('요소 선택').first()
      : 선택된 요소 중 첫 번째 요소를 선택합니다.
      -
      2. $('요소 선택:last') 또는 $('요소 선택').last()
      : 선택된 요소 중 마지막 요소를 선택합니다.
      -
      3. $('요소 선택:odd'), $('요소 선택:even')
      : odd는 선택한 요소 중 짝수번째에 위치한 요소만 선택하고,
        even은 선택한 요소 중 홀수번째에 위치한 요소만 선택합니다.
      -
      4. $('요소 선택:first-of-type'), $('요소 선택:last-of-type')
      : 부모 태그 안의 형제 관계가 서로 다른 태그일 경우 
        이 중 첫번째나 마지막 위치의 태그를 선택합니다.
      -
      5. $('요소 선택:nth-of-type(숫자)') 또는 $('요소 선택:nth-child(숫자)')
      : 선택한 요소의 형제 중 특정 위치의 형제 요소를 선택할 때 사용합니다.
      -
      6. $('요소 선택:only-child')
      : 부모 요소 내의 자식 요소가 한 개뿐인 자식요소를 선택할 때 사용합니다.
      -
      7. ⭐ $('요소 선택:eq(index)') 또는 $('요소 선택').eq(index)
      : 선택한 요소 중 특정 인덱스 번호를 참조하는 요소를 선택합니다.
      -
      8. $('요소 선택:gt(index)'), $('요소 선택:lt(index)')
      : gt()는 요소 중 해당 인덱스 보다 큰 인덱스 번호를 참조하는 요소들을 선택,
        lt()는 요소 중 해당 인덱스 보다 작은 인덱스 번호를 참조하는 요소들을 선택합니다.
      -
      9. $('요소 선택').silce(index)
      : 선택한 요소 중 인덱스 번호부터 마지막 인덱스 번호까지 모든 요소를 잘라옵니다.
        만약 범위를 지정하고 싶다면 .silce(index, index) 형태를 사용합니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)