지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

jQuery 참조 예 1.0 정보 jQuery_jquery의 철학

WBOY
풀어 주다： 2016-05-16 17:38:17
원래의
962명이 탐색했습니다.

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

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

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

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

요소를 찾아 조작

더 정확하게 말하면 DOM 트리에서 요소 배치를 찾은 다음 요소 집합에 대해 작업을 수행하는 것입니다. 예를 들어, 먼저 사용자로부터

요소를 숨긴 다음, 숨겨진
요소에 새 텍스트를 삽입하고, 마지막으로
요소를 다시 표시합니다. 해당 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 페이지에서 모든

요소를 찾은 다음 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 코드를 예로 사용하면 웹페이지에

요소가 여러 개 있으면 어떻게 되나요? 아래 예에서 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>
로그인 후 복사
세 개의
요소가 더 있습니다.

위의 예에는 루프를 나타내는 프로그래밍 코드가 없습니다. 그러나 놀라운 점은 jQuery가 전체 페이지를 스캔한 다음 모든

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

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

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

관련 라벨：
jQuery参考实例1.0 jQuery的哲学
원천：php.cn
이전 기사：JS가 code_javascript 팁을 완료하기 전에 수행해야 할 5가지 작업 다음 기사：JS 보조함수 상속()에 관한 질문_기본지식
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1896
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2062
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1734
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1639
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1649
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