. 집합을 순회하면서 전달된 반복자 함수를 엘리먼트마다 호출 : each(iterator)

  함수의 인자 n은 0 부터 시작하는 인덱스를 매개변수로 받는다.

  함수로 처리된 확장 집합을 return한다.

  $('img').each( function(n) {

      this.alt = '아이디가 ' + this.id + '인 image['+n+']이다.';

  } );

 

  var allAlts = new Array();

  $('img').each( function(n) {

      allAlts.push( this.alt );

  } );

 

 

. 일치하는 집합의 첫 번째 엘리먼트에서 명시된 어트리뷰트의 값을 얻는다. : attr(name)

  일치하는 집합이 없거나, 첫 번째 엘리먼트에 어트리뷰트가 없다면 undefined를 반환

  $("#myImage").attr("custom");

 

※ 프로퍼티를 사용하면 간단한데, 굳이 어트리뷰트를 다뤄야 하는 이유는?

    표준화된 프로퍼티 이름이 브라우저에 따라 다른 프로퍼티명을 사용하기 때문

 

. 어트리뷰트 값 설정 #1 : attr(name, value=String|Object|Function) 

  확장 집합의 모든 엘리먼트의 해당 어트리뷰트 이름의 값을 설정

  value가 함수일 경우, 확장 집합에 속한 엘리먼트마다 전달된 함수가 호출되며,

  함수의 반환값이 어트리뷰트 값으로 사용된다.

  함수가 호출되면, 확장 집합 엘리먼트의 0부터 시작하는 인덱스가 매개변수로 전달된다.

  $('*').attr('title', function(index) {

       return '나는 '+index+'번 엘리먼트이고 내 이름은 '+(this.id?this.id:'unset')+'이다.';

  } );

 

. 어트리뷰트 값 설정 #2 : attr(attributes)

  $('input').attr(

      { value: '', title: '값을 입력하세요.' }

  );

 

 

. 엘리먼트에서 명시된 어트리뷰 제거 : removeAttr(name)

  설정된 값이 default값으로 초기화된다.

 

 

$("a[href^=http://]".attr("target","_blank");

 

$("form").submit(function() {

   $(":submit",this).attr("disabled","disabled");

});

 

 

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

엘리먼트 콘텐츠 설정하기  (0) 2015.04.23
엘리먼트 스타일 변경하기  (0) 2015.04.23
프로퍼티와 어트리뷰트 조작하기  (0) 2015.04.23
확장 집합 다루기  (0) 2015.04.22
HTML 생성하기  (0) 2015.04.22
셀렉터 사용하기 #3 - jQuery 정의 셀렉터  (0) 2015.04.22

. 확장된 집합의 크기(개수) : length, size()

  $('#someDiv').html('페이지에는 총 '+$('a').size()+'개의 링크가 있다.');

 

. 확장된 집합에서 (하나 또는 모든) 엘리먼트 획득하기 : [0], get(0)

  $('img[alt]')[0] 또는

  $('img[alt]').get(0)

  var allLabeledButtons = $('label+button').get();

 

. 인덱스 확인 : index(element)

  발견되지 않으면 -1 return

  var n = $('img').index( $('img#findMe')[0] );

  * element 집합을 전달할 경우, 첫 번째 엘리먼트의 인덱스를 반환

 

 

. 확장 집합에 다른 엘리먼트 추가하기 : add(jQuery셀렉터|HTML코드|DOM엘리먼트[집합])

  $('img[alt],img[title]') ← alt나 title을 가진 모든 img

  $('img[alt]').add('img[title]')

 

  $('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough')

  alt 어트리뷰트를 가진 img 집합에 thickBorder 클래스를 적용하고

  여기에 title 어트리뷰트를 가진 img 집합을 추가한 후

  이들 전체에 seeThrough 클래스를 적용

 

 

. 확장 집합에서 셀렉터 표현식과 일치하는 엘리먼트 제거 : not(필터 표현식|엘리먼트[집합])

  $('img[title]').not('[title*=puppy]')

 

. 확장 집합에서 셀렉터 표현식과 일치하지 않 엘리먼트 제거 : filter(필터 표현식|필터 함수)

  필터 함수는 집합에 있는 모든 엘리먼트마다 호출된다.

  호출된 함수는 해당 시점의 엘리먼트를 함수 콘텍스트인 this로 이용한다.

  호출 결과로 false를 반환하는 엘리먼트가 모두 집합에서 제거된다.

  $('img').addClass('seeThrough').filter('[title*=dog]').addClass('thickBorder')

 

 

. 확장 집합에서 부분 집합 얻기 : slice(begin, end) ← 엘리먼트를 획득하는 get()과 다름

  begin : 부분 집합에 포함될 첫 엘리먼트의 위치. 0 부터 시작가능

  end : 부분 집합에 포함될 마지막 엘리먼트의 바로 다음 위치. 생략하면, 집합의 마지막까지 포함.

  $('*').slice(2,3);

  $('*').slice(0,4);

  $('*').slice(4);

 

 

* 관계를 통해 새로운 확장 집합을 얻을 수 있는 메서드 

 메서드

 설명

 children()

 확장 엘리먼트의 고유한 자식으로 구성된 확장 집합을 반환

 contents()

 확장 집합에서 엘리먼트의 콘텐츠로 구성된 확장 집합을 반환

 텍스트 노드도 포함되며, 주로 <iframe> 엘리먼트의 콘텐츠를 얻고자 사용

 next()

 확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환

 nextAll()

 확장 집합 내의 각 확장 엘리먼트 다음에 나오는 모든 형제로 구성된 확장 집합을 반환

 parent()

 확장 집합 내에 있는 모든 확장 엘리먼트의 바로 위 부모로 구성된 확장 집합을 반환

 parents()

 모든 확장 엘리먼트의 조상으로 구성된 확장 집합을 반환

 문서 루트(document root)는 포함되지 않는다.

 prev()

 확장 집합 내의 각 확장 엘리먼트 바로 이전에 나오는 형제로 구성된 확장 집합을 반환

 prevAll()

 확장 집합 내의 각 확장 엘리먼트 이전에 나오는 모든 형제로 구성된 확장 집합을 반환

 siblings()

 확장 엘리먼트의 모든 형제를 포함하는 확장 집합을 반환

 ※ contents를 제외한 모든 메서드가 필터링할 용도로 쓸 문자열 매개변수를 받아들인다.

 

 

. 확장 집합에서 표현식과 일치하는 새로운 확장 집합 반환 : find(selector)

  확장 집합에 포함된 엘리먼트의 자손 엘리먼트도 표현식과 일치하는지 평가된다?

  변수.find('p cite');

  $('p cite',변수);

 

. 확장 집합에 표현식과 일치하는 엘리먼트가 있는지 확인 : is(selector)

  하나라도 일치하면 true, 아니면 false

  var hasImage = $('*').is('img');

 

 

. 확장 집합을 복사하여 새로운 확장 집합 생성 : clone()

  $('img').clone().appendTo('#somewhere');

 

. 이전 확장 집합으로 돌아가기 : end()

  $('img').clone().appendTo('#somewhere').end().addClass('beenCloned');

 

. 이전 확장 집합 2개를 하나로 합치기 : andSelf()

 

 

$("<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