jQUery 属性セレクターの理解を深めるための jQuery 属性セレクターの簡単な例: コードをコピー コードは次のとおりです: <br>a{ <br>margin-right:20px; <br>} <br>ol{ <br>位置:相対; <br>幅:600ピクセル; <br>マージン左:400px; <br>} <br>dt{ <br>margin:10px; <br>高さ:100ピクセル; <br>背景色:#EAEAEA; <br>ボーダー:3ピクセルの点線のオレンジ色; <br>} <br>.showMessage{ <br>width:380px; <br>浮動小数点:左; <br>背景色:#D8D8D8; <br>ボーダー: 1 ピクセルの赤の点線; <br>} <br> <br>$(document).ready(function(){ <br>var subject = ""; <br>var description = ""; <br><br>//name|="value" <br>$ ("#attri1").bind("click",function(){ <br>var topValue=$("#attri1").offset().top; <br>subject = "属性にはプレフィックス セレクターが含まれています [name| ="value"]"; <br>describe = "指定された文字列と等しいか、その文字列で始まりハイフン (-) が続く値を持つ、指定された属性を持つ要素を選択します。"; <br>$(" a[hreflang|='en']").css("border","3px 点線緑"); <br>showMessage(subject,describe,topValue); <br>}); <br><br>/ /name*="value" <br>$("#attri2").bind("click",function(){ <br>var topValue=$("#attri2").offset().top; <br>subject = "属性にセレクターが含まれています [name*="value"]"; <br>describe = "指定された部分文字列を含む値を持つ指定された属性を持つ要素を選択します。"; *='男']" ).val( "その中に男がいる!" ); <br>showMessage(subject,describe,topValue); <br>}); <br><br>//name~=" value" <br>$("#attri3").bind("click",function(){ <br>var topValue=$("#attri3").offset().top; <br>subject = "属性には単語セレクターが含まれています [name~="value"]"; <br>describe = "スペースで区切られた、指定された単語を含む値を持つ指定された属性を持つ要素を選択します。"; <br>$( "input[name~='man']" ).val( "ミスター・マンが入っています!" ); <br>showMessage(subject,describe,topValue); <br>}); <br><br>//name$="value" <br>$("#attri4").bind("click",function(){ <br>var topValue=$("#attri4").offset ().top; <br>subject = "属性はセレクター [name$="value"]" で終了します。<br>describe = "指定された文字列で終わる値を持つ指定された属性を持つ要素を選択します。大文字と小文字は区別されます。"; <br>$( "input[name$='letter']" ).val( "a Letter" ); <br>showMessage(subject,describe,topValue); <br>}); <br><br>//name="value" <br>$("#attri5").bind("click",function(){ <br>var topValue=$("#attri5").offset( ).top; <br>subject = "Attribute Equals Selector [name="value"]"; <br>describe = "特定の値と完全に等しい指定された属性を持つ要素を選択します。"; $( "input[value='ホットファズ']" ).next().text( "ホットファズ" ); <br>showMessage(subject,describe,topValue); <br><br>//name$="value" <br>$("#attri6").bind("click",function(){ <br>var topValue=$("#attri6").offset ().top; <br>subject = "属性が等しくないセレクター [name!="value"]"; <br>describe = "指定された属性を持たないか、指定された属性を持っている要素を選択します特定の値ではありません。"; <br>$( "input[name!='ニュースレター']" ).next().append( "<b>; ニュースレターではありません</b>" ); <br> showMessage(件名,説明,トップ値); <br><br>//name$="value" <br>$("#attri7").bind("click",function(){ <br>var topValue=$("#attri7").offset ().top; <br>subject = "属性はセレクター [name^="value"] で始まります"; <br>describe = "指定された文字列で始まる値を持つ指定された属性を持つ要素を選択します。"; <br>$( "input[name^='news']" ).val( "ニュースはこちら!" ); <br>showMessage(subject,describe,topValue); <br><br>//name$="value" <br>$("#attri8").bind("click",function(){ <br>var topValue=$("#attri8").offset ().top; <br>subject = "属性セレクター [名前] があります"; <br>describe = "任意の値を持つ指定された属性を持つ要素を選択します。<br><b><font color= "red">id 要素を持つ div をクリックできます</font></b>"; <br>$( "div[id]" ).one( "click", function() { <br>var idString = $( this ).text() " = " $( this ).attr( "id" ); <br>$( this ).text( <br>showMessage); (件名,説明,トップ値); <br><br>//name$="value" <br>$("#attri9").bind("click",function(){ <br>var topValue=$("#attri9").offset ().top; <br>subject = "複数の属性セレクター [name="value"][name2="value2"]"; <br>describe = "指定されたすべての属性フィルターに一致する要素と一致します。"; 🎜>$( "input[id][name$='man']" ).val( "これのみ" ); <br>showMessage(subject,describe,topValue); <br><br><br>}); <br><br>function showMessage(subject,describe,topValue){ <br>$("#showMessage").html("<font color="red"><b>" subject "</ b></font><br>" description) <br>.addClass("showMessage").css("margin-top",topValue).hide().show(1000); <br>} <br><br> ja en- english <入力名="letterman2"> <入力名="letterman2"> <入力名="ジョブレター"> 名前? 値? 値? 名前はニュースレターです。 名前なし 名前は accept です IDなし ID には ID があります。 いいえ
