python-14日目まとめ(js)
jQueryセレクタ
前の章では、HTML要素の選択方法に関するいくつかの例を示します.
キーは、jQueryセレクタが効果を適用する要素をどのように正確に選択するかを学ぶことです.
jQuery要素セレクタと属性セレクタを使用すると、HTML要素をラベル名、属性名、またはコンテンツで選択できます.
セレクタを使用すると、HTML要素グループまたは単一の要素を操作できます.
HTML DOM用語:
セレクタを使用すると、DOM要素グループまたは単一のDOMノードを操作できます.
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」で終わる要素を選択します.
jQuery CSSセレクタ
jQuery CSSセレクタは、HTML要素のCSS属性を変更するために使用できます.
次の例では、すべてのp要素の背景色を赤に変更します.
$("p").css("background-color","red");jQueryセレクタ
セレクタ
≪インスタンス｜Instance｜emdw≫
選択
*
$("*")
すべての要素
#id
$("#lastname")
id=「lastname」の要素
.class
$(".intro")
すべてのclass=「intro」の要素
element
$("p")
すべての
要素
.class.class
$(".intro.demo")
すべてのclass=「intro」、class=「demo」の要素
:first
$("p:first")
最初の
要素
:last
$("p:last")
最後の
要素
:even
$("tr:even")
すべての偶数要素
:odd
$("tr:odd")
すべての奇数要素
:eq(index)
$("ul li:eq(3)")
リストの4番目の要素(indexは0から)
:gt(no)
$("ul li:gt(3)")
indexが3より大きい要素をリストします
:lt(no)
$("ul li:lt(3)")
indexが3未満の要素をリストします
:not(selector)
$("input:not(:empty)")
空でないすべてのinput要素
:header
$(":header")
すべてのタイトル要素
:animated
すべてのアニメーション要素
:contains(text)
$(":contains('W3School')")
指定した文字列を含むすべての要素
:empty
$(":empty")
サブ(要素)ノードのないすべての要素
:hidden
$("p:hidden")
すべての非表示の
要素
:visible
$("table:visible")
すべての表示されるテーブル
s1,s2,s3
$("th,td,.intro")
一致する選択を持つすべての要素
[attribute]
$("[href]")
hrefプロパティを持つすべての要素
[attribute=value]
$("[href='#']")
すべてのhrefプロパティの値が「#」に等しい要素
[attribute!=value]
$("[href!='#']")
すべてのhrefプロパティの値が「#」に等しくない要素
[attribute$=value]
$("[href$='.jpg']")
すべてのhrefプロパティの値には、「.jpg」で終わる要素が含まれます.
:input
$(":input")
すべての要素
:text
$(":text")
すべてのtype=「text」の要素
:password
$(":password")
すべてのtype=「password」の要素
:radio
$(":radio")
すべてのtype=「radio」の要素
:checkbox
$(":checkbox")
すべてのtype=「checkbox」の要素
:submit
$(":submit")
すべてのtype=「submit」の要素
:reset
$(":reset")
すべてのtype=「reset」の要素
:button
$(":button")
すべてのtype=「button」の要素
:image
$(":image")
すべてのtype=「image」の要素
:file
$(":file")
すべてのtype=「file」の要素
:enabled
$(":enabled")
アクティブなすべてのinput要素
:disabled
$(":disabled")
無効なすべてのinput要素
:selected
$(":selected")
選択されたすべてのinput要素
:checked
$(":checked")
選択したすべてのinput要素