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には、属性の名前を指定します。
[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に指定した属性の値を指定します。
値に「]」のような文字を含んでいる場合は、引用符で括ってください。
[attribute=value]の使用例サンプルを見る
<!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
[attribute=value]の使用例サンプルを見る
<!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に指定した属性の値を指定します。
値に「]」のような文字を含んでいる場合は、引用符で括ってください。
[attribute!=value]の使用例サンプルを見る
<!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に指定した属性の値を指定します。
値に「]」のような文字を含んでいる場合は、引用符で括ってください。
[attribute^=value]の使用例サンプルを見る
<!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をする方法
[attribute^=value]の使用例サンプルを見る
<!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に指定した属性の値を指定します。
値に「]」のような文字を含んでいる場合は、引用符で括ってください。
[attribute$=value]の使用例サンプルを見る
<!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要素のリンク先を別窓で開きます。
[attribute$=value]の使用例サンプルを見る
<!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に指定した属性の値を指定します。
値に「]」のような文字を含んでいる場合は、引用符で括ってください。
[attribute*=value]の使用例サンプルを見る
<!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には、必要に応じて属性フィルターを指定します。
[attributeFilter1][attributeFilter2][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>