jQueryの秘密

jQueryの特徴は何ですか?動的特殊効果、AJAX、プラグインによる拡張、便利なツール - ブラウザのバージョン検出、プログレッシブ拡張、チェーンコール、マルチブラウザのサポート、Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+のサポート, Chrome1.0+（Internet Explorer6,7,8のサポートは2.0.0で中止されました）。

なぜ jQuery は直接 $ 操作でき、ネイティブ JS よりも便利な DOM 操作ができ、必要なだけ直接操作をチェーンできるのかと時々疑問に思うことがあります

コア フレームワーク

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)

クロージャ構造はパラメータウィンドウを渡します

ウィンドウへの各内部参照のクエリ時間を短縮します

コードの圧縮に便利です

クロージャ構造は実際のパラメータウィンドウを渡し、仮パラメータを使用して受け取ります仮パラメータ

unknown

以前のバージョンの IE を使用するブラウザは、値を unfined に正常に割り当てることができるため、未定義の純粋性を保証するために、実際のパラメータを使用せずに仮パラメータの位置を指定し、それが未定義でなければならないことを保証します

jQuery パラメーター セレクター

セレクターは、ID、クラス、子孫、子孫などのタグのペアであり、jQuery オブジェクトにすることができます。

jQuery プロトタイプ オブジェクトの割り当て

jQuery のプロトタイプ メソッドを便利に拡張します

return インスタンス化プロトタイプ メソッド init

実際には $ を使用するたびに、新しい $() は必要ありません。

なぜ jQuery は独自のプロトタイプ メソッドを新しくする必要があるのでしょうか。返すために新しい他の関数が必要なので、独自の

jQuery プロトタイプ オブジェクトを使用して jQuery プロトタイプ メソッドのプロトタイプ init に値を割り当ててみてはいかがでしょうか

メソッドが内部的に jQuery プロトタイプに拡張されるたびに、init もこのメソッドがあると便利ですね? init にそのような $() がある場合、$() から出てくる jQuery オブジェクトもそこにありますか?

ウィンドウに公開される 利用可能なメンバー jQuery が公開された後、$

ウィンドウに対して、jQueryと$が直接グローバルに使える理由は、もちろんjQuery()を毎回使うこともできるからです

王道のセレクタ-Sizzle

です。もちろん、Sizzle だけを使用することもできます

前述のように、$(selector) のパラメーター セレクターは、id、class、descendant、descendant など、jQuery オブジェクトにすることができます。毎回、ワンクリックで必要な jQuery オブジェクトを取得できますか? はい、Sizzle のおかげで、さまざまな DOM オブジェクトを取得するためのメソッドがカプセル化され、それらを jQuery オブジェクトにパッケージ化されます

。 Sizzle 内にオブジェクトがあり、サポート オブジェクトにはブラウザーの機能の定期的なテストの結果が保存されます

機能に問題があるセレクター (複雑な判定コード) にはユニバーサル互換性ソリューションを使用します

正規

jQuery では正規表現がよく使用されます。正規表現を使用すると、データ処理の効率が大幅に向上します。

判断

列が HTML タグである可能性がある場合は、セレクター タグの DOM オブジェクト パッケージを直接作成して、それを jQuery オブジェクトとして返します

。 ID名、クラス名、タグ名などを取得し、Sizzleを通じてDOMオブジェクトを直接取得し、jQueryオブジェクトにパッケージ化して返します

判断はinit内のセレクターの種類を決定することです

パッケージ化

パッケージ化については何度も話しました。はい、jQuery オブジェクトは実際には擬似配列です。これはその設計の工夫でもあります。配列を使用してデータを保存すると、$( などのより多くのデータ処理を実行しやすくなります。 "div").css("color": "red") とすると、jQuery が暗黙的に反復処理を自動的にサポートし、ページ上のすべての div に含まれるテキストの色を赤に設定します。これは単純で粗雑なコード行です。 Ape のお気に入り

外部拡張拡張子

jQuery のコア構造が処理された後は、基本的に外部で使用できますが、jQuery 独自のスケーラビリティを含め、jQuery に基づいたプラグインを実装できることがわかっています。二次開発を容易にするために外部へのインターフェースを提供する必要があるため、extend メソッドを用意しています

単純な拡張は、それを組み込むことです。例えば:

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

静的メソッドと$.each などの各メソッドのインスタンスメソッドを使用することもできます。 $("div").each を使用することもできます

その後、いくつかの jQuery メソッドは extend をベースに拡張されます。 もちろん、これを使用することもできます。 jQuery 拡張メソッド自体

DOM 操作

DOM 操作も jQuery の大きな特徴は、非常に使いやすいため、考えられるすべての使用シナリオをカバーし、一般的に使用される追加、削除、確認、変更のメソッドを完了することです。

html()/css()/val( ) などのクラスを取得および設定する jQuery のメソッド。これらのパラメーターは、値を取得するために渡されるのではなく、値を設定するために渡されます

##チェーン プログラミング

jQuery はチェーン プログラミングをサポートしています。必要に応じて、すべての関数を 1 行のコードで記述することができます。その方法は次のとおりです。プロトタイプ チェーンを変更するすべてのメソッドは、現在の this オブジェクトを独自の属性として保存します。そして、end メソッドを呼び出して上位レベルのチェーンを見つけて、チェーン操作を実行できるようにすることができます

イベント操作

jQuery イベント操作は通常、クリック クラス (mouseover/mouseleave など) などを通じて使用できます。ただし、 click クラスの実装では が呼び出されます

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 中国語 Web サイトの他の関連記事を参照してください。