jQuery：基本３
21 [attribute!='value']
特定の属性が、特定の値を持たない要素を選択できるセレクターです。
jQueryの練習 - p44~属性セレクタ：完成版にリンク
<script> $(document).ready(function(){ $("li[title!='first']").css('color','coral'); }); </script> </head> <body> <ul> <li title="first">どんどこどんどこどんどこどんどこ</li> <li title="second">どんどこどんどこどんどこどんどこ</li> <li title="third">どんどこどんどこどんどこどんどこ</li> <li title="fourth">どんどこどんどこどんどこどんどこ</li> </ul> </body>
22 [attribute^='value']
特定の属性の値が、特定の文字列で始まっている要素を選択できます。
jQueryの練習 - p44~属性セレクタ：完成版にリンク
<script> $(document).ready(function(){ $("[title^='f']").css('color','coral'); //first と fourth が選択されている。 }); </script> </head> <body> <ul> <li title="first">どんどこどんどこどんどこどんどこ</li> <li title="second">どんどこどんどこどんどこどんどこ</li> <li title="third">どんどこどんどこどんどこどんどこ</li> <li title="fourth">どんどこどんどこどんどこどんどこ</li> </ul> </body>
23 [attribute$='value']
特定の属性の値が、特定の文字列で終わっている要素を選択できます。
http://sanko333.webcrow.jp/0315_jQuery_basic//0315_jQuery_basic/23_attribute$_value.html：完成版にリンク
<script> $(document).ready(function(){ $("[title$='d']").css('color','aqua'); //second と third が選択されている。 }); </script> </head> <body> <ul> <li title="first">どんどこどんどこどんどこどんどこ</li> <li title="second">どんどこどんどこどんどこどんどこ</li> <li title="third">どんどこどんどこどんどこどんどこ</li> <li title="fourth">どんどこどんどこどんどこどんどこ</li> </ul> </body>
24 [attribute*='value']
特定の属性が、特定の文字列を含んでいる要素を指定できます。
jQueryの練習 - p44~属性セレクタ：完成版にリンク
<script> $(document).ready(function(){ $("[title*='ir']").css('color','aqua'); //first と third が選択されている。 }); </script> </head> <body> <ul> <li title="first">どんどこどんどこどんどこどんどこ</li> <li title="second">どんどこどんどこどんどこどんどこ</li> <li title="third">どんどこどんどこどんどこどんどこ</li> <li title="fourth">どんどこどんどこどんどこどんどこ</li> </ul> </body>
25 [attributeFilter1][attributeFilter2]
複数の属性セレクターを同時に指定することもできます。
jQueryの練習 - p48~属性セレクタ：完成版にリンク
<script> $(document).ready(function(){ $("[title^='f'][title*='th']").css('color','red'); //fourth が選択されている。 }); </script> </head> <body> <ul> <li title="first">どんどこどんどこどんどこどんどこ</li> <li title="second">どんどこどんどこどんどこどんどこ</li> <li title="third">どんどこどんどこどんどこどんどこ</li> <li title="fourth">どんどこどんどこどんどこどんどこ</li> </ul> </body>
26 jQueryの独自セレクター
firstセレクター lastセレクター
jQueryの練習 - p48~属性セレクタ：完成版にリンク
<script> $(document).ready(function(){ $('li:first').css('color','red'); $('li:last').css('color','blue'); }); </script> </head> <body> <ul> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> </ul> </body>
27 even(偶数)セレクター odd(奇数)セレクター
jQueryの独自セレクター even(偶数)セレクター odd(奇数)セレクター
JavaScriptは０から数えるので、最初の要素は０(偶数)になる。
jQueryの練習 - p48~属性セレクタ：完成版にリンク
<script> $(document).ready(function(){ $('li:even').css('color','red'); //偶数 ０を含む $('li:odd').css('color','blue'); }); </script> </head> <body> <ul> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> </ul> </body>
28 jQueryの独自セレクター
eq(equal)セレクター 特定の順番の要素
lt(less than)セレクター 特定の要素より前の要素
gt(greater than)セレクター 特定の要素より後の要素
jQueryの練習 - p50~属性セレクタ：完成版にリンク
<script> $(document).ready(function(){ $('li:lt(2)').css('color','red'); //0と1の要素が赤に $('li:eq(2)').css('color','violet'); //012 で、3番目の要素 $('li:gt(4)').css('color','aqua'); //01234 以降の要素に }); </script> </head> <body> <ul> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> <li>どんどこどんどこどんどこどんどこ</li> </ul> </body>
29 jQueryの独自セレクター
headerセレクター
h1～h6までのheading要素をまとめて選択できるセレクター
jQueryの練習 - p50~属性セレクタ：完成版にリンク
<script> $(document).ready(function(){ $(':header').css('color','red'); //0と1の要素が赤に }); </script> </head> <body> <h1>犬かな？</h1> <p>そうです。</p> <h2>犬かな？</h2> <p>そうです。</p> <h3>犬かな？</h3> <p>そうです。</p> <h4>犬かな？</h4> <p>そうです。</p> <h5>犬かな？</h5> <p>そうです。</p> <h6>犬かな？</h6> <p>そうです。</p> </body>
30 jQueryの独自セレクター
containsセレクター 特定の文字列が含まれている要素
hasセレクター 特定の要素が含まれている要素
jQueryの練習 - p50~属性セレクタ：完成版にリンク
<script> $(document).ready(function(){ $("li:contains('雨が')").css('color','red'); $('li:has(strong)').css('color','blue'); }); </script> </head> <body> <ul> <li><strong>雨が</strong>ふってきた</li> <li>雨がふってきた</li> <li>風がふいてきた</li> <li>風がふいてきた</li> <li>雨がふってきた</li> </ul> </body>
31 parentセレクター
empty擬似クラスの逆
中身のあるものに指定できる
http://sanko333.webcrow.jp/0315_jQuery_basic//0315_jQuery_basic/31_parent.html：完成版にリンク
<script> $(document).ready(function(){ $('li:parent').css('color','aqua'); }); </script> </head> <body> <ul> <li><strong>雨が</strong>ふってきた</li> <li>雨がふってきた</li> <li></li> <li>風がふいてきた</li> <li></li> </ul> </body>
