Secrets sur jQuery-js tutoriel-php.cn

Quelles sont les fonctionnalités de jQuery ? Effets spéciaux dynamiques, AJAX, extension via des plug-ins, outils pratiques - tels que la détermination de la version du navigateur, l'amélioration progressive, l'appel en chaîne, la prise en charge de plusieurs navigateurs, la prise en charge d'Internet Explorer6.0+, Opera9.0+, Firefox2+, Safari2.0+ , Chrome1.0+ (la prise en charge d'Internet Explorer6,7,8 a été annulée dans la version 2.0.0).

Parfois, je me demande pourquoi jQuery peut directement $ fonctionner, il peut avoir des opérations DOM plus pratiques que js natif, et vous pouvez directement enchaîner les opérations aussi longtemps que vous le souhaitez

Core Framework

Révéler le code de base de jQuery avec plus de 10 000 lignes de code :

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

Copier après la connexion

La structure de fermeture passe le paramètre window

Réduit le temps de requête de chaque référence interne à la fenêtre

Pratique pour compresser le code

La structure de fermeture est passée dans la fenêtre de paramètres réelle, puis le paramètre formel est reçu à l'intérieur

Le paramètre formel n'est pas défini

Parce que la version inférieure du navigateur IE peut donner L'affectation d'undéfini est réussie, donc afin de garantir la pureté d'undéfini, donnez-lui une position de paramètre formel sans paramètres réels, en vous assurant qu'il doit être undéfini

jQuery sélecteur de paramètres

le sélecteur peut être une paire de balises, peut être un identifiant, une classe, un descendant, un descendant, etc., peut être un objet jQuery,

affectation d'objet prototype jQuery

étend facilement la méthode prototype de jQuery

instanciation de retour La méthode prototype init

est en fait telle que nous n'avons pas besoin de nouveau $() à chaque fois que nous utilisons $;

Pourquoi jQuery a-t-il besoin de créer sa propre méthode de prototype ? Parce que si vous ne créez pas la vôtre, vous devrez créer d'autres fonctions Return, alors pourquoi ne pas utiliser la vôtre

L'objet prototype jQuery est attribué à. le prototype de la méthode prototype jQuery init

Parce qu'à chaque fois qu'une méthode init est étendue en interne au prototype jQuery, elle aura aussi cette méthode, non, c'est très cool après init a $(), est-ce qu'il y a. également un objet jQuery ?

expose le membre jQuery disponible à la fenêtre Une fois que $

est exposé à la fenêtre, le monde entier peut être utilisé directement jQuery et $

<🎜. >Quant à pourquoi il y a $, c'est parce que c'est court Bien sûr, vous pouvez aussi utiliser jQuery() à chaque fois

le sélecteur royal-Sizzle

Sizzle aussi La base de jQuery, de. bien sûr, vous pouvez également utiliser Sizzle seul

Comme mentionné ci-dessus, le sélecteur de paramètre de $(selector) peut être id, class, descendant, descendant, etc., et peut être un objet jQuery, donc à chaque fois que nous $ Comment pouvons-nous obtenir instantanément l'objet jQuery que nous voulons ? Oui, c'est à cause de Sizzle. Sizzle encapsule des méthodes pour obtenir divers objets DOM et les regroupe dans des objets jQuery

Test de capacité du navigateur

Il existe un objet de support dans Sizzle, et l'objet de support stocke les résultats des tests réguliers des capacités du navigateur

Utiliser une solution de compatibilité universelle pour résoudre les sélecteurs avec des problèmes de capacité (code de jugement complexe)

Expressions régulières

Les expressions régulières sont encore largement utilisées dans jQuery. L'utilisation d'expressions régulières peut grandement améliorer notre efficacité de traitement des données

Juge

La colonne peut être une balise html, puis créer directement un objet DOM de la balise de sélection et enveloppez-le dans un objet jQuery et renvoyez-le

La colonne peut être un nom d'identifiant, un nom de classe, un nom de balise, etc. Attendez, puis obtenez directement l'objet DOM via Sizzle, enveloppez-le dans un objet jQuery et renvoyez-le

Le jugement est de juger du type de sélecteur à l'intérieur d'init,

Emballage

J'en ai déjà beaucoup dit Il est emballé deux fois. Oui, l'objet jQuery est en fait un pseudo-tableau. C'est aussi l'ingéniosité de sa conception, car l'utilisation de tableaux pour stocker des données nous permet d'effectuer davantage de traitements de données, comme $("div").css( "color). " : "red"), alors jQuery nous aidera automatiquement à itérer implicitement et à définir la couleur du texte contenu dans tous les divs de la page sur rouge. Cela peut être fait avec une ligne de code simple et grossière, qui est simplement celle d'un programmeur. favori

Extension-extension externe

Une fois la structure de base de jQuery traitée, elle peut essentiellement être utilisée en externe, mais nous savons que nous pouvons implémenter des plug-ins basés sur jQuery, y compris la propre évolutivité de jQuery . Il est nécessaire de fournir une interface avec le monde extérieur pour faciliter le développement secondaire, donc la méthode d'extension

est simplement mélangée. Par exemple :

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

Copier après la connexion

Les méthodes statiques et les méthodes d'instance. doivent être étendus. Oui, par exemple, chaque méthode peut être utilisée avec $.each ou $("div").each

Après cela, certaines méthodes jQuery sont étendues en fonction de l'extension. , nous pouvons également l'utiliser sur la base de la méthode d'extension extend. nous pouvons penser et améliorer les ajouts, suppressions, vérifications et modifications couramment utilisés

les méthodes de jQuery pour obtenir et définir des classes, telles que html()/css()/val(), etc. les paramètres sont transmis pour définir la valeur. Si les paramètres ne sont pas transmis, ils doivent obtenir la valeur

##Programmation de style de chaîne

jQuery prend en charge la programmation en chaîne aussi longtemps que vous le souhaitez. peut écrire toutes les fonctions dans une seule ligne de code. Comment cela se fait-il ?

Chaque méthode pour modifier la chaîne de prototypes enregistrera l'objet actuel comme son propre attribut, puis appellera la méthode end pour trouver la partie supérieure. chaîne de niveaux, afin que nous puissions effectuer des opérations en chaîne

Opérations sur les événements

Les opérations sur les événements de JQuery sont généralement Il peut être utilisé via la classe click (mouseover/mouseleave, etc.) et ainsi de suite, mais le l'implémentation de la classe click est de faire appel à

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);
        }
    });

Copier après la connexion

属性操作

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 = &#39;&#39;;            for (var key in params) {
               querystring += `${key}=${params[key]}&`;
           }            // 告诉服务端我的回调叫什么
           querystring += `callback=${cbName}`;

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

Copier après la connexion

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];
        }
    }

Copier après la connexion

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