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つのパラメータがあります.選択した要素のリストにある現在の要素の下付き記号と、元の(古い)値です.次に、使用する文字列を関数の新しい値で返します.
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の
「.jpg」で終わる属性値を持つhref属性
$("div#intro .head")
id=「intro」の要素のすべてのclass=「head」の要素
コンテンツの取得/設定-text()、html()およびval()
前章の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;
});
});