JQuery selector_jquery の使用の概要

jQuery 要素セレクターと属性セレクターを使用すると、タグ名、属性名、またはコンテンツによって HTML 要素を選択できます。

jQuery 要素セレクター: jQuery は CSS セレクターを使用して HTML 要素を選択します。

$("p") は

要素を選択します。

$("p.intro") は、class="intro" を持つすべての

要素を選択します。

$("p#demo") は、id="demo" を持つ最初の

要素を選択します。

jQuery 属性セレクター: jQuery は XPath 式を使用して、指定された属性を持つ要素を選択します。

$("[href]") は、href 属性を持つすべての要素を選択します。

$("[href='#']") は、href 値が「#」に等しいすべての要素を選択します。

$("[href!='#']") は、href 値が「#」に等しくないすべての要素を選択します。

$("[href$='.jpg']") は、href 値が「.jpg」で終わるすべての要素を選択します。

セレクター インスタンス

コンテンツの取得/設定 - text()、html()、val()

前の章と同じ 3 つの方法を使用してコンテンツを設定します。

• text() - 選択した要素のテキストコンテンツを設定または返します
• html() - 選択された要素のコンテンツ (HTML マークアップを含む) を設定または返します。
• val() - フォームフィールドの値を設定または返します
• attr() - 選択した要素

上記の 4 つの jQuery メソッド、text()、html()、val()、および attr() にもコールバック関数があります。コールバック関数は、選択された要素リスト内の現在の要素のインデックスと元の (古い) 値の 2 つのパラメータを取ります。次に、関数の新しい値として使用する文字列を返します。

$("#btn1").click(function(){
 $("#test1").text(function(i,origText){
 return "Old text: " + origText + " New text: Hello world ! (index: " + i + ")"; //return newText;
 });
});