jQuery APIリファレンスDOM要素:属性フィルター
- [attribute]〔指定した属性を持っている要素をすべてを選択〕
- [attribute=value]〔指定した属性と値を持っている要素をすべて選択〕
- [attribute!=value]〔指定した属性の値が指定した値でない要素をすべて選択〕
- [attribute^=value]〔指定した属性を持っており、その属性の値が指定した値で始まる要素をすべて選択〕
- [attribute$=value]〔指定した属性を持っており、その属性の値が指定した値で始まる要素をすべて選択〕
- [attribute*=value]〔指定した属性を持っており、その属性の値に指定した値が含まれる要素をすべて選択〕
- [attributeFilter1][attributeFilter2][attributeFilterN] 〔指定した属性フィルターにマッチする要素をすべて選択〕
[attribute]
指定した属性を持っている要素をすべてを選択
2009/2/27
指定した属性を持っている要素をすべてを選択します。
jQuery v1.2では、属性名の前の「@」をつけないでください。
第1引数attributeには、属性の名前を指定します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素:属性フィルター:[attribute]の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#sample div[id]").one("click", function(){ var idString=$(this).text()+" = "+$(this).attr("id"); $(this).text(idString).css("color","red");; }); }); </script> </head> <body> <div id="wrap"> <h1>DOM要素:属性フィルター:[attribute]の使用例 | jQuery</h1> <p>▼ID名のあるdiv要素をクリックすると、その要素のid名を表示します。</p> <!-- CODE --> <div id="sample"> <div>IDなし</div> <div id="hey">IDあり</div> <div id="there">IDあり</div> <div>IDなし</div> </div> <!-- CODE / --> </div> </body> </html>
[attribute=value]
指定した属性と値を持っている要素をすべて選択
2009/2/27
指定した属性と値を持っている要素をすべて選択します。
第1引数attributeには、属性の名前を指定します。
第2引数valueには、attributeに指定した属性の値を指定します。
値に「]」のような文字を含んでいる場合は、引用符で括ってください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素:属性フィルター:[attribute=value]の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("input[name='newsletter']").next().text(" is news letter").css("background", "yellow"); }); </script> </head> <body> <div id="wrap"> <h1>DOM要素:属性フィルター:[attribute=value]の使用例 | jQuery</h1> <p>▼name属性の値が「newsletter」のinput要素の兄弟要素のspan要素のテキストを「 is news letter」に変更し背景色を黄色にします。</p> <!-- CODE --> <p> <input type="radio" name="newsletter" value="Hot Fuzz" /> <span>name?</span> </p> <p> <input type="radio" name="newsletters" value="Cold Fusion" /> <span>name?</span> </p> <p> <input type="radio" name="accept" value="Evil Plans" /> <span>name?</span> </p> <!-- CODE / --> </div> </body> </html>
チェックボックスの全選択・全解除、選択を逆にする
参照:jQuery Checkboxes: Select All, Select None, and Invert Selection
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素:属性フィルター:[attribute=value]の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ /* 全選択 */ $("a[href='#select_all']").click( function() { $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', true); return false; }); /* 全解除 */ $("a[href='#select_none']").click( function() { $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', false); return false; }); /* 選択を逆にする */ $("a[href='#invert_selection']").click( function() { $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").each( function() { $(this).attr('checked', !$(this).attr('checked')); }); return false; }); }); </script> </head> <body> <div id="wrap"> <h1>DOM要素:属性フィルター:[attribute=value]の使用例 | jQuery</h1> <h2>チェックボックスの全選択・全解除、選択を逆にする</h2> <p>参照:<a href='http://abeautifulsite.net/notebook/50'>jQuery Checkboxes: Select All, Select None, and Invert Selection</a></p> <!-- CODE --> <p> <a rel="group_1" href="#select_all">全選択</a> | <a rel="group_1" href="#select_none">全解除</a> | <a rel="group_1" href="#invert_selection">選択を逆にする</a> </p> <fieldset id="group_1"> <legend>グループ1</legend> <p> <label for="c1"><input type="checkbox" id="c1" name="numbers[]" value="0" /> 項目1 <label for="c2"><input type="checkbox" id="c2" name="numbers[]" value="1" /> 項目2 <label for="c3"><input type="checkbox" id="c3" name="numbers[]" value="2" /> 項目3 <label for="c4"><input type="checkbox" id="c4" name="numbers[]" value="3" /> 項目4 <label for="c5"><input type="checkbox" id="c5" name="numbers[]" value="4" /> 項目5 </p> <p> <label for="c6"><input type="checkbox" id="c6" name="numbers[]" value="5" /> 項目6 <label for="c7"><input type="checkbox" id="c7" name="numbers[]" value="6" /> 項目7 <label for="c8"><input type="checkbox" id="c8" name="numbers[]" value="7" /> 項目8 <label for="c9"><input type="checkbox" id="c9" name="numbers[]" value="8" /> 項目9 <label for="c10"><input type="checkbox" id="c10" name="numbers[]" value="9" />項目10 </p> </fieldset> <!-- CODE / --> </div> </body> </html>
[attribute!=value]
指定した属性の値が指定した値でない要素をすべて選択
2009/2/27
指定した属性の値が指定した値でない要素をすべて選択します。
jQuery v1.3以前は、セレクタの動作が異なります。
jQuery v1.3以前では、指定した属性を持っていない要素か、指定した属性の値が指定した値でない要素にマッチします。
機能としては、:not([attr=value])
と同じです。
第1引数attributeには、属性の名前を指定します。
第2引数valueには、attributeに指定した属性の値を指定します。
値に「]」のような文字を含んでいる場合は、引用符で括ってください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素:属性フィルター:[attribute!=value]の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("input[name!='newsletter']").next().text(" is not news letter").css("background", "yellow"); }); </script> </head> <body> <div id="wrap"> <h1>DOM要素:属性フィルター:[attribute!=value]の使用例 | jQuery</h1> <p>▼name属性の値が「newsletter」でないinput要素の兄弟要素のspan要素のテキストを「 is not news letter」に変更し背景色を黄色にします。</p> <!-- CODE --> <p> <input type="radio" name="newsletter" value="Hot Fuzz" /> <span>name?</span> </p> <p> <input type="radio" name="newsletters" value="Cold Fusion" /> <span>name?</span> </p> <p> <input type="radio" name="accept" value="Evil Plans" /> <span>name?</span> </p> <!-- CODE / --> </div> </body> </html>
[attribute^=value]
指定した属性を持っており、その属性の値が指定した値で始まる要素をすべて選択
2009/2/27
指定した属性を持っており、その属性の値が指定した値で始まる要素をすべて選択します。
第1引数attributeには、属性の名前を指定します。
第2引数valueには、attributeに指定した属性の値を指定します。
値に「]」のような文字を含んでいる場合は、引用符で括ってください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素:属性フィルター:[attribute^=value]の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("input[name^='news']").val("news here!"); }); </script> </head> <body> <div id="wrap"> <h1>DOM要素:属性フィルター:[attribute^=value]の使用例 | jQuery</h1> <p>▼name属性の値が「news」で始まるinput要素の入力欄に「news here!」を挿入します。</p> <!-- CODE --> <p> <input name="newsletter" /> <input name="milkman" /> <input name="newsboy" /> </p> <!-- CODE / --> </div> </body> </html>
指定したアンカーへスムーズにスクロール
指定したアンカーまで、スムーズにアニメーションしながらスクロールします。
参照:jQueryでサイト内リンクを使ってSmoothなScrollをする方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素:属性フィルター:[attribute^=value]の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("a[href^='#']").click(function() { var hash = this.hash; $($.browser.safari ? 'body' : 'html') .animate({scrollTop: $(hash).offset().top}, 3000, "swing"); return false; }); }); </script> </head> <body> <div id="wrap"> <h1><a href='http://www.hieu.co.uk/ImageSwitch/'>jQuery.ImageSwitch</a> | 設置サンプル</h1> <p>参照:<a href='http://hisasann.com/housetect/2009/03/jquerysmoothscroll.html'>jQueryでサイト内リンクを使ってSmoothなScrollをする方法</a></p> <!-- CODE --> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> ▼<br> <p style="text-align:right"> <a href="#wrap">▲ページの先頭へ</a> </p> <!-- / CODE --> </div> </body> </html>
[attribute$=value]
指定した属性を持っており、その属性の値が指定した値で始まる要素をすべて選択
2009/2/27
指定した属性を持っており、その属性の値が指定した値で終わる要素をすべて選択します。
第1引数attributeには、属性の名前を指定します。
第2引数valueには、attributeに指定した属性の値を指定します。
値に「]」のような文字を含んでいる場合は、引用符で括ってください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素:属性フィルター:[attribute$=value]の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("input[name$='letter']").val("a letter"); }); </script> </head> <body> <div id="wrap"> <h1>DOM要素:属性フィルター:[attribute$=value]の使用例 | jQuery</h1> <p>▼name属性の値が「letter」で終わるinput要素の入力欄に「a letter」を挿入します。</p> <!-- CODE --> <p> <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> </p> <!-- CODE / --> </div> </body> </html>
「target='_blank'」を使用せずに別窓表示する
▼class名が「external」で終わるa要素のリンク先を別窓で開きます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素:属性フィルター:[attribute$=value]の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('a[class$="external"]').click(function(){ this.target="_blank"; }); }); </script> <!-- CSS --> <style type="text/css"> a.external { padding-right:16px; background:transparent url(/content/img/icon/external.gif) no-repeat right center; } </style> </head> <body> <div id="wrap"> <h1>DOM要素:属性フィルター:[attribute$=value]の使用例 | jQuery</h1> <p>▼class名が「external」で終わるa要素のリンク先を別窓で開きます。</p> <!-- CODE --> <ul> <li><a href="http://www.google.co.jp/">Googleを同窓表示</a></li> <li><a href="http://www.google.co.jp/" class="external">Googleを別窓表示(class="external")</a></li> </ul> <!-- CODE / --> </div> </body> </html>
[attribute*=value]
指定した属性を持っており、その属性の値に指定した値が含まれる要素をすべて選択
2009/2/27
指定した属性を持っており、その属性の値に指定した値が含まれる要素をすべて選択します。
第1引数attributeには、属性の名前を指定します。
第2引数valueには、attributeに指定した属性の値を指定します。
値に「]」のような文字を含んでいる場合は、引用符で括ってください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素:属性フィルター:[attribute*=value]の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("input[name*='man']").val("has man in it!"); }); </script> </head> <body> <div id="wrap"> <h1>DOM要素:属性フィルター:[attribute*=value]の使用例 | jQuery</h1> <p>▼name属性の値に「man」を含むinput要素にテキストを値として設定します。</p> <!-- CODE --> <p> <input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" /> </p> <!-- CODE / --> </div> </body> </html>
[attributeFilter1][attributeFilter2][attributeFilterN]
指定した属性フィルターにマッチする要素をすべて選択
2009/2/27
指定した属性フィルターにマッチする要素をすべて選択します。
第1引数attributeFilter1には、属性フィルターを指定します。
第2引数attributeFilter2には、さらに選択を絞る属性フィルターを指定します。
第3引数attributeFilterNには、必要に応じて属性フィルターを指定します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>DOM要素:属性フィルター:[attributeFilter1][attributeFilter2][attributeFilterN]の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("input[id][name$='man']").val("only this one"); }); </script> </head> <body> <div id="wrap"> <h1>DOM要素:属性フィルター: [attributeFilter1][attributeFilter2][attributeFilterN]の使用例 | jQuery</h1> <p>▼id属性の値とname属性の値が「man」で終わるinput要素に値を設定します。</p> <!-- CODE --> <p> <input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" /> </p> <!-- CODE / --> </div> </body> </html>