jQuery 참조 실례 1.0 jQuery에 대한 철학

jQuery Cookbook(O'Reilly 2009) 1.0 The jQuery Philosophy
jQuery의 철학은'더 적은 코드를 쓰고 더 많은 일을 한다'는 것이다. 이 철학은 세 가지 개념으로 나눌 수 있다.

CSS 선택기로 요소를 찾고 jQuery 방법으로 이 요소를 조작합니다

원소 집합에서 여러 jQuery 방법을 체인으로 호출

jQuery 봉인 및 스텔스 반복

이 세 가지 개념을 충분히 이해하는 것은 jQuery 코드를 작성하는 데 매우 중요하다.이 세 가지 개념을 자세히 살펴보자.
요소 찾기 및 작업
더 정확히 말하면 DOM 트리에서 요소 세트를 배치한 다음 작업을 수행합니다.예를 들어 아래의 이 예: 먼저 사용자에게 원소를 숨긴 다음에 이 숨겨진 원소에 새로운 텍스트를 삽입한 다음에 그 속성을 바꾸고 마지막으로 이 원소를 다시 표시합니다.적절한 jQuery 코드는 다음과 같습니다.

 <span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/JavaScript"</span><span class="pln">
  </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"</span><span class="tag">>


 
old content
 
  //        div  
  jQuery('div').hide();
  //    div      
  jQuery('div').text('new content');
  //    div       updatedContent class  
  jQuery('div').addClass("updatedContent");
  //        div  
  jQuery('div').show();
 

이 네 개의 jQuery 문구를 하나씩 살펴보겠습니다.

페이지의 모든div 요소를 숨기고 보이지 않게 하기

숨겨진div 요소의 원래 텍스트를 새 텍스트 ('new content') 로 바꾸기

div 요소에 새로운class 속성 값 추가하기(updatedContent)

페이지에div 요소를 다시 표시

위의 예는 jQuery 함수를 사용하여 HTML 페이지의 모든 요소를 찾은 다음 jQuery 방법으로 그것을 조작합니다 (hide (),text (),addClass (),show ().
체인 호출
jQuery 방법을 호출할 때 jQuery의 디자인에 따라 이러한 방법을 체인식으로 호출할 수 있다.예를 들어 원소 검색을 한 번만 하고 찾은 원소에 일련의 조작을 펼친다.이전 코드 예제에서는 JavaScript 명령문을 체인 호출로 다시 쓸 수 있습니다.
다음 코드는 체인 호출을 사용하여 사용할 수 있습니다.

//        div  
jQuery('div').hide();
//    div      
jQuery('div').text('new content');
//    div       updatedContent class  
jQuery('div').addClass("updatedContent");
//        div  
jQuery('div').show();

다음으로 다시 쓰기:

jQuery('div').hide().text('new content').addClass("updatedContent").show();

코드 들여쓰기를 더하면:

jQuery('div')
 .hide()
 .text('new content')
 .addClass("updatedContent")
 .show();

간단하게 말하면, 체인 호출은 현재 선택한 요소 집합에 무한한 jQuery 방법을 연결해서 사용할 수 있습니다.실질적으로 jQuery 방법으로 처리된 요소는 방법이 처리된 후에 되돌아오기 때문에 체인 호출은 계속될 수 있다.jQuery의 플러그인도 이렇게 설계되었습니다. (봉인된 요소 집합을 되돌려줍니다.) 따라서 플러그인을 사용하면 체인 호출에 영향을 주지 않습니다.
체인 호출의 또 다른 장점은 DOM 요소를 한 번만 선택함으로써 비용을 절약하는 것이다.DOM 트리를 옮겨다니는 것을 피하는 것은 웹 페이지의 성능 향상에 매우 중요하기 때문에 가능한 한 선택한 DOM 요소 집합을 다시 사용하거나 캐시해야 한다.
jQuery 패키지
대부분의 경우, 만약 jQuery를 사용한다면, 반드시 'jQuery 봉인' 이라는 물건과 접촉할 것이다.다시 말하면, jQuery로 HTML 페이지에서 선택한 요소는 jQuery에서 제공하는 기능으로 봉인됩니다.나는 개인적으로 이 물건을'봉인 원소 집합'이라고 부른다. 왜냐하면 이것은 jQuery 기능을 봉한 원소 집합이기 때문이다.이 봉인 원소 집합은 어떤 때는 DOM 원소를 포함하고, 어떤 때는 여러 개를 포함하며, 어떤 때는 심지어 그 안에 아무것도 없다.봉인된 요소 집합이 비어 있을 때, 그 위에서 호출된 jQuery 방법/속성은 어떠한 오류도 던지지 않습니다. 이렇게 하면 불필요한if 문장을 피할 수 있습니다.
아니면 위의 HTML 코드를 예로 들면 웹 페이지에 여러 요소가 존재할 때 어떻게 됩니까?다음 예에서는 HTML 페이지에 3개의 요소가 추가되었습니다.

 <span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/JavaScript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://ajax.googleapis.com/ajax/libs/
  jquery/1.3.0/jquery.min.js"</span><span class="tag">> 

 
old content
 
old content
 
old content
 
old content
 
  jQuery('div').hide().text('new content').addClass("updatedContent").show();
 

위의 예에는 순환을 나타내는 프로그래밍 코드가 없다.그러나 묘하게도, jQuery는 전체 페이지를 스캔한 후에 모든 요소를 봉인된 요소에 집중시킨 다음, 봉인된 모든 요소 (은밀하게 훑어보기) 에 대해 코드 정의를 실행하는 일련의 jQuery 방법을 사용한다.예를 들어, 봉인된 집중된 모든 요소가 호출되었다.hide().상기 코드에서 실제로 우리가 사용하는 모든 방법(hide(),text(),addClass(),show())은 페이지의 모든div 요소에 작용한다. 마치 인위적으로 DOM 요소를 옮겨다니는 순환 방법을 쓴 것과 같다.상기 코드의 실행 결과는 페이지의 모든 요소가 숨겨지고 텍스트를 변경하고class 속성을 추가하며 최종적으로 다시 나타나는 것입니다.
봉인된 요소 집합과 스텔스 반복을 익히는 것은 복잡한 순환 논리를 작성하는 데 매우 중요하다. 주의해야 할 것은, 어떤 추가 순환 코드를 쓰기 전에 간단한 순환 작업이 이미 존재한다는 것이다. (예: jQuery ('div')each(function(){}).다시 말하면, jQuery 방법의 호출은 봉인된 요소가 집중된 모든 요소에 영향을 줄 것이다.
주의해야 할 것은 일부 jQuery 방법의 행위가 특수해서 봉인된 요소가 집중된 첫 번째 요소(예를 들어:attr())에만 영향을 줄 수 있다는 것이다.