> 웹 프론트엔드 > JS 튜토리얼 > jQuery와 Zepto의 차이점은 무엇입니까

jQuery와 Zepto의 차이점은 무엇입니까

青灯夜游
풀어 주다: 2020-11-30 11:42:19
원래의
1993명이 탐색했습니다.

차이점: 1. Zepto에서는 모바일 단말기용으로 많은 양의 jQuery 호환 코드가 제거되었습니다. 2. jQuery를 사용할 때 Zepto의 핸들러 기능인 load 이벤트의 핸들러 기능이 실행되지 않습니다. 3. zepto에는 그러한 코드가 없습니다. 프로토타입에 대한 확장 메소드를 정의하고 jquery에 있습니다.

jQuery와 Zepto의 차이점은 무엇입니까

이 튜토리얼의 운영 환경: windows10 시스템, jquery2.2.4, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

jQuery와 Zepto의 차이점

1. Zepto는 더 가볍습니다

2. Zepto는 모바일 단말기용 jQuery 호환 코드를 많이 제거한 간소화된 버전입니다.

3. 다릅니다

1) 모바일 애플리케이션의 경우 Zepto에는 터치 스크린 상호 작용에 사용할 수 있는 몇 가지 기본 터치 이벤트(탭 이벤트, 스와이프 이벤트)가 있습니다. Zepto는 IE 브라우저를 지원하지 않습니다.

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

(function($) {
     $(function() {
         var $insert = $(&#39;<p>jQuery 插入</p>&#39;, {
             id: &#39;insert-by-jquery&#39;
         });
         $insert.appendTo($(&#39;body&#39;));
     });
})(window.jQuery);   
// <p>jQuery 插入<p>

Zepto(function($) {  
    var $insert = $(&#39;<p>Zepto 插入</p>&#39;, {
        id: &#39;insert-by-zepto&#39;
    });
    $insert.appendTo($(&#39;body&#39;));
});
// <p id="insert-by-zepto">Zepto 插入</p>
로그인 후 복사

3) 이벤트 트리거의 차이점: zepto를 사용할 때 로드 이벤트의 핸들러 함수가 실행되지 않습니다. 로드 이벤트가 실행되지 않습니다. 처리 기능이 실행됩니다

(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(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), 이벤트 위임의 차이점: zepto에서는 선택기의 모든 위임된 이벤트가 차례로 대기열에 들어가는 반면, jquery에서는 대기열에 위임됩니다. 여러 개의 독립적인 이벤트

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

6), offset()의 차이: zepto는 { 상단, 왼쪽, 너비, 높이}; jquery는 {너비, 높이}를 반환합니다. zepto는 숨겨진 요소의 너비와 높이를 얻을 수 없으며 jquery는

7), zepto는 프로토타입에 대한 확장 메서드를 정의하지 않지만 jquery는

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

jQuery와 Zepto.js는 표면적으로 유사해 보이지만 사실 일부 세부 사항은 매우 다릅니다. jQuery와 Zepto.js를 동시에 지원하는 것은 감사할 일이 아닙니다. 이는 Foundation 5가 지원을 포기한 이유 중 하나입니다. Zepto.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오 코스를 방문하세요! !

위 내용은 jQuery와 Zepto의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