jQuery の同等のネイティブ関数コード例 function_jquery

一般的に使用される 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 ";

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

レポ：チームメイトを復活させる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

3週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7342

9

Java チュートリアル

1627

14

CakePHP チュートリアル

1352

46

Laravel チュートリアル

1265

25

PHP チュートリアル

1210

29

もっと見る