Geheimnisse über jQuery

Was sind die Funktionen von jQuery? Dynamische Spezialeffekte, AJAX, Erweiterung durch Plug-Ins, praktische Tools – wie Browserversionsbestimmung, progressive Erweiterung, Kettenaufrufe, Unterstützung mehrerer Browser, Unterstützung von Internet Explorer6.0+, Opera9.0+, Firefox2+, Safari2.0+ , Chrome1.0+ (Unterstützung für Internet Explorer6,7,8 wurde in 2.0.0 eingestellt).

Manchmal frage ich mich, warum jQuery direkt $ operieren kann, es bequemere DOM-Operationen als natives js haben kann und Sie Operationen direkt verketten können, solange Sie möchten

Core Framework

Enthüllung des Kerncodes von jQuery mit mehr als 10.000 Codezeilen:

(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)

Die Abschlussstruktur übergibt das Parameterfenster

Reduziert die Abfragezeit jedes internen Verweises auf das Fenster

Bequem zum Komprimieren des Codes

Die Abschlussstruktur wird im tatsächlichen Parameterfenster übergeben und dann wird der formale Parameter darin empfangen

Der formale Parameter ist undefiniert

Weil die niedrigere Version des IE-Browsers die Zuweisung von undefiniert erfolgreich durchführen kann. Um die Reinheit von undefiniert sicherzustellen, geben Sie ihm eine formale Parameterposition ohne tatsächliche Parameter und stellen Sie sicher, dass es undefiniert sein muss

jQuery Parameterselektor

Selektor kann ein Tag-Paar sein, kann eine ID, eine Klasse, ein Nachkomme, ein Nachkomme usw. sein, kann ein jQuery-Objekt sein,

jQuery-Prototypobjektzuweisung

erweitert bequem die Prototyp-Methode von jQuery

Rückgabeinstanziierung Die Prototyp-Methode init

ist eigentlich so, dass wir nicht jedes Mal ein neues $() benötigen, wenn wir $;

verwenden Warum muss jQuery seine eigene Prototyp-Methode neu erstellen? Denn wenn Sie keine neue neue Funktion benötigen, warum nicht Ihre eigene verwenden

Das jQuery-Prototypobjekt wird zugewiesen der Prototyp der jQuery-Prototypmethode init

Denn jedes Mal, wenn eine Methode init intern auf den jQuery-Prototyp erweitert wird, wird es auch diese Methode geben, oder? auch ein jQuery-Objekt?

macht das verfügbare Mitglied jQuery dem Fenster zugänglich. Nachdem $

dem Fenster ausgesetzt wurde, kann die ganze Welt direkt verwendet werden >Warum es $ gibt, liegt daran, dass es kurz ist. Natürlich können Sie auch jedes Mal jQuery() verwenden

Der königliche Selektor-Sizzle

Sizzle auch Die Basis von jQuery Natürlich können Sie Sizzle auch alleine verwenden.

Wie oben erwähnt, kann der Parameterselektor von $(selector) eine ID, eine Klasse, ein Nachkomme, ein Nachkomme usw. sein und kann ein jQuery-Objekt sein, also jedes Mal, wenn wir $ Wie können wir das gewünschte jQuery-Objekt sofort erhalten? Das liegt daran, dass Sizzle Methoden zum Abrufen verschiedener DOM-Objekte kapselt und sie in jQuery-Objekte verpackt ist ein Supportobjekt innerhalb von Sizzle, und das Supportobjekt speichert die Ergebnisse der regulären Testbrowserfähigkeit

Verwenden Sie für Selektoren mit Fähigkeitsproblemen eine universelle Kompatibilitätslösung, um diese zu lösen (umständlicher Beurteilungscode)

Reguläre Ausdrücke

Reguläre Ausdrücke werden in jQuery immer noch häufig verwendet. Die Verwendung regulärer Ausdrücke kann unsere Datenverarbeitungseffizienz erheblich verbessern

Beurteilen

Die Spalte kann ein HTML sein Tag, erstellen Sie dann direkt ein DOM-Objekt des Selektor-Tags, wickeln Sie es in ein jQuery-Objekt ein und geben Sie es zurück

Die Spalte kann ein ID-Name, ein Klassenname, ein Tag-Name usw. sein. Warten Sie und rufen Sie dann direkt ab DOM-Objekt durch Sizzle, wickeln Sie es in ein jQuery-Objekt ein und geben Sie es zurück

Das Urteil besteht darin, den Typ des Selektors in init zu beurteilen,

Verpackung

Ich habe a gesagt lot Ja, das jQuery-Objekt ist tatsächlich ein Pseudo-Array. Dies liegt auch an der Genialität seines Designs, da die Verwendung von Arrays zum Speichern von Daten uns die Durchführung weiterer Datenverarbeitungsvorgänge erleichtert, z. B. $("div"). css( „color“: „red“), dann hilft uns jQuery automatisch dabei, die Farbe des in allen Divs auf der Seite enthaltenen Textes implizit zu iterieren und auf Rot zu setzen. Dies kann mit einer einfachen und groben Codezeile erfolgen ist einfach der Favorit eines Programmierers

Externe Erweiterung-extend

Nachdem die jQuery-Kernstruktur verarbeitet wurde, kann sie grundsätzlich extern verwendet werden, aber wir wissen, dass wir Plug-Ins basierend auf jQuery implementieren können. Einschließlich der eigenen Skalierbarkeit von jQuery ist es notwendig, eine Schnittstelle zur Außenwelt bereitzustellen, um die Sekundärentwicklung zu erleichtern. Daher wird die Erweiterungsmethode

einfach eingemischt. Zum Beispiel:

Beide statisch Methoden und Instanzmethoden müssen erweitert werden. Beispielsweise kann jede Methode mit $.each oder $("div").each verwendet werden.

Danach werden einige jQuery-Methoden basierend auf erweitert Natürlich können wir es auch basierend auf der jQuery-Erweiterungsmethode

DOM-Operation

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

DOM-Operation verwenden, da sie so einfach zu verwenden ist deckt alle Nutzungsszenarien ab, die wir uns vorstellen können, und verbessert die häufig verwendeten Hinzufügungen, Löschungen, Prüfungen und Änderungen. Methoden

jQuery-Methoden zum Abrufen und Festlegen von Klassen, wie z. B. html()/css()/val(). usw. Diese Parameter werden übergeben, um den Wert festzulegen.

##Kettenstil-Programmierung

jQuery unterstützt die Kettenprogrammierung Wenn Sie möchten, können Sie alle Funktionen in einer Codezeile schreiben.

Jede Methode zum Ändern der Prototypenkette speichert das aktuelle Objekt als eigenes Attribut und ruft dann die Endmethode auf um die Kette der oberen Ebene zu finden, damit wir Kettenoperationen ausführen können

Ereignisoperationen

Die Ereignisoperationen von jQuery sind im Allgemeinen Es kann über die Click-Klasse (Mouseover/Mouseleave usw.) und verwendet werden on, aber die Implementierung der Click-Klasse besteht darin,

aufzurufen

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上面的方法

Das obige ist der detaillierte Inhalt vonGeheimnisse über jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!