jQuery 참조 예 1.0 정보 jQuery_jquery의 철학-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jQuery 참조 예 1.0 정보 jQuery_jquery의 철학

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:38 PM

이 글은 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()).

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AM

JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.

Quartz에서 작업이 시작되기 전에 알림을 보내는 방법은 무엇입니까?Apr 04, 2025 pm 09:24 PM

쿼츠 타이머를 사용하여 작업을 예약 할 때 미리 쿼츠에서 작업 알림을 보내는 방법 작업의 실행 시간은 CRON 표현식에 의해 설정됩니다. 지금...

JavaScript에서 생성자의 프로토 타입 체인에서 함수의 매개 변수를 얻는 방법은 무엇입니까?Apr 04, 2025 pm 09:21 PM

JavaScript 프로그래밍에서 JavaScript의 프로토 타입 체인에서 함수 매개 변수를 얻는 방법 프로토 타입 체인의 기능 매개 변수를 이해하고 조작하는 방법은 일반적이고 중요한 작업입니다 ...

Wechat Mini 프로그램 웹 뷰에서 Vue.js 동적 스타일 변위가 실패한 이유는 무엇입니까?Apr 04, 2025 pm 09:18 PM

WeChat 애플릿 웹 뷰에서 vue.js를 사용하는 동적 스타일 변위 실패가 vue.js를 사용하는 이유를 분석합니다.

TamperMonkey에서 여러 링크에 대한 동시 GET 요청을 구현하고 순서대로 반환 결과를 결정하는 방법은 무엇입니까?Apr 04, 2025 pm 09:15 PM

동시 링크에 대한 요청을 여러 링크와 순서대로 판단하여 결과를 반환하는 방법은 무엇입니까? 탬퍼 몬키 스크립트에서는 종종 여러 체인을 사용해야합니다 ...

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.