2015. 4. 22. 10:15ㆍplming/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 |