/
/

jQuery 기초

avatar
전상욱
2025.04.10
·
11 min read

1. 제이쿼리(jQuery)

  • 제이쿼리(jQuery)

    제이쿼리(jQuery)란?

    모질라 사의 자바스크립트 개발자인 존 레식이 자바스크립트를 이용해 만든 라이브러리 언어

    제이쿼리jQuery를 통한 개선점

    • 호환성 문제 해결

    • 쉽고 편리한 애니메이션 효과 기능 구현

2. 선택자

  • 선택자

    선택자란?

    문서 객체 모델(DOM)을 통해 HTML 요소를 선택하여 가져와 쉽게 제어할 수 있다.

    사용법

    <script>
    $("#txt").css("color","red") // 이렇게 코딩하면 body태그가 생성되기 전에 선택자가 실행되어 오류가 난다.
</script>
    <script>
    $(document).ready(function(){
      $("#txt").css("color","red");
    });
</script>
    <script>
    $(function(){
        $("#txt").css("color","red");
    });
</script>

  • 기본형

    1. 선택한 요소에 지정한 스타일을 적용

      $("CSS 선택자").css("스타일 속성명","값");

    2. 선택한 요소에 지정한 속성을 적용

      $("CSS 선택자").attr("스타일 속성명","값");

3. 기본 선택자

3-1. 직접 선택자

직접 선택자란?

주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자입니다. 그리고 동시에 여러개 사용가능합니다.

  • 전체 선택자
    전체 요소(태그)를 선택할 때 사용합니다.

    기본형

    $("*")

  • 아이디 선택자
    아이디 속성에 지정한 값을 포함하는 요소(태그)를 선택합니다.

    기본형

    $("#아이디명")

  • 클래스 선택자
    클래스 속성에 지정한 값을 포함하는 요소(태그)를 선택합니다.

    기본형

    $(".클래스명")

  • 요소명 선택자
    지정한 요소(태그)명과 일시하는 요소를 모두 선택합니다.

    기본형

    $("요소명")

  • 종속 선택자
    선택한 요소(태그)의 id또는 class값이 일치하는 요소(태그)를 선택할 때 사용합니다.

    기본형

    $("요소명#id값")
$("요소명.class값")

3-2. 인접 관계 선택자

인접 관계 선택자란?

직접 선택자로 요소를 먼저 선택하고 그다음 선택한 요소와 가까이 있는 요소를 선택할 때 사용합니다.

  • 부모 요소 선택자
    선택한 요소(태그)를 감싸고 있는 부모 요소를 선택합니다.

    기본형

    $("요소 선택").parent();

  • 하위 요소 선택자
    기준 요소(태그)로 선택한 하위 요소(태그)만 선택합니다.

    기본형

    $("기준 선택 선택1 요소선택2")

  • 자식 요소 선택자
    선택된 요소(태그)를 기준으로 지정한 자식 요소(태그)만 선택합니다.

    기본형

    $("요소 선택 > 자식 요소 선택")
$("요소 선택").children("자식 요소 선택")
$("요소 선택").children() // 선택한 요소를 기준으로 모든 자식 요소를 선택

  • 형(이전) 요소 선택자
    선택한 요소(태그)를 기준으로 바로 이전 형제 요소(태그)만 선택합니다.

    기본형

    $("요소 선택").prev()

  • 동생(다음) 요소 선택자
    선택한 요소(태그)를 기준으로 바로 다음 형제 요소(태그)만 선택합니다.

    기본형

    $("요소 선택").next()
$("요소 선택1 + 요소 선택2")

  • 전체 형(이전) 요소 선택자
    선택한 요소(태그)를 기준으로 이전에 오는 전체 형제 요소(태그)를 선택합니다.

    기본형

    $("요소 선택").prevAll()

  • 전체 동생(다음) 요소 선택자
    선택한 요소(태그)를 기준으로 다음에 오는 전체 형제 요소(태그)를 선택합니다.

    기본형

    $("요소 선택").nextAll()

  • 전체 형제 요소 선택자
    선택한 요소(태그)의 모든 형제 요소(태그)를 선택합니다.

    기본형

    $("요소 선택").siblings()

  • 범위 제한 전체 형 요소 선택자
    선택한 요소(태그)를 기준으로 형제 요소(태그) 중 지정한 범위 내의 전체 형 요소(태그)를 선택합니다.

    기본형

    $("요소 선택").prevUntill("범위 제한 요소 선택")

  • 범위 제한 전체 동생 요소 선택자
    선택한 요소(태그)를 기준으로 형제 요소(태그) 중 지정한 범위 내의 전체 동생 요소(태그)를 선택합니다.

    기본형

    $("요소 선택").nextUntill("범위 제한 요소 선택")

  • 상위 요소 선택자
    선택한 요소(태그)를 기준으로 모든 상위 요소(태그)를 선택하거나 상위 요소(태그) 중 선택하고자 하는 요소(태그)만 선택할 때 사용합니다.

    기본형

    $("요소 선택").parents()
$("요소 선택").parents("요소 선택")

  • 가장 가까운 상위 요소 선택자
    선택한 요소(태그)를 기준으로 가장 가까운 상위 요소(태그)만 선택할 때 사용합니다.

    기본형

    $("요소 선택").closest("요소 선택")

4. 탐색 선택자

4-1. 위치 탐색 선택자

위치 탐색 선택자란?

배열 인덱스를 사용하여 특정 요소를 정확하게 탐색하여 선택할 때 사용합니다.

  • first 선택자
    선택된 요소 중 첫 번째 요소만 선택합니다.

    기본형

    $("요소 선택:first")
$("요소 선택").first()

  • last 선택자
    선택된 요소 중 마지막 요소만 선택합니다.

    기본형

    $("요소 선택:last")
$("요소 선택").last()

  • even 선택자
    선택한 요소 중 홀수 번째(짝수 인덱스) 요소만 선택합니다.

    기본형

    $("요소 선택:even")

  • odd 선택자
    선택한 요소 중 짝수 번째(홀수 인덱스) 요소만 선택합니다.

    기본형

    $("요소 선택:odd")

  • eq(index) 탐색 선택자
    선택한 요소 중 지정한 인덱스가 참조하는 요소만 선택합니다.

    기본형

    $("요소 선택:eq(index)")
$("요소 선택").eq(index)

  • lt(index) 탐색 연산자
    선택한 요소 중 지정한 인덱스 보다 작은 인덱스를 참조하는 요소만 선택합니다.

    기본형

    $("요소 선택:lt(index)")

  • gt(index) 탐색 연산자
    선택한 요소 중 지정한 인텍스보다 큰 인덱스를 참조하는 요소만 선택합니다,

    기본형

    $("요소 선택:gt(index)")

  • first-of-type 선택자
    선택한 요소의 무리 중 첫 번째 요소만 선택합니다

    기본형

    $("요소 선택:first-of-type")

  • last-of-type 선택자
    선택한 요소의 무리 중 마지막에 위치한 요소만 선택합니다.

    기본형

    $("요소 선택:last-of-type")

  • nth-child(숫자n) 선택자
    선택한 요소의 무리 중 지정한 숫자(배수)의 요소를 선택합니다.

    기본형

    $("요소 선택:nth-child(숫자)") // 지정한 숫자에 위치한 요소를 선택
$("요소 선택:nth-child(숫자n)") // 지정한 배수에 위치한 요소를 선택

  • nth-last-of-type 선택자
    선택한 요소의 무리 중 마지막에서 지정한 숫자의 요소를 선택합니다.

    기본형

    $("요소 선택:nth-last-child(숫자)") // 마지막 위치에서 지정한 숫자에 위치한 요소를 선택

  • only-child 선택자
    선택한 요소가 '부모 요소에게 하나뿐인 자식 요소'인 경우에 선택합니다.

- 컬렉션 아티클