jqueryネイティブの書き方

jQuery は、単純なコードを使用してさまざまな操作を完了できる優れた JavaScript ライブラリであり、DOM 操作とイベント処理をより便利にします。ただし、コード フレームワークに jQuery ライブラリが導入されていない場合や、よりきめ細かいコード制御が必要な場合など、一部の操作を完了するためにネイティブ JavaScript を使用する必要がある場合があります。この記事では、ネイティブ JavaScript を使用して jQuery の一般的な操作をシミュレートする方法を紹介します。

最初のステップは DOM 要素を取得することです。これは jQuery で最も一般的に使用される操作です。ネイティブ JavaScript では、querySelector と querySelectorAll を使用して要素を選択できます。 querySelector は、指定されたセレクターに一致する要素を選択でき、querySelectorAll は、指定されたセレクターに一致するすべての要素を選択して、NodeList オブジェクトを返すことができます。例:

// 选择 ID 为 "myButton" 的元素
const button = document.querySelector("#myButton");

// 选择所有 class 为 "myClass" 的元素
const elements = document.querySelectorAll(".myClass");

2 番目のステップは、要素の属性またはスタイルを変更することです。 JavaScript の setAttribute メソッドと removeAttribute メソッドを使用して要素の属性を追加または削除し、style オブジェクトを使用して要素のスタイルを設定できます。例:

// 设置元素的属性
button.setAttribute("disabled", true);

// 移除元素的属性
button.removeAttribute("disabled");

// 设置元素的样式
button.style.backgroundColor = "red";

3 番目のステップは、要素のテキストまたは HTML を設定することです。 textContent 属性と innerHTML 属性を使用して、要素のテキストまたは HTML を設定できます。例:

// 设置元素的文本
const element = document.querySelector("#myElement");
element.textContent = "Hello, world!";

// 设置元素的 HTML
element.innerHTML = "<strong>Hello, world!</strong>";

4 番目のステップは、イベント ハンドラーをバインドおよびバインド解除することです。 addEventListener メソッドと removeEventListener メソッドを使用して、イベント ハンドラーをバインドおよびバインド解除できます。例:

// 绑定事件处理程序
function handleClick(event) {
  console.log("Button clicked!");
}

button.addEventListener("click", handleClick);

// 解绑事件处理程序
button.removeEventListener("click", handleClick);

5 番目のステップは、要素のクラスを処理することです。 classList 属性を使用して、要素のクラスを追加、削除、切り替えできます。例:

const element = document.querySelector("#myElement");

// 添加类
element.classList.add("myClass");

// 移除类
element.classList.remove("myClass");

// 切换类
element.classList.toggle("myClass");

上記は、一般的に使用されるネイティブ JavaScript 操作の一部であり、jQuery に対応し、jQuery のいくつかの一般的な操作をシミュレートするために使用できます。 jQuery を使用すると開発がより便利になりますが、それでも JavaScript の操作を深く理解する必要があります。

以上がjqueryネイティブの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。