JQuery

김주언·2022년 5월 25일

자바스크립트

목록 보기

7/8

JQuery?

:제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리
제이쿼리는 자바스크립트를 더욱 손쉽게 활용할 수 있게 해줍니다.
또한, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있다.

제이쿼리 로드

제이쿼리 파일을 다운받아 로드하는 방법
http://jquery.com/download

<head>

    <script src="/파일경로/제이쿼리파일명.js"></script>

</head>

CDN(Content Delivery Network)을 이용하여 로드하는 방법

CDN

1. jQuery.com CDN : <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

2. 구글 CDN       : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

3. MS CDN         : <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

4. CDNJS CDN      : <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

5. jsDelivr CDN   : <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>

<head>

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

</head>

제이쿼리 문법

기본 문법

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

document.querySelector("h1") -> $("h1") 이렇게 줄여준다!

요소 선택

CSS 선택자 이용하여 선택

$(function() {
    $("p").on("click", function() {        // <p>요소를 모두 선택함.
        $("span").css("fontSize", "28px"); // <span>요소를 모두 선택함.
    });
});
$(function() {
    $("p").on("click", function() {
        $("#jq").css("border", "2px solid orange"); // 아이디가 "jq"인 요소를 선택함.
    });
});

$(function() {
    $("p").on("click", function() {
        $(".jq").css("backgroundColor", "lightgray"); // 클래스가 "jq"인 요소를 모두 선택함.
    });
});

$(function() {
    $("button").on("click", function() { // <img>요소 중에서 alt 속성값이 "flower"인 요소를 모두 선택함.
        $("img[alt='flower']").attr("src", "/examples/images/img_monalisa.png");
    });
});

제이쿼리는 document.querySelectAll()처럼 모든 요소를 선택가능하다.

요소 필터링

제이쿼리에서는 선택한 요소 중에서 더욱 세분화된 선택을 하기 위한 필터링을 진행할 수 있다.
문서 내의 모든 <li>요소 중에서 <span>요소를 가지고 있는 요소만을 선택하기

$(function() {
    $("button").on("click", function() {
        $("li:has(span)").text("<span>요소를 가지고 있는 아이템이에요!");
    });
});

선택자

선택자	설명
:first	선택한 요소 중에서 첫 번째 요소를 선택함.
:last	선택한 요소 중에서 마지막 요소를 선택함.
:animated	선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택
:contains(텍스트)	선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택함.

input 요소 필터링


$(function() {

    $("button").on("click", function() {

        // 체크되어 있는 요소를 모두 선택함.

        $(":checked").next().text("체크되어 있는 요소는 이 요소입니다.");

    });

});

선택자	설명
:button	type 속성값이 "button"인 요소를 모두 선택함.
:checkbox	type 속성값이 "checkbox"인 요소를 모두 선택함.
:password	type 속성값이 "password"인 요소를 모두 선택함.
:submit	type 속성값이 "submit"인 요소를 모두 선택함.
:input	`<input>, <textarea>, <select>, <button>`요소를 모두 선택함.
:checked	type 속성값이 "checkbox" 또는 "radio"인 요소 중에서 체크되어 있는 요소를 모두 선택함.
:selected	`<option>`요소 중에서 선택된 요소를 모두 선택함.
:focus	현재 포커스가 가지고 있는 요소를 선택함.
:disabled	비활성화되어있는 요소를 모두 선택함.
:enabled	활성화되어있는 요소를 모두 선택함.

클래스 설정

.addClass() : 선택한 요소에 인수로 전달받은 클래스를 추가함.
.removeClass() : 선택한 요소에서 인수로 전달받은 클래스를 제거함.
.toggleClass() : 선택한 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 추가되어 있으면 제거함.
.hasClass() : 해당 요소가 특정 클래스에 포함되어 있는지 확인

Text 조작

$("h1").text("바꿀 내용")

이벤트 추가하기


$(function() {
    $("button").on({             // 모든 <button>요소에
        mouseenter: function() { // mouseenter 이벤트를 설정함.
            $("#text").append("마우스가 버튼 위로 진입했어요!<br>");
        },
        click: function() {      // click 이벤트를 설정함.
            $("#text").append("마우스가 버튼을 클릭했어요!<br>");
        },

        mouseleave: function() { // mouseleave 이벤트를 설정함.
            $("#text").append("마우스가 버튼 위에서 빠져나갔어요!<br>");
        }
    });
});