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」で終わるすべての要素を選択します。

セレクター インスタンス

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 元素
$("p.intro")	所有 class="intro" 的 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的第一个元素
$("ul li:first")	每个 的第一个 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 元素中的所有 class="head" 的元素

コンテンツの取得/設定 - 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;
 });
});