jquery와 zepto는 동일합니까?

jquery와 zepto는 다릅니다. 둘 다 JavaScript 라이브러리이지만 차이점이 있습니다. 1. Dom 작업이 ID를 추가하면 jquery는 적용되지 않지만 Zepto는 적용됩니다. 2. jquery는 로드 이벤트의 처리 기능을 실행하지 않지만 zepto는 실행됩니다. 로드 이벤트의 처리 기능.

이 튜토리얼의 운영 환경: windows10 시스템, jquery3.2.1 버전, Dell G3 컴퓨터.

jquery와 zepto는 동일합니까?

jquery와 zepto는 다릅니다.

jquery:

jQuery는 이벤트 처리, HTML 문서 탐색, 신속한 웹사이트 개발을 위한 Ajax 상호작용 및 애니메이션. jQuery는 HTML의 클라이언트 측 스크립팅을 단순화하여 Web 2.0 애플리케이션 개발을 단순화합니다.

jQuery의 디자인 목적은 "write Less, Do More"입니다. 이는 더 적은 코드를 작성하고 더 많은 작업을 수행한다는 의미입니다. 이는 일반적인 JavaScript 기능 코드를 캡슐화하고 간단한 JavaScript 디자인 패턴을 제공하며 HTML 문서 작업, 이벤트 처리, 애니메이션 디자인 및 Ajax 상호 작용을 최적화합니다.

zepto:

Zepto는 최신 스마트폰 브라우저용으로 특별히 출시된 경량 JavaScript 라이브러리로, 파일 크기는 약 10K에 불과하며 주로 모바일 개발에 사용됩니다. jQuery와 유사한 API. zepto 공식 웹사이트에 나와 있듯이 jQuery를 사용할 수 있다면 zepto도 사용할 것입니다.

동일점:

Zepto는 원래 모바일 터미널용으로 개발된 라이브러리였으며 API가 jQuery와 유사하고 파일 크기가 더 작기 때문에 jQuery의 경량 대안입니다.

Zepto의 가장 큰 장점은 파일 크기가 8k를 넘지 않는다는 점입니다. 현재 모든 기능을 갖춘 라이브러리 중에서 가장 작습니다. 비록 크지는 않지만 Zepto에서 제공하는 도구는 프로그램 개발 요구 사항을 충족하기에 충분합니다.

jQuery에서 일반적으로 사용되는 대부분의 API와 메소드는 Zepto에서 사용할 수 있으며, 일부는 jQuery에서 찾을 수 없는 Zepto에도 있습니다.

또한 Zepto의 API는 대부분 jQuery와 호환되므로 사용이 매우 쉽습니다. jQuery에 익숙하다면 Zepto를 쉽게 익힐 수 있습니다.

동일한 방식으로 jQuery에서 많은 메소드를 재사용할 수 있으며, 문서를 보지 않고도 메소드를 문자열로 묶어서 더 간결한 코드를 얻을 수도 있습니다.

차이점:

1. IE 브라우저 지원

모바일 프로그램의 경우 Zepto에는 터치 스크린 상호 작용(탭 이벤트, 스와이프 이벤트)에 사용할 수 있는 몇 가지 기본 터치 이벤트가 있으며, Zepto는 IE 브라우저입니다. 이는 Zepto 개발자인 Thomas Fucks가 크로스 브라우저 문제에 대해 혼란스러워서가 아니라, IE 2.0 이전 버전의 jQuery 팀처럼 파일 크기를 줄이기 위해 신중하게 고려한 끝에 내린 결정입니다. 7, 8)은 더 이상 지원되지 않습니다.

Zepto는 jQuery 구문을 사용하기 때문에 설명서에서 jQuery를 IE의 대체 라이브러리로 사용하도록 권장합니다. 그렇게 하면 프로그램이 IE에서 계속 실행될 수 있고 다른 브라우저에서는 Zepto의 파일 크기 이점을 누릴 수 있습니다. 그러나 두 API는 완전히 호환되지 않으므로 이 방법을 사용할 때는 주의하고 충분히 조사하십시오.

2. Dom 작업의 차이점: id를 추가하면 jQuery가 적용되지 않지만 Zepto는 적용됩니다.

jQuery에서 운영하는 ul의 id는 추가되지 않습니다.

(function($) {
  $(function() {
    var $list = $(&#39;<ul><li>jQuery 插入</li></ul>&#39;, {
      id: &#39;insert-by-jquery&#39;
    });
    $list.appendTo($(&#39;body&#39;));
  });})(window.jQuery);
Zepto 可以在 ul 上添加 id。
Zepto(function($) {
  var $list = $(&#39;<ul><li>Zepto 插入</li></ul>&#39;, {
    id: &#39;insert-by-zepto&#39;
  });
  $list.appendTo($(&#39;body&#39;));
});

3. 이벤트 트리거의 차이점:

jquery를 사용할 때 로드 이벤트의 핸들러 기능이 실행되지 않습니다.

(function($) {
    $(function() {    
        $script = $(&#39;<script />&#39;, {
            src: &#39;http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js&#39;,
            id: &#39;ui-jquery&#39;
        });
        $script.appendTo($(&#39;body&#39;));
        $script.on(&#39;load&#39;, function() {
            console.log(&#39;jQ script loaded&#39;);
        });
    });})(window.jQuery);

zepto를 사용할 때 로드 이벤트의 핸들러 기능이 실행됩니다

Zepto(function($) {  
    $script = $(&#39;<script />&#39;, {
        src: &#39;http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js&#39;,
        id: &#39;ui-zepto&#39;
    });
    $script.appendTo($(&#39;body&#39;));
    $script.on(&#39;load&#39;, function() {
        console.log(&#39;zepto script loaded&#39;);
    });});

4, width()와 height ()의 차이:

Zepto는 상자 모델(상자 크기)에 따라 결정됩니다. 할당된 너비를 반환하려면 .width()를 사용하고, 반환하려면 .css('width')를 사용하세요. 테두리 등을 추가한 결과 jQuery는 상자 모델을 무시하고 항상 콘텐츠 영역의 너비/높이를 반환합니다(패딩 및 테두리 제외).

5. offset()의 차이점:

Zepto는 {top, left, width, height}를 반환하고, jQuery는 {width, height}를 반환합니다.

6. Zepto는 숨겨진 요소의 너비와 높이를 얻을 수 없지만 jQuery는 얻을 수 있습니다.

7. Zepto는 프로토타입에 대한 확장 메소드를 정의하지 않지만 jQuery는 정의합니다.

8. Zepto의 각 메서드는 JSON 개체가 아닌 배열만 순회할 수 있습니다.

추천 관련 비디오 튜토리얼: jQuery 비디오 튜토리얼

위 내용은 jquery와 zepto는 동일합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!