jQuery の $ 記号のいくつかの使用法について話しましょう

jQuery は、JavaScript プログラミングを簡素化し、HTML ドキュメントの走査と操作、イベント処理、アニメーション、および Ajax 操作を簡素化する、非常に人気のある JavaScript ライブラリです。

jQuery$ シンボルは、最もよく使用される関数の 1 つです。さまざまな用途がありますが、この記事ではその一部を紹介します。

1. Selector

jQuery$ シンボルは、要素を選択するためのセレクターとして使用できます。 CSS セレクターに $ 記号を渡すと、そのセレクターに一致するすべての要素の jQuery オブジェクトが返されます。たとえば、$("div") は、ページ内のすべての div の jQuery オブジェクトを返します。特定の要素を選択する場合は、CSS セレクターを ID やクラス名などの他のセレクターと組み合わせて使用​​できます。

例:

//选择class为example的元素
$(".example")

//选择id为foo的元素
$("#foo")

//选择带有名为"data_role"属性的所有元素
$("[data-role]")

//选择第一个p元素
$("p:first")

2. イベント処理

jQuery$ 関数によるイベントの処理は非常に簡単です。イベント ハンドラーは、on() 関数を使用して登録できます。たとえば、次のコードはボタンのクリック イベントでボタンのテキストを変更します。 非常に便利です。たとえば、text() 関数を使用して要素のテキスト コンテンツを取得または設定できます。

//选中按钮元素
var button = $("button");

//注册点击事件处理函数
button.on("click", function() {
  button.text("Clicked!");
});

また、append() 関数を使用して要素をドキュメントに追加することもできます。

3. //获取id为foo的元素文本内容
   console.log($("#foo").text());
   
   //将id为foo的元素文本内容设置为“Hello World！”
   $("#foo").text("Hello World!");

アニメーション効果

jQuery では、アニメーション効果を使用して要素のプロパティを変更することもできます。たとえば、animate() 関数を使用して、要素の位置、サイズ、色、その他の属性を変更できます。

//创建一个新的div元素
var newDiv = $("<div></div>");

//将新元素添加到body中
$("body").append(newDiv);

このコードは、「低速」速度を使用して要素を右に 10 ピクセル移動します。
4. 概要

上記は、jQuery$ 関数のいくつかの使用法です。 jQuery を使用すると、セレクター、イベント処理、要素操作、アニメーション効果を通じて JavaScript プログラミングが非常に簡単になります。これまで jQuery を使用したことがない場合は、ぜひ試してみることをお勧めします。

以上がjQuery の $ 記号のいくつかの使用法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。