12/3(土):JQuery入門(5)
JQueryをマスターするための第一歩は「セレクター」。
5つの分類
そのうちの
4.CSSの属性セレクター
jQueryは要素の属性や属性値を条件に対象を絞り込める「属性セレクター」にも対応している。
それぞれ、[…]内に条件を記述して使う。
[attribute]
特定の属性を持つ要素を選択できるセレクターである。
html
<div id="test1">testtesttest</div> <div class="test1">testtesttest</div> <div id="test2">testtesttest</div> <div class="test2">testtesttest</div>
$(function(){ $("[class]").css("color","blue"); }
class属性を持つ要素(2番目と4番目のdiv要素)が青色になる。
[attribute='value']
特定の属性が、特定の値を持つ要素を選択できるセレクターである。
html
<div title="test1">testtest</div> <div title="test2">testtest</div> <div title="test3">testtest</div>
$(function(){ $("[title='test3']").css("color","blue"); }
title属性の値が「test3」の要素、つまり3番目のdiv要素が青色になる。
[attribute!='value']
特定の属性が、特定の値を持たない要素を選択できるセレクターである。
このセレクターは要素セレクターの後に続けて記述する必要がある。
html
<div title="test1">testtest</div> <div title="test2">testtest</div> <div title="test3">testtest</div>
$(function(){ $("div[title!='test3']").css("color","blue"); }
title属性の値が「test3」以外のdiv要素が青色になる。
[attribute^='value']
特定の属性の値が、特定の文字列で始まっている要素を選択できる。
html
<div title="test1">testtest</div> <div title="test2">testtest</div> <div title="3test">testtest</div>
$(function(){ $("[title^='t']").css("color","blue"); }
title属性の値が「t」で始まる要素、つまり1番目と2番目のdiv要素は青色になる。
[attribute$='value']
特定の属性の値が、特定の文字列で終わっている要素を選択できる。
html
<div title="test1">testtest</div> <div title="test2">testtest</div> <div title="test3">testtest</div>
$(function(){ $("[title$='2']").css("color","blue"); }
title属性の値が「2」で終わっている要素、つまり2番目のdiv要素が青色になる。
[attribute*='value']
特定の属性が特定の文字列を含んでいる要素を指定できる。
html
<div title="test1">testtest</div> <div title="test2">testtest</div> <div title="test3">testtest</div>
$(function(){ $("[title*='t1']").css("color","blue"); }
title属性の値に「t1」を含む要素、つまり、1番目のdiv要素が青色になる。
[attributeFilter1] [attributeFilter2]
複数の属性セレクターを同時に指定することもできる。
html
<div title="stesttest1">testtest</div> <div title="stest2">testtest</div> <div title="testtest3">testtest</div>
$(function(){ $("[title^='s'][title*='tt']").css("color","blue"); }
title属性の値が「s」から始まり、かつtitle属性の値に「tt」が含まれる要素、
つまり1番目のdiv要素が青色になる。
以上がCSSの属性セレクターである。
明日は5つの分類のうちの
JQueryの独自フィルターを勉強する。
毎日一時間コツコツと。
ちなみにこの学習は
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
で行なっている。