jQuery에 대한 비밀

jQuery의 기능은 무엇인가요? 동적 특수 효과, AJAX, 플러그인을 통한 확장, 편리한 도구 - 브라우저 버전 확인, 점진적인 향상, 체인 호출, 다중 브라우저 지원, Internet Explorer6.0+, Opera9.0+, Firefox2+, Safari2.0+ 지원 , Chrome1.0+(Internet Explorer6,7,8에 대한 지원이 2.0.0에서 취소되었습니다.)

가끔 jQuery가 직접 $ 연산을 할 수 있는 이유가 궁금합니다. 네이티브 js보다 DOM 연산이 더 편리하고, 원하는 만큼 직접 연산을 연결할 수 있습니다.

Core Framework

10,000줄 이상의 코드 공개 jQuery 핵심 코드 :

(function(window, undefined) {function jQuery(selector){return new jQuery.fn.init(selector)
}
jQuery.fn = jQuery.prototype = {
init: function () {
}
}
jQuery.fn.init.prototype = jQuery.fn;window.jQuery = window.$ = jQuery;
})(window)

클로저 구조는 매개변수 창을 전달합니다

창에 ​​대한 각 내부 참조에 대한 쿼리 시간을 줄입니다

코드 압축에 편리합니다

클로저 구조는 실제 매개변수 창을 전달한 후 형식 매개변수를 사용하여 수신합니다. 형식 매개변수

undefed

낮은 버전의 IE를 사용하는 브라우저에서는 성공적으로 undefed에 값을 할당할 수 있기 때문에 undefed의 순수성을 보장하기 위해 실제 매개변수 없이 형식 매개변수 위치를 지정하여 반드시 정의되지 않도록 해야 합니다.

jQuery 매개변수 선택기

selector can id, class,Descendant,Descendant 등이 될 수 있는 태그 쌍으로, jQuery 객체가 될 수 있습니다.

jQuery 프로토타입 객체 할당

jQuery의 프로토타입 메소드를 편리하게 확장합니다.

return 인스턴스화 프로토타입 메서드 init

실제로 $를 사용할 때마다 새로운 $()가 필요하지 않습니다.

jQuery에서 자체 프로토타입 메서드를 새로 만들어야 하는 이유는 무엇입니까? 반환하려면 새로운 다른 함수가 필요하므로 자체

jQuery 프로토타입 객체를 사용하여 값을 할당하는 것은 어떨까요? jQuery 프로토타입 메소드 init의 프로토타입

메소드가 내부적으로 jQuery 프로토타입으로 확장될 때마다 init는 이 메소드도 있으면 멋지지 않나요? init에 이런 $()가 있으면 $()에서 나오는 jQuery 객체도 있을까요?

창에 노출되는 사용 가능한 멤버 jQuery 다음에는 $

이 있습니다. 창에 노출되면 jQuery와 $를 전역적으로 직접 사용할 수 있습니다. $가 있는 이유는 짧기 때문입니다. 물론 매번 jQuery()를 사용할 수도 있습니다.

로얄 선택기 -Sizzle

Sizzle 물론 Sizzle만 단독으로 사용할 수도 있습니다

위에서 언급했듯이 $(selector)의 매개변수 선택자는 id, class,Descendant,descendant 등이 될 수 있으며 jQuery 객체가 될 수도 있습니다. 그러면 클릭 한 번으로 원하는 jQuery 객체를 어떻게 얻을 수 있을까요? Sizzle은 다양한 DOM 객체를 얻는 방법을 캡슐화하여 jQuery 객체로 패키징합니다. Sizzle 내부의 지원 객체, 그리고 지원 객체는 일반 테스트 브라우저 기능의 결과를 저장합니다

기능 문제가 있는 선택자에 대한 범용 호환성 솔루션 사용(복잡한 판단 코드)

Regular

jQuery에서는 여전히 정규 표현식이 많이 사용됩니다. . 정규 표현식을 사용하면 데이터 처리 효율성이 크게 향상됩니다.

Judgment

열이 html 태그일 수 있는 경우 선택기 태그의 DOM 객체 패키지를 직접 생성하여 jQuery 객체로 반환하세요. , ID 이름, 클래스 이름, 태그 이름 등이 될 수 있으며, Sizzle을 통해 직접 DOM 객체를 얻어서 jQuery 객체로 패키징하여 반환합니다

