프로그래밍 jQuery 증보판 (jQuery in Action)

2015. 4. 22. 10:15plming/jQuery

 


프로그래밍 JQUERY

저자
베어 바이볼트, 예후다 카츠 지음
출판사
인사이트 | 2008-09-05 출간
카테고리
컴퓨터/IT
책소개
jQuery를 이용한 웹 프로그래밍 활용서! 『프로그래밍 jQ...
가격비교

 

. jQuery : 자바스크립트 이름공간(namespace)에 jQuery와 $라는 이름 두 개만을 새로 추가했을 뿐이다.
           몇몇 예외사항을 제외하고 CSS3(문법)를 완벽하게 준수 → CSS 셀렉터라고도 하는 이유
           jQuery() 함수로 다음과 같은 일을 할 수 있다.
           - 어떤 동작을 수행하려고 DOM 엘리먼트를 선택하고 확장하기
           - 전역 유틸리티 함수의 이름공간 제공하기
           - HTML 마크업으로 DOM 엘리먼트 만들기
           - DOM을 조작할 준비가 되었을 때 실행할 코드 지정하기

 

. HTML문서에서 스타일 정보를 분리하는 것과 마찬가지로 동작을 분리하는 잇점을 제공.

 

. 셀렉터(selector) : 페이지에 있는 대상 엘리먼트를 식별하는 데 사용하는 표현식
                     엘리먼트를 어트리뷰트나 HTML문서 안에서의 위치를 기반으로 간결하게 표현한다.

 

 

. 사용법 : $(selector)→유틸리티함수 또는 jQuery(selector)
           $()는 jQuery()함수의 별칭으로 셀렉터와 일치하는 DOM엘리먼트 배열을 가진 '특별한' 자바스크립트 객체를 반환한다.
           $()는 작업 대상 엘리먼트를 선택하기 위해서 사용한다.

 

. 사용예
  - <p> 엘리먼트에 포함된 모든 링크(<a> 엘리먼트)의 그룹을 참조
    $("p a")
  - CSS클래스 notLongForThisWorld를 가진 <div> 엘리먼트를 fadeout(점차적으로 사라지는 효과) 시키는
    $("div.notLongForThisWorld").fadeOut();
  - CSS클래스 notLongForThisWorld를 가진 <div> 엘리먼트를 fadeout(점차적으로 사라지는 효과) 시키고
    새로운 CSS클래스 removed를 추가
    $("div.notLongForThisWorld").fadeOut().addClass("removed");

 

 

. 첫 번째 셀렉터를 써서 일치된 모든 엘리먼트에 적용하므로 엘리먼트의 배열을 수회할 필요는 없다.

 

  - ID someElement는 한 페이지에서 고유해야 하므로, 한 엘리먼트만 일치한다.
    특정 ID에 해당하는 엘리먼트를 찾을 때, #을 사용
    $("#someElement").html("엘리먼트에 텍스트를 추가한다."); 또는
    $("#someElement")[0].innerHtml = "엘리먼트에 텍스트를 추가한다.";

 

  - 특정 Class를 가지는 모든 엘리먼트를 선택한다.
    .특정Class
    a#특정ID.특정Class : ID가 특정ID이고, 특정Class를 클래스로 가지는 링크
    p a.특정Class : <p>엘리먼트 내에 선언된 특정Class를 클래스로 가지는 링크

 

  - 모든 짝수번째 <p> 엘리먼트를 선택한다.
    $("p:even");
  - 모든 테이블에서 첫째 행을 선택한다.
    $("th:nth-child(1)");
  - <body>의 바로 아래 자식인 <div>엘리먼트를 선택한다.
    $("body > div");
  - PDF 파일의 링크를 선택한다.
    $("a[href$=pdf]");
  - <body>의 바로 아래 자식이면서, 링크를 포함하는 <div>엘리먼트를 선택한다.
    $("body > div:has(a)");
    * 부모와 자식 엘리먼트는 오른쪽 부등호(>)로 구분

 

 

. 유틸리티 함수는 단지 jQuery나 $별칭을 이름공간(namespace)로만 사용한다.
  - $.trim(someString);
  - jQuery.trim(soimeString);

. $()에 함수를 전달하면, 브라우저는 DOM이 모두 로드될 때까지 코드 실행을 기다린다.
  $( function() {
     $("table tr:nth-child(even)").addClass("even");
  } );

 

 

. $()에 HTML 마크업을 포함하는 문자열을 전달하여, DOM엘리먼트를 바로 만들 수 있다.
  $("<p>Hello!</p>")
  - 생성한 엘리먼트를 특정엘리먼트 뒤에 추가하고자 할 때
    $("<p>Hello!</p>").insertAfter("#특정");
  - 생성한 엘리먼트를 특정엘리먼트 앞에 추가하고자 할 때
    $("<p>Hello!</p>").insertBefore("#특정");

 

 

jQueryInAction-SRC.zip

 

 

'plming > jQuery' 카테고리의 다른 글

HTML 생성하기  (0) 2015.04.22
셀렉터 사용하기 #3 - jQuery 정의 셀렉터  (0) 2015.04.22
셀렉터 사용하기 #2 - 위치 기반 셀렉터  (0) 2015.04.22
셀렉터 사용하기 #1 - CSS셀렉터  (0) 2015.04.22
jQuery  (0) 2015.04.22