$("<div>hi</div>")

$("div>") ← $("<div></div>") 나 $("<div/>") 와 동일하다.

 

 

$("<div class='foo'>I have foo!</div><div>I don 't</div>")
   .filter(".foo").click( function() { alert("I'm foo!"); } ).end()

   .appendTo("#someParentDiv");

 

- <div> 엘리먼트를 2개 생성하고

   첫 번째 <div> 엘리먼트에는 foo 클래스가 있고, 다른 하나에는 없다.

   생성한 다음

   foo 클래스를 가진 <div>엘리먼트를 클릭하면, 경고 메시지를 띄우는 이벤트 핸들러를 바인딩한다.

   end() 메서드를 이용해 필터링 이전의 두 <div> 엘리먼트를 지닌 집합으로 돌아간 뒤,

   ID가 someParentDiv인 엘리먼트에 덧붙인다.

 

* <script> 블록을 생성한다고 해서

  바로 로드된다고 보장할 수 없다.

 

 

CSS셀렉터로는 표현할 수 없는 특성있는 엘리먼트를 선택할 필요가 있다.

:radio:checked

:checkbox:checked

 

* jQuery 정의 필터 셀렉터

 

 셀렉터

 설명

 :animated

 현재 애니메이션이 적용되고 있는 엘리먼트를 선택

 :button

 모든 버튼을 선택

 input[type=submit], input[type=reset], input[type=button], button

 :checkbox

 체크박스 엘리먼트만 선택.  input[type=checkbox]

 :checked

 선택된 체크박스나 라디오 버튼만을 선택.

 :contains(foo)

 텍스트 foo를 포함하는 엘리먼트만 선택

 :disabled

 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택

 :enabled

 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택

 :file

 모든 파일 엘리먼트를 선택.  input[type=file]

 :header

 헤더 엘리먼트만 선택.  <h1>~<h6>

 :hidden  감춰진 엘리먼트만 선택
 :image

 폼 이미지를 선택.  input[type=image]

 :input  입력 엘리먼트만 선택.  input, select, textarea, button
 :not(filter)  필터의 값을 반대로 변경
 :parent

 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택

 :password

 패스워드 엘리먼트만 선택.  input[type=password]

 :radio

 라디오 버튼 엘리먼트만 선택.  input[type=radio]

 :reset

 리셋 버튼을 선택.  input[type=reset]이나 button[type=reset]

 :selected  선택된 엘리먼트만 선택

 :submit

 전송 버튼을 선택.  button[type=submit]이나 input[type=submit]

 :text

 텍스트 엘리먼트만 선택.  input[type=text]

 :visible  보이는(visible) 엘리먼트만 선택

 

 

input:not(:checkbox)

필터 셀렉터는 기준을 추가해서 일치하는 엘리먼트의 집합을 줄여나간다.

찾기 셀렉터는 이미 선택된 엘리먼트와 맺은 관계를 통해 다른 엘리먼트를 찾는다.

= 자손 셀렉터(공백문자), 자식 셀렉터(>), 형제 셀렉터(+)

 

:not은 필터 셀렉터에는 적용

찾기 셀렉터에는 적용하지 못한다.

div p:not(:hidden) : O

div :not(p:hidden) : X

 

