jQuery selector

[ˈdʒeɪˌkwɛri sɪˈlɛktər] ジェイクエリーセレクター

1. jQueryライブラリで使用されるHTML要素を選択するためのパターン。

jQueryで特定のHTML要素や要素のグループを識別し、操作するために使われる特殊な文字列や表現方法です。CSSセレクタの構文に基づいています。

$("#myButton").click(function() { /* ... */ }); (IDが "myButton" の要素がクリックされたときに、特定の処理を実行します。)

• $("#myButton"): IDが "myButton" であるHTML要素を選択します。
• .click(): 選択された要素に対してクリックイベントハンドラを割り当てます。
• function() { /* ... */ }: クリックイベントが発生したときに実行される関数です。

$(".item-list li").hide(); ("item-list" クラスを持つ要素内のすべての <li> 要素を非表示にします。)

• $(".item-list"): クラスが "item-list" であるHTML要素を選択します。
• li: その "item-list" 要素の子孫であるすべての <li> 要素を選択します。
• .hide(): 選択された要素を非表示にします。

$("div:first-child").css("color", "red"); (各親要素内で最初の子要素であるすべての <div> 要素の文字色を赤にします。)

• $("div:first-child"): 各親要素の最初の子要素であるすべての <div> 要素を選択します。
• .css("color", "red"): 選択された要素のCSSプロパティ "color" を "red" に設定します。

$("input[type='text']").val("Enter text here"); (タイプが "text" のすべての <input> 要素に "Enter text here" という値を設定します。)

• $("input[type='text']"): type属性の値が "text" であるすべての <input> 要素を選択します。
• .val("Enter text here"): 選択された <input> 要素のvalue属性を "Enter text here" に設定します。

$("a:has(img)").addClass("image-link"); (<img> 要素を含むすべての <a> 要素に "image-link" クラスを追加します。)

• $("a:has(img)"): 内部に <img> 要素を持つすべての <a> 要素を選択します。
• .addClass("image-link"): 選択された <a> 要素に "image-link" というクラスを追加します。

関連

• CSS selector
• DOM
• JavaScript
• HTML
• web development
• element selection
• jQuery