판단은 init 내부의 선택기 유형을 결정하는 것입니다,

패키징

패키징에 대해 여러 번 이야기했습니다. 예, jQuery 객체는 실제로 의사 배열입니다. 배열을 사용하여 데이터를 저장하면 더 많은 데이터 처리를 더 쉽게 수행할 수 있기 때문입니다. $ ("div").css("color": "red") 와 같은 경우 jQuery는 자동으로 암시적으로 반복하는 데 도움을 준 다음 페이지의 모든 div에 포함된 텍스트 색상을 빨간색으로 설정합니다. Ape가 가장 좋아하는 조잡한 코드 라인

외부 확장-확장

jQuery 코어 구조가 처리된 후에는 기본적으로 외부에서 사용할 수 있지만 jQuery 자체 확장성을 포함하여 jQuery 기반 플러그인을 구현할 수 있다는 것을 알고 있습니다. , 2차 개발을 용이하게 하기 위해 외부 세계에 대한 인터페이스를 제공해야 하므로 확장 방법이 있습니다

간단한 확장은 이를 혼합하는 것입니다. 예를 들면:

function extend(obj) {        var k;        for(k in obj) {            this[k] = obj[k];
        }
    }
    Baiya.extend = extend;
    Baiya.fn.extend = extend;

확장이 있어야 합니다. $.each가 될 수 있는 정적 메서드와 인스턴스 메서드의 경우 $("div").each를 사용할 수도 있습니다.

그 후 일부 jQuery 메서드는 확장을 기반으로 확장됩니다. jQuery 확장 메소드를 직접 사용할 수도 있습니다

DOM 연산

DOM 연산도 jQuery입니다. 주요 기능은 사용하기 매우 쉽고, 우리가 생각할 수 있는 모든 사용 시나리오를 다루며, 일반적으로 사용되는 추가, 삭제 방법을 완성합니다. , html()/css()/val( ) 등과 같은 클래스를 가져오고 설정하는

jQuery의 메서드를 확인하고 수정합니다. 이러한 매개 변수는 값을 가져오기 위해 전달되는 것이 아니라 값을 설정하기 위해 전달됩니다

## 체인 프로그래밍

jQuery는 원하는 만큼 모든 함수를 한 줄의 코드로 작성할 수 있습니다. 방법은 다음과 같습니다.

프로토타입 체인을 변경하는 모든 메서드는 현재 이 객체를 저장합니다. 자체 속성으로 end 메소드를 호출하여 상위 체인을 찾아 연쇄 연산을 수행할 수 있습니다

이벤트 연산

jQuery 이벤트 연산은 일반적으로 click 클래스(mouseover/mouseleave 등)를 통해 사용할 수 있습니다. ) 및 on

on的实现是对原生的onclick类的处理，因为相同的原生的事件在同一个DOM对象上只能被绑定一次，如果再次绑定会覆盖掉上一次的，所以jQuery帮我们封装了事件的存储，把相同的事件分成一个数组存储在一个对象里面，然后对数组进行遍历，依次调用数组里存储的每个方法

on实现之后会把所有的事件处理字符串处理一下用on来改造一下，如下:

Baiya.each(("onclick,onmousedown,onmouseenter,onmouseleave," +    "onmousemove,onmouseout,onmouseover,onmouseup,onfocus," +    "onmousewheel,
onkeydown,onkeypress,onkeyup,onblur").split(","),     function (i, v) {        var event = v.slice(2);
        Baiya.fn[event] = function (callback) {            return this.on(event, callback);
        }
    });

属性操作

jQuery也提供给了我们方便的属性操作，底层就是对原生方法的包装，处理兼容性问题，如果jQuery不对IE浏览器的兼容处理的话，那么它的代码量可能会缩一半，当然锅不能全部甩给IE，比如innerText方法火狐是不支持的，但是支持textContent方法，所以jQuery会尽可能的处理这种浏览器带来的差异

样式操作

基本思想如上

Ajax操作

Ajax可以说是前端的跨越性进步，毫不夸张的说如果没有Ajax的发展，那么今天的前端可能不叫前端，可能是美工……

Ajax是什么？

在我的理解来看Ajax就是一个方法，这个方法遵循着http协议的规范，我们可以使用这个方法来向服务器请求少量的数据，有了数据之后我们就可以操作DOM来达到局部更新网页的目的，这是一个非常酷的事情

jQuery的Ajax是基于XMLHttpRequest的封装，当然了他也有兼容性问题，具体的封装见我之前的文章 简单的ajax封装

具体就是区别get和post请求的区别，get请求的传参是直接拼接在url结尾，而post请求需要在send()里面传递，并且post请求还要设置请求头setRequestHeader("content-type", "application/x-www-form-urlencoded")

请求后对json或者text或者xml的数据进行处理就可以渲染到页面了

提到Ajax就不得不提到跨域了

跨域简单的来说限制了非同源（ip/域名/端口/协议）的数据交互，当然这肯定是极好的，因为如果不限制那么你的网页别人也可以操作是不是很恐怖

但是有些情况下我们需要调用别人的服务器数据，而且别人也愿意怎么办呢，程序员是很聪明的，html标签中img，script，link等一些带有src属性的标签是可以请求外部资源的，img和link得到的数据是不可用的，只有script标签请求的数据我们可以通过函数来接收，函数的参数传递可以是任何类型，所以创建一个函数，来接收，参数就是请求到的数据，而对方的数据也要用该函数来调用就可以实现跨域了

简单封装jsonp实现

// url是请求的接口// params是传递的参数// fn是回调函数function jsonp(url, params, fn){	// cbName实现给url加上哈希，防止同一个地址请求出现缓存
           var cbName = `jsonp_${(Math.random() * Math.random()).toString().substr(2)}`;            window[cbName] = function (data) {
               fn(data);                // 获取数据后移除script标签
               window.document.body.removeChild(scriptElement);
           };            // 组合最终请求的url地址
           var querystring = '';            for (var key in params) {
               querystring += `${key}=${params[key]}&`;
           }            // 告诉服务端我的回调叫什么
           querystring += `callback=${cbName}`;

           url = `${url}?${querystring}`;            // 创建一个script标签，并将src设置为url地址
           var scriptElement = window.document.createElement('script');
           scriptElement.src = url;            // appendChild(执行)
           window.document.body.appendChild(scriptElement);
       }

Animate

封装的代码

// element设置动画的DOM对象// attrs设置动画的属性object// fn是回调函数function animate(element, attrs, fn) {        //清除定时器
        if(element.timerId) {
            clearInterval(element.timerId);
        }
        element.timerId = setInterval(function () {            //设置开关
            var stop = true;            //遍历attrs对象，获取所有属性
            for(var k in attrs) {                //获取样式属性 对应的目标值
                var target = parseInt(attrs[k]);                var current = 0;                var step = 0;                //判断是否是要修改透明度的属性
                if(k === "opacity") {
                    current = parseFloat( getStyle(element, k)) * 100 || 0;
                    target = target * 100;
                    step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    current += step;
                    element.style[k] = current / 100;                    //兼容ie
                    element.style["filter"] = "alpha(opacity="+  current +")";
                }else if(k === "zIndex") {
                    element.style[k] = target;
                } else {                    //获取任意样式属性的值，如果转换数字失败，返回为0
                    current = parseInt(getStyle(element, k)) || 0;
                    step = (target - current) / 10;                    console.log("current:" + current + "  step:" + step);
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    current += step;                    //设置任意样式属性的值
                    element.style[k] = current + "px";
                }                if(step !== 0) {                    //如果有一个属性的值没有到达target  ，设置为false
                    stop = false;
                }
            }            //如果所有属性值都到达target  停止定时器
            if(stop) {
                clearInterval(element.timerId);                //动画执行完毕  回调函数
                if(fn) {
                    fn();
                }
            }
        },30);
    }    //获取计算后的样式的值
    function getStyle(element, attr) {        //能力检测
        if(window.getComputedStyle) {            return window.getComputedStyle(element, null)[attr];
        }else{            return element.currentStyle[attr];
        }
    }

以上讲述这么多来分析jQuery，我相信大家也一定对jQuery有了新的认识和认知，希望大家能有收获。

相关推荐：

如何高效使用jquery

JS和JQUERY有什么区别

jq源码中绑在$,jQuery上面的方法

위 내용은 jQuery에 대한 비밀의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!