필터 셀렉터는 콜론문자(:)나 대괄호문자([)로 시작하는 형식으로 만들어 식별한다.

 

 

* 위치 기반 셀렉터 : DOM에서 위치를 기반으로 엘리먼트를 선택

 셀렉터

 설명 

 :first

 페이지에서 처음으로 일치하는 엘리먼트

 li a:first는 리스트 아이템의 첫 번째 링크를 반환

 :last

 페이지에서 마지막으로 일치하는 엘리먼트

 li a:last는 리스트 아이템의 마지막 링크를 반환

 :first-child

 첫 번째 자식 엘리먼트

 li:first-child는 각 리시트의 첫 번째 아이템을 반환

 :last-child

 마지막 자식 엘리먼트

 li:last-child는 각 리스트의 마지막 아이템을 반환

 :only-child

 형제가 없는 모든 엘리먼트를 반환

 :nth-child(n)

 n번째 자식 엘리먼트

 li:nth-child(2)는 각 리스트의 두 번째 리스트 아이템을 반환

 :nth-child(even|odd)

 짝수 또는 홀수 자식 엘리먼트

 li:nth-child(even)은 각 목록의 짝수 번째 자식 엘리먼트를 반환

 :nth-child(Xn+Y)

 전달된 공식에 따른 n번째 자식 엘리먼트

 Y는 0인 경우 생략 가능

 li:nth-child(3n)은 3의 배수 번째 아이템을 반환

 li:nth-child(5n+1)은 5의 배수+1번째 아이템을 반환

 :even / :odd

 페이지 전체의 짝수/홀수 번째 엘리먼트

 li:even은 모든 짝수 번째 아이템을 반환

 :eq(n)

 n번째로 일치하는 엘리먼트

 :gt(n)

 n번째 엘리먼트(포함되지 않음)이후의 엘리먼트와 일치

 :lt(n)

 n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치

 

. 인덱스가 0 부터 시작되지만, n번째 자식 셀렉터는 1부터 시작

  CSS와 호환성을 유지하려고

 

table#languages tbody td:first-child 또는

table#languages tbody td:nth-child(1)

 

:eq는 인덱스 0 부터 시작하고

:nth-child는 인덱스 1부터 시작

 

 

. 자식 셀렉터 : 부모와 자식 엘리먼트는 오른쪽 부등호(>)로 구분한다.

  p > a

 

 

. 어트리뷰트 셀렉터 : 엘리먼트의 어트리뷰트의 값을 구분하여 찾는다.

  a[href^=http://]

  a 엘리먼트중 [] 안에 어트리뷰트 명과 값과 어떤 조건으로 찾을 것인지를 기술한다.

  ^는 값의 시작 부분이 일치함을 의미한다.

  웬지 정규식 스럽다.

 

. 값에 상관없이 특정 어트리뷰트를 가지는 경우는

  a[href]

 

. 어트리뷰트의 특정 값과 일치시키려면

  input[type=text]

 

. 끝 값이 일치하는

  a[href$=.pdf]

 

. 임의의 문자열을 포함하는

  a[href*=jquery.com]

 

 

. 컨테이너 셀렉터 : 엘리먼트를 포함하고 있는 엘리먼트를 찾는다.

  li:has(a)

  <a>엘리먼트를 포함하는 모든 <li>엘리먼트

  li a 처럼 <li>엘리먼트에 포함된 모든 <a>엘리먼트와는 Return되는 엘리먼트 집합이 다르다.

  쟈는 li, 야는 a

 

. 중첩은 한 단계만 허용된다.

  foo:not( bar:has(baz) ) : O

  foo:not (bar:has( baz:eq(2) ) ) : X

 

 

* jQuery가 지원하는 기본 CSS 셀렉터

 셀렉터

 설명

 *

 모든 엘리먼트와 일치

 E

 태그명이 E인 모든 엘리먼트와 일치

 E F

 E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치

 E > F

 E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치

 E + F

 E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치

 E ~ F

 E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치

 E:has(F)

 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치

 E.C

 클래스명 C를 가지는 모든 엘리먼트 E와 일치.

 E의 생략은 *.C와 동일

 E#I

 ID가 I인 엘리먼트 E와 일치.

 E의 생략은 *#I와 동일

 E[A]

 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

 E[A=V]

 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

 E[A^=V]  값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
 E[A$=V]  값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
 E[A*=V]

 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

 

 


프로그래밍 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

 

 

http://jquery.com/download/

 

현재 IE 6/7/8을 지원하지 않는 1.11.2 버전과

2.1.3 버전이 존재한다.

 

http://ko.wikipedia.org/wiki/JQuery

 

jQuery(제이쿼리)는 브라우저 호환성이 있는 HTML자바스크립트 라이브러리이며 클라이언트 사이드 스크립트 언어를 단순화 할 수 있도록 설계되었다. 존 레식2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.

jQuery는 MIT 라이선스GNU 일반 공중 사용 허가서v2의 듀얼 라이선스를 가진 자유 오픈 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.

마이크로소프트노키아는 자사 플랫폼에 jQuery를 포함하는 계획을 발표한 바 있다. 마이크로소프트비주얼스튜디오의 ASP.NET AJAX 프레임워크와 ASP.NET MVC 프레임워크에 적용했고, 노키아는 자사의 런타임 위젯 개발 플랫폼에 통합하였다. 또한, jQuery는 미디어위키에도 1.6 버전부터 사용되고 있다.

 

기능

jQuery는 다음과 같은 기능을 갖고 있다:

  • DOM 요소 선택 기능. 이는 멀티브라우저 오픈 소스 셀렉터 엔진인 시즐(Sizzle)을 이용한 것으로, 시즐은 jQuery 프로젝트의 파생 프로젝트이다.[1]
  • DOM 탐색 및 수정 (CSS 1-3 지원)
  • CSS 셀렉터에 기반한 DOM 조작. 노드 요소 및 노드 속성(아이디 및 클래스)을 셀렉터 생성을 위한 기준으로 사용.
  • 이벤트
  • 특수효과 및 애니메이션
  • AJAX
  • JSON 파싱
  • 플러그인을 통한 확장성
  • 유틸리티
  • 호환성 메소드 (inArray(), each() 함수 등)
  • 멀티브라우저 지원 (크로스브라우저와는 다름)

브라우저 지원

jQuery 1.x와 2.x는 모두 최신 안정화 버전 및 그 이후 버전의 파이어폭스, 구글 크롬, 사파리, 그리고 오페라를 지원한다. 1.x 버전은 인터넷 익스플로러 6 및 그 이후 버전을 지원한다. 그러나 2.x 버전에서는 인터넷 익스플로러 6-8 버전이 지원되지 않으며 인터넷 익스플로러 9 또는 그 이후 버전을 지원한다.[2]

사용법

jQuery는 한 개의 JavaScript 파일로 존재한다. 공통의 DOM, 이벤트, 특수 효과, Ajax 함수를 포함한다. 다음 코드를 쓰면, 웹 페이지로 포함시킬 수 있다:

<script type="text/javascript" src="path/to/jQuery.js"></script>

jQuery는 두 가지의 상호 작용 스타일을 갖고 있다:

  • $ 함수 이용. jQuery 오브젝트의 팩토리 메소드이다. 이 함수들은 "chainable"하다: 각각은 jQuery 오브젝트를 반환한다.
  • $. -가 앞에 붙은 함수 이용. 이들 함수는 jQuery 오브젝트 그 자체와 연동되지는 않는다.

일반적으로 여러 개의 DOM 노드들을 조작하는 웍플로우는 $ 함수로 시작된다. CSS 셀렉터 스트링을 가지고 호출된다. 결과적으로 0개 혹은 그 이상의 HTML 페이지 내의 엘리먼트를 리퍼런스하는 jQuery 오브젝트가 반환된다. 이 노드 집합들은 jQuery 오브젝트에 대해 인스턴스 메소드들을 적용함으로써 조작될 수 있다. 혹은 노드들 그 자체가 조작될 수 있다. 예를 들면 다음과 같다:

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

div 태그가 달린 모든 엘리먼트를 찾되, 클래스 애트리뷰트가 test인 것을 찾는다. p 태그를 찾되, 클래스 애트리뷰트가 quote인 것을 찾는다. 찾아낸 각각의 엘리먼트에 대해 클래스 애트리뷰트 blue를 추가한다. 그 뒤 애니메이션 효과를 주어 아래쪽으로 슬라이드(미끄러지게) 시킨다. $add 함수는, 찾아낸(matched) 집합(set)에 영향을 준다. addClassslideDown는 리퍼런스된 노드들에 영향을 준다.

$.가 앞에 붙은 함수들은, 글로벌 프로퍼티나 비해이비어에 영향을 주는, 간편한(유틸리티) 메소드들이다. 예를 들면 다음과 같다:

$.each([1,2,3], function() {
  document.write(this + 1);
});

234 를 도큐먼트에 출력한다.

Ajax 루틴들은 $.ajax 및 관련 코드를 이용하여 수행할 수 있다. 이를 사용하여, 원격 데이터(remote data)를 로드하거나 조작할 수 있다.

$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

… 파라미터 name=John&location=Boston을 주면서 some.php에 요청을 보낸다.요청이 성공적으로 수행되었으면, 그 응답이 alert()된다.

 

 

+ Recent posts