ホームページ > 記事 > ウェブフロントエンド > 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" 的元素 |
前の章と同じ 3 つの方法を使用してコンテンツを設定します。
上記の 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; }); });