JQueryセレクタベースの使用説明

1533 ワード

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")
各第1の
  • 要素
  • $("[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;
     });
    });