ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery の同等のネイティブ関数コード例 function_jquery
jQuery の同等のネイティブ関数コード例 function_jquery
- WBOYオリジナル
- 2016-05-16 17:33:241001ブラウズ
一般的に使用される jQuery メソッドとそれに相当するネイティブ メソッド (1、2、3) のパフォーマンスについていくつかのテストを行いました。
あなたの考えていることはわかります。 jQuery メソッドはブラウザの互換性などに対処する必要があるため、ネイティブ メソッドは明らかに jQuery メソッドより高速です。はい、全く同感です。この記事は jQuery の使用に反対して書いているわけではありませんが、最新のブラウザをターゲットにしている場合は、ネイティブ メソッドを使用するとパフォーマンスが大幅に向上します。
多くの開発者は、使用する jQuery メソッドのほとんどがネイティブ メソッドやより軽量なメソッドに置き換えられることを認識していません。以下は、一般的に使用される jQuery メソッドとそれらのネイティブ同等メソッドを示すコード例です。
翻訳者注: 以下のネイティブ メソッドの一部は HTML5 によって参照されており、一部のブラウザでは使用できない場合があることに注意してください。
Selector
jQuery の中核の 1 つは、DOM 要素を簡単に取得できることです。 CSS 選択文字列を入力して、一致する要素を取得するだけです。しかし、ほとんどの場合、単純なネイティブ コードで同じ効果を実現できます。
コードをコピー コードは次のとおりです:
//----すべての div を取得ページの - --------
/* jQuery */
$("div")
/* ネイティブ*/
document.getElementsByTagName("div")
//- ---指定されたクラスのすべての要素を取得します--------
/* jQuery */
$(".my-class")
/* ネイティブ* /
document .querySelectorAll(".my-class")
/* 高速なネイティブ メソッド*/
document.getElementsByClassName("my-class")
//----要素を取得しますCSS の選択 - ---------
/* jQuery */
$(".my-class li:first-child")
/* ネイティブ*/
ドキュメント。 querySelectorAll(" .my-class li:first-child")
//----指定された clsss の最初の要素を取得します----
/* jQuery */
$(". my-class ").get(0)
/*native*/
document.querySelector(".my-class")
翻訳者注: 実はここにはいくつか問題があります, document.querySelectorAll と jQuery セレクターには違いがあります。前者は NodeList を返しますが、後者は配列のようなオブジェクトを返します。
DOM 操作
jQuery は、要素の挿入や削除などの DOM 操作にも頻繁に使用されます。ネイティブ メソッドを使用してこれらの操作を実行することもできますが、これには追加のコードを記述する必要があります。もちろん、使いやすくするために独自のヘルパー関数を作成することもできます。以下に、ページに要素を挿入する例をいくつか示します。
コードをコピー コードは次のとおりです:
//---要素の挿入- ---
/* jQuery */
$(document.body).append("
" ); /* ネイティブアプローチが不十分*/
document.body.innerHTML = "
< /div> ;"; /* ネイティブ メソッドの改善*/
var frag = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = " myDiv";
var im = document.createElement("img");
im.src = "im.gif";
myDiv.appendChild(im);
frag.appendChild(myDiv) ;
document.body.appendChild(frag);
//----先行要素----
// 最後の行を除く
document.body.insertBefore(frag, document . body.firstChild);
CSS クラス
jQuery では、DOM 要素の CSS クラスを簡単に追加、削除、確認できます。幸いなことに、ネイティブ メソッドを使用して簡単に実行することもできます。
コードをコピー コードは次のとおりです:
// DOM 要素の参照を取得します
var el = document.querySelector(".main-content");
//---クラスを追加-----
/* jQuery */
$(el) .addClass("someClass ");
/* ネイティブ メソッド */
el.classList.add("someClass");
//---クラスを削除-----
/* jQuery */
$(el).removeClass("someClass");
/* ネイティブ メソッド*/
el.classList.remove("someClass"); --クラスですか---
/* jQuery */
if($(el).hasClass("someClass"))
/* ネイティブ メソッド*/
if(el. classList.contains(" someClass"))
CSS プロパティの変更 常に Javascript を通じて CSS プロパティを変更および取得します。これは、jQuery CSS 関数を使用するよりも簡単で高速です。必要なコードに矛盾はありません。
コードをコピー コードは次のとおりです:
// Get DOM element reference
var el = document.querySelector(".main-content");
//----Set CSS properties----
/ * jQuery */
$(el).css({
background: "#FF0000",
"box-shadow": "1px 1px 5px 5px red",
width: "100px" ,
height: "100px",
display: "block"
});
/* native*/
el.style.background = "#FF0000";
el .style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red ";
// Get DOM element reference
var el = document.querySelector(".main-content");
//----Set CSS properties----
/ * jQuery */
$(el).css({
background: "#FF0000",
"box-shadow": "1px 1px 5px 5px red",
width: "100px" ,
height: "100px",
display: "block"
});
/* native*/
el.style.background = "#FF0000";
el .style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red ";
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。