jQuery

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화 시킨 오픈 소스 기반의 자바스크립트 라이브러리

jQuery 추세

현재 jQuery는 가상 DOM 기술(Vue.js, React)에 밀리고 있다. 가상 DOM은 실제 DOM의 버퍼라고 보면 되는데 DOM을 직접적으로 조작하는 jQuery에 비해서 렌더링 속도가 빠르다. jQuery에 트렌드에 밀려서 사라질거라고 생각했는데 jQuery 개발문서를 보면 앞으로도 직접 DOM을 조작하는 방식은 바꾸지 않을 것이며 계속해서 경량화, 호환성, 보안성등을 개선해 나간다고 한다.

참고사이트

코딩교육 티씨피스쿨

특징

제이쿼리는 CSS 선택자와 비표준 선택자를 통해서 Element를 선택하고 선택된 Element를 메소드 체이닝 기술과 jQuery에서 제공하는 함수를 통해서 쉽게 조작할 수 있다.

• 요소의 선택, 요소의 탐색 → 요소의 조작
• 요소의 조작
  • 속성
  • 스타일
  • 이벤트
  • 이펙트
• 통신
• 유틸리티

문법

• 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다.
• 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다.

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

문서 로딩 완료

    $(document).ready(function() {

        제이쿼리 코드;

    });

    $(function() {

        제이쿼리 코드;

    });

    $(document).ready( function() {

        $("#doc").text("문서가 전부 로드됐어요!");

    });

    $(window).load( function() {

        $("#win").text("창이 모두 로드됐어요!");

    });

필터 선택자

CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지도 사용할 수 있습니다.

    /*

        :eq(n)    선택한 요소 중에서 인덱스가 n인 요소를 선택함.
        :gt(n)    선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택함.
        :lt(n)    선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택함.
        :even    선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택함.
        :odd    선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택함.
        :first    선택한 요소 중에서 첫 번째 요소를 선택함.
        :last    선택한 요소 중에서 마지막 요소를 선택함.
        :animated    선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택함.
        :header    선택한 요소 중에서 h1부터 h6까지의 요소를 모두 선택함.
        :lang(언어)    선택한 요소 중에서 지정한 언어의 요소를 모두 선택함.
        :not(선택자)    선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택함.
        :root    선택한 요소 중에서 최상위 루트 요소를 선택함.
        :target    선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택함.
        :contains(텍스트)    선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택함.
        :has(선택자)    선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택함.
        :empty    선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택함.
        :parent    선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함.
    */

    $(function() {

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

            $("li:has(span)").text("<span>요소를 가지고 있는 아이템이에요!");

        });

    });

메소드 체이닝

세미콜론(;)을 사용하지 않고도, 곧바로 다른 제이쿼리 메소드를 호출할 수 있습니다.

이런 방식으로 여러 개의 메소드가 연속으로 호출되는 것을 메소드 체이닝(method chaining)이라고 합니다.

    $(function() {

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

            // id가 "list"인 요소의 자손 요소 중에서 <li>요소를 모두 선택한 후에,

            // 그 중에서 두 번째 요소의 값을 설정함.

            $("#list").find("li").eq(1).html("두 번째 아이템을 선택했어요!!");

        });

    });

속성과 프로퍼티의 차이점

속성은 HTML안에서 가지고 있는 이름과 값의 한쌍이고 이것이 DOM으로 변하면 프로퍼티가 된다.

이벤트

    $(function() {

        // 모든 <button>요소에 mouseenter와 mouseleave 이벤트를 설정함.

        $("button").on("mouseenter mouseleave", function() {

            $("#text").append("마우스가 버튼 위로 진입하거나 빠져나갔어요!<br>");

        });

    });

이펙트

이펙트의 경우 CSS조절을 통해서 애니메이션 효과를 나타낸다.

1. 사용자 정의 이펙트

    $(선택자).animate(프로퍼티[,지속시간][,시간당속도함수][,콜백함수]);

    $(function() {

        $("#animateBtn").on("click", function() {

            $("#divBox").animate(    // id가 "divBox"인 요소를

                {

                    left: "+=100",   // 오른쪽으로 100픽셀 이동하고,

                    opacity: 0.2     // 투명도를 0.2로 변경함.

                }, 500, function() { // 0.5초에 걸쳐서 이펙트 효과가 진행됨.

                    $("#text").html("사용자 정의 이펙트가 실행됐어요!");

                }

           );

        });

    });

jQuery Ajax

Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 합니다.
그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)입니다.

    $.ajax({

        url: "/examples/media/request_ajax.php", // 클라이언트가 요청을 보낼 서버의 URL 주소

        data: { name: "홍길동" },                // HTTP 요청과 함께 서버로 보낼 데이터

        type: "GET",                             // HTTP 요청 방식(GET, POST)

        dataType: "json"                         // 서버에서 보내줄 데이터의 타입

    })

    // HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.

    .done(function(json) {

        $("<h1>").text(json.title).appendTo("body");

        $("<div class=\"content\">").html(json.html).appendTo("body");

    })

    // HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.

    .fail(function(xhr, status, errorThrown) {

        $("#text").html("오류가 발생했습니다.<br>")

        .append("오류명: " + errorThrown + "<br>")

        .append("상태: " + status);

    })

    // HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.

    .always(function(xhr, status) {

        $("#text").html("요청이 완료되었습니다!");

    });

유틸리티

    $.contains()    //DOM 요소가 다른 DOM 요소의 자손(descendant) 요소인지 아닌지를 검사함.
    $.unique()    //DOM 요소 배열을 정렬하고, 중복된 요소를 제거함.
    $.each() //객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수(iterator function)임.
    $.data() //선택한 요소와 관련된 데이터를 저장하거나, 저장된 데이터값을 읽어옴.
    $.removeData() //저장된 데이터를 제거함.
    $.queue() //선택한 요소의 실행될 함수 큐(queue)를 참조하거나 조작함.
    $.dequeue()    //선택한 요소의 함수 큐에서 다음 함수를 실행함.
    $.extend()    //두 개 이상의 객체의 콘텐츠를 하나의 객체로 병합함.
    $.noop()    /빈 함수를 의미함.
    $.proxy()    //함수를 전달받은 후, 특정 콘텍스트(context)를 가지는 새로운 함수를 반환함.
    $.now()    //현재 시각을 나타내는 숫자를 반환함.
    $.trim()    //문자열의 시작과 끝에 위치한 공백 문자(whitespace)를 제거함.

그외

clone(true, true)

$(".element").clone(); // DOM만 복사
$(".element").clone(true, true); // Event까지 복사