[jQuery] 기초

Hyun·2022년 1월 14일
0

jQuery

목록 보기
1/1
post-thumbnail

1. jQuery란?

클라이언트 측 페이지 제작을 손쉽게 만들어주는 자바크스크립트 라이브러리이다

  • 여러 브라우저에서 동작하는 사용하기 쉬운 API를 통해 HTML 문서 탐색과 조작
  • 이벤트 처리, 애니메이션, Ajax 등을 훨씬 더 간단하게 만들어 줌.
  • 함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다.

jQuery를 먼저 배우는 목적

  • jQuery를 사용하지 않으면, 전혀 실무적인 코드가 아닌 재미없는 예제로 구성됨
  • 자바스크립트로 코드를 짜게 되면 코드량만 늘어나 특정 기능이나 문법을 배우는데 힘듦
  • 가장 큰 이유는 바로 웹 프로그래밍에서 jQuery는 거의 표준 라이브러리

2. jQuery를 사용하는 이유

<div>
        <ul class="menu" id="menu1">
            <li>김밥</li>
            <li>비빔밥</li>
            <li>제육덥밥</li>
            <li>오징어덮밥</li>
            <li>돌솥밥</li>
        </ul>
        <ul class="menu" id="menu2">
            <li>육개장</li>
            <li>감자탕</li>
            <li>오리탕</li>
            <li>닭백숙</li>
            <li>추어탕</li>
        </ul>
    </div>  

[HTML코드]
스크립트를 이용해 문서에서 #menu2(id선택자)의 <li>태그 글자색을 모두 빨간색으로  변경하고 싶다면?

        window.onload = function() {
            //먼저 아이디 선택자가 menu2를 찾는다.
            let menu2 = document.getElementById("menu2");
            //ul태그(menu2선택자) 하위 요소인 li태그를 배열로
            let liArrays = menu2.getElementsByTagName("li");
            //li태그를 하나씩 접근해서 일일히 글자색을 변경
            for(let i=0; i<liArrays.length; i++){
                let li = liArrays[i];
                li.style.color = "blue";
            }
        }

[자바스크립트 코드]

$(document).ready(function(){
  $("#menu2 li").css("color", "#f00");    
})

[jQuery코드]

자바스크립트의 경우는 getElenmentId, getElementByTagName으로 변수 지정하며 for문을 돌려 코드가길지만, jQuery는 2줄에 같은 의미를 전달한다.

3. jQuery 사용법

jQuery를 이용한 노드(=웹 요소 = html태그들) 찾기
let $변수 이름 = $(“CSS 선택자”) ➡️ 가장 기초적인 노드 찾는 방법

$()의 정체
- $()를 jQuery라고 생각하지만, 사실 $()은 그냥 함수를 호출하는 것.
- 함수 이름이 $()인 함수를 호출하는 것.
-  $()함수의 역할은 선택자에 해당하는 노드를 찾아주는 역할을 함.

선택자
- 말 그대로 CSS의 선택자를 의미한다.
- 찾고 싶은 선택자를 만들어 $()함수에 매개변수 값으로 넣어주면 된다.

let $변수 이름
- $()함수에서 리턴해주는 값을 저장하기 위해서 만든 변수일 뿐이다.앞에 $를 붙이 이유는 jQuery기능이 들어있는 변수를 표현하기 위함.

4. jQuery와 CSS와의 관계

CSS의 선택자 기능으로 jQuery의 기능 연관성이 높다.

  • CSS의 선택자 기능만 알고 있으면 jQuery기능은 어느정도 사용할 수 있다.

    [선택자 사용 예]
    1)div태그 선택
    2)class가 select인 태그 선택
    3)div태그 하위에있는 ul태그 선택
    4)id가 menu2인 태그 하위에 모든 li태그 선택

5. jQuery핵심 기능

이벤트(event)등록
$("대상").on(“이벤트 이름“, ”이벤트리스너“);  또는 $("대상").단축이벤트함수(이벤트리스너);

스타일 설정하기
$("대상").css(“스타일 이름“, 값);

profile
FrontEnd Developer (with 구글신)

0개의 댓글