jQuery

jQuery

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

  - 어떤 옵션이 있는지는 document를 참고할 수 있다. > https://api.jqueryui.com/droppable/

 

선택자

  - 선택한 요소들을 변수에 저장하여 사용한다.

$(function() {
    var items = $("li"); // <li>요소를 모두 선택하여 변수 items에 저장
    $("button").on("click", function() {
        $("#len").text("<li>의 총 개수는 " + items.length + "개");
    });
});

//필터링
$(function() {
    $("button").on("click", function() {
        $("li:has(span)").text("<span>요소를 가지는 아이템");
    });
});

//체크된 요소 선택
$(function() {
    $("button").on("click", function() {
        $(":checked").next().text("체크되어 있는 요소");
    });
});

 

getter와 setter

 - 요소에 접근해 요소의 값을 읽거나 설정한다.

• getter

        - getter는 아무런 인수를 전달하지 않고 호출한다

        - 선택된 요소에 접근해 값을 읽어오는 메소드

• setter

       - setter는 대입하고자 하는 값을 인수로 전달하여 호출

       - 선택된 요소에 접근해 값을 설정하기 위한 메소드

$(function() {
    $("button").on("click", function() {
       var newText = $("h1").html();
       $("#text").html(newText);
    });
});

  - var newText = $("h1").html(); 은 <h1>의 텍스트를 읽어오는 getter 메소드

  - $("#text").html(newText); 는 id가 "text"인 요소에 새로운 텍스트를 설정하는 setter 메소드

 

 

메소드 체이닝(method chaining)

  - 반환된 제이쿼리 객체를 이용해 세미콜론을 사용하지 않고 다른 제이쿼리 메소드를 호출

  -  여러 개의 메소드가 연속으로 호출되는 것

$(function() {
    $("button").on("click", function() {
        $("#list")      
           .find("li") 
           .eq(1).html("두 번째 아이템 선택")  
           .end()      
           .eq(2).html("세 번째 아이템 선택");
    });
});

  - .find(), .eq(), .html() 사용

  - id가 "list"인 요소의 자손 중 <li>요소를 모두 선택한 후, 그 중 두 번째 요소의 값을 설정함

  - 또 id가 "list"인 요소의 자손 요소 중에서 <li>요소를 모두 선택한 후, 그 중 세 번째 요소의 값을 설정함