집 > 기사 > 웹 프론트엔드 > jQuery 참조 예 1.0 정보 jQuery_jquery의 철학

jQuery 참조 예 1.0 정보 jQuery_jquery의 철학

WBOY원래의: 2016-05-16 17:38:17963검색

이 글은 jQuery Cookbook(O'Reilly 2009) 1.0 The jQuery Philosophy에서 번역되었습니다.

jQuery의 철학은 "적은 코드로 더 많은 일을 하라"입니다. 이 철학은 세 가지 개념으로 나눌 수 있습니다.

CSS 선택기로 요소를 찾고 jQuery 메소드로 조작
요소 집합에 여러 jQuery 메소드 연결
jQuery 캡슐화 및 암시적 순회

이 세 가지 개념을 완전히 이해하는 것은 jQuery 코드를 작성하는 데 중요합니다. 이 세 가지 개념에 대해 자세히 살펴보겠습니다.

요소를 찾아 조작

더 정확하게 말하면 DOM 트리에서 요소 배치를 찾은 다음 요소 집합에 대해 작업을 수행하는 것입니다. 예를 들어, 먼저 사용자로부터 dc6dce4a544fdca2df29d5ac0ea9906b 요소를 숨긴 다음, 숨겨진 dc6dce4a544fdca2df29d5ac0ea9906b 요소에 새 텍스트를 삽입하고, 마지막으로 dc6dce4a544fdca2df29d5ac0ea9906b 요소를 다시 표시합니다. 해당 jQuery 코드는 다음과 같습니다.

<SPAN class=dec><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag><html></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag><head></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><script</SPAN><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>></script></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag></head></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag><body></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><div></SPAN><SPAN class=pln>old content</SPAN><SPAN class=tag></div></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><script></SPAN><SPAN class=pln>
  </SPAN><SPAN class=com>//隐藏页面上所有的div元素</SPAN><SPAN class=pln>
  jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>hide</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln>
  </SPAN><SPAN class=com>//更新所有div元素内的文本</SPAN><SPAN class=pln>
  jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>text</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'new content'</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln>
  </SPAN><SPAN class=com>//在所有的div元素上添加值为updatedContent的class属性</SPAN><SPAN class=pln>
  jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>addClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"updatedContent"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln>
  </SPAN><SPAN class=com>//显示页面上所有的div元素</SPAN><SPAN class=pln>
  jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>show</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag></script></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag></body></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag></html></SPAN>

이 네 가지 jQuery 문을 하나씩 살펴보겠습니다.

페이지의 모든 div 요소를 숨겨 보이지 않게 만듭니다
숨겨진 div 요소의 원본 텍스트를 새 텍스트('새 콘텐츠')로 바꿉니다
div 요소에 새 클래스 속성 값(updatedContent)을 추가합니다
페이지에 div 요소 다시 표시

위의 예에서는 jQuery 함수를 사용하여 HTML 페이지에서 모든 dc6dce4a544fdca2df29d5ac0ea9906b 요소를 찾은 다음 jQuery 메서드(hide(), text(), addClass(), show())를 사용하여 작업합니다.

체인콜

jQuery 메소드를 호출할 때 jQuery의 설계에 따라 이러한 메소드를 체인으로 호출할 수 있습니다. 예를 들어 요소 검색을 한 번만 수행한 다음 찾은 요소에 대해 일련의 작업을 수행합니다. 이전 코드 예제는 연결된 호출을 사용하여 JavaScript 문으로 다시 작성할 수 있습니다.

체인 콜을 사용하면 다음 코드를 사용할 수 있습니다.

<SPAN class=com>//隐藏页面上所有的div元素</SPAN><SPAN class=pln>
jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>hide</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln>
</SPAN><SPAN class=com>//更新所有div元素内的文本</SPAN><SPAN class=pln>
jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>text</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'new content'</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln>
</SPAN><SPAN class=com>//在所有的div元素上添加值为updatedContent的class属性</SPAN><SPAN class=pln>
jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>addClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"updatedContent"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln>
</SPAN><SPAN class=com>//显示页面上所有的div元素</SPAN><SPAN class=pln>
jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>show</SPAN><SPAN class=pun>();</SPAN>

은 다음과 같이 다시 작성됩니다.

<SPAN class=pln>jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>hide</SPAN><SPAN class=pun>().</SPAN><SPAN class=pln>text</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'new content'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>addClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"updatedContent"</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>show</SPAN><SPAN class=pun>();</SPAN>

코드 들여쓰기를 추가하면 다음과 같습니다.

<SPAN class=pln>jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln>
 </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>hide</SPAN><SPAN class=pun>()</SPAN><SPAN class=pln>
 </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>text</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'new content'</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln>
 </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>addClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"updatedContent"</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln>
 </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>show</SPAN><SPAN class=pun>();</SPAN>

간단히 말하면 연결 호출을 사용하면 현재 선택한 요소 집합에서 jQuery 메서드를 무제한으로 함께 사용할 수 있습니다. 본질적으로 jQuery 메서드로 처리된 요소는 메서드가 처리된 후에 항상 반환되므로 호출 체인이 계속될 수 있습니다. jQuery 플러그인도 이러한 방식으로 설계되었으므로(캡슐화된 요소 세트 반환) 플러그인을 사용해도 체인 호출에 영향을 주지 않습니다.

연쇄 호출의 또 다른 이점은 DOM 요소를 한 번만 선택하여 오버헤드를 절약할 수 있다는 것입니다. DOM 트리 탐색을 피하는 것은 웹 페이지 성능을 향상시키는 데 중요하므로 선택한 DOM 요소 세트를 최대한 많이 재사용하거나 캐시하는 것이 필요합니다.

jQuery 래퍼

대부분의 경우 jQuery를 사용한다면 반드시 "jQuery encapsulation"이라는 것을 다루게 됩니다. 즉, jQuery를 사용하여 HTML 페이지에서 선택한 요소는 jQuery에서 제공하는 기능 레이어로 캡슐화됩니다. 나는 개인적으로 이것을 "캡슐화된 요소 세트"라고 부르고 싶습니다. 왜냐하면 이것이 jQuery 함수를 캡슐화하는 요소 세트이기 때문입니다. 이 캡슐화된 요소 세트에는 하나의 DOM 요소가 포함되는 경우도 있고, 여러 개 포함되는 경우도 있고, 아무것도 포함되지 않는 경우도 있습니다. 캡슐화 요소 집합이 비어 있으면 호출된 jQuery 메서드/속성에서 오류가 발생하지 않습니다. 이는 불필요한 if 문을 방지합니다.

위 HTML 코드를 예로 사용하면 웹페이지에 dc6dce4a544fdca2df29d5ac0ea9906b 요소가 여러 개 있으면 어떻게 되나요? 아래 예에서 HTML 페이지에는

<SPAN class=dec><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag><html></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag><head></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><script</SPAN><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>></script></SPAN><SPAN class=pln> </SPAN><SPAN class=tag></head></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag><body></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><div></SPAN><SPAN class=pln>old content</SPAN><SPAN class=tag></div></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><div></SPAN><SPAN class=pln>old content</SPAN><SPAN class=tag></div></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><div></SPAN><SPAN class=pln>old content</SPAN><SPAN class=tag></div></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><div></SPAN><SPAN class=pln>old content</SPAN><SPAN class=tag></div></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><script></SPAN><SPAN class=pln>
  jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>hide</SPAN><SPAN class=pun>().</SPAN><SPAN class=pln>text</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'new content'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>addClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"updatedContent"</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>show</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag></script></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag></body></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag></html></SPAN>

세 개의 dc6dce4a544fdca2df29d5ac0ea9906b 요소가 더 있습니다.

위의 예에는 루프를 나타내는 프로그래밍 코드가 없습니다. 그러나 놀라운 점은 jQuery가 전체 페이지를 스캔한 다음 모든 dc6dce4a544fdca2df29d5ac0ea9906b 요소를 캡슐화된 요소 세트에 넣은 다음 캡슐화된 세트의 각 요소에 대해 코드로 정의된 일련의 jQuery 메소드를 실행한다는 것입니다(암시적 순회). . 예를 들어, 캡슐화된 집합의 모든 요소는 .hide()를 호출합니다. 실제로 위 코드에서 우리가 사용하는 모든 메소드(hide(), text(), addClass(), show())는 사람이 작성한 루프와 마찬가지로 페이지의 모든 div 요소에 영향을 미칩니다. DOM 요소를 반복합니다. 위 코드의 실행 결과는 다음과 같습니다. 페이지의 모든 dc6dce4a544fdca2df29d5ac0ea9906b 요소가 숨겨지고, 포함된 텍스트가 변경되고, 클래스 속성이 추가되고, 최종적으로 다시 나타납니다.

복잡한 루핑 논리를 작성하려면 캡슐화된 요소 집합과 암시적 순회에 익숙해지는 것이 매우 중요합니다. 추가 루핑 코드를 작성하기 전에 간단한 루핑 작업이 이미 존재한다는 점에 유의하는 것이 중요합니다(예: jQuery(' div') .each(function(){}). 즉, jQuery 메서드 호출은 캡슐화된 요소 집합의 모든 요소에 영향을 미칩니다.

일부 jQuery 메서드에는 특별한 동작이 있으며 캡슐화된 요소 집합의 첫 번째 요소에만 영향을 미칩니다(예: attr()).

성명：

이전 기사：JS가 code_javascript 팁을 완료하기 전에 수행해야 할 5가지 작업다음 기사：JS가 code_javascript 팁을 완료하기 전에 수행해야 할 5가지 작업

jQuery 참조 예 1.0 정보 jQuery_jquery의 철학

요소를 찾아 조작

체인콜

jQuery 래퍼

관련 기사