0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

jQueryのコードをECMAScript/JavaScriptのコードに変換する

Posted at

jQueryのコードをECMAScript/JavaScriptのコードに変換する

はじめに

以前の10年ほど前までは、JavaScriptと言えば、jQuery一択であった。
しかしこの10年で、Node.jsの登場により、Angular/React/Vue等の様々なフレームワークが活用されるようになった。
またJavaScriptの規格の一つであるECMAScriptもバージョンアップを行い、様々な機能が追加されている。
昨今ではjQueryもレガシーコードの一つとなりつつある。
そこで今回は、jQueryとECMAScript/JavaScriptのコードを変換するためのスペニットを以下に記載する。

コードスペニット

セレクタ

// jQuery
$("#name");
$(".item");

// ECMAScript/JavaScript
document.querySelector("#name");
document.getElementById("name");
document.querySelectorAll(".item");
document.getElementsByClassName("item");

表示/非表示

// jQuery
$("#name").show();
$(".item").hide();

// ECMAScript/JavaScript
// ID指定のみ可。クラス/タグ名の場合はループ処理を挟む必要有り
document.querySelector("#name").style.display = "block";
document.getElementById("name").style.display = "none";

非活性/活性

// jQuery
$("#name").prop("disabled", true);
$(".item").prop("disabled", false);

// ECMAScript/JavaScript
// ID指定のみ可。クラス/タグ名の場合はループ処理を挟む必要有り
document.querySelector("#name").disabled = true;
document.getElementById('name').disabled = false;

ループ処理

// jQuery
$(".item").each((index, element) => {
    ...
});

// ECMAScript/JavaScript
document.querySelectorAll('.item').forEach((element, index) => {
    ...
});

リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?