HTML／CSSを操るjQueryの命令
jQueryを利用したスクリプトは、
- どのHTMLの要素を操作するか指定する「セレクター」
- 操作する内容（命令）
今回はready関数を使い、ページの読み込みが終わったタイミングで
HTML/CSSを操作する方法を使い、jQueryの命令部分を学んでいきます。
<script type="text/javascript">
$(function(){
$("セレクター").jQueryの命令
});
</script>
containsフィルター／hasフィルター
「containsフィルター」は、特定の文字列が含まれている要素を、
「hasフィルター」は特定の要素が含まれている要素を選択できる。
<script type="text/javascript">
$(function(){
$("li:contains('サンプル')").css("color","#9cf");
$("li:has(strong)").css("color","#6F9");
})
</script>
<ul> <li><strong>テキスト1</strong>テキスト1テキスト1</li> <li>テキスト2テキスト2テキスト2</li> <li>テキスト3テキスト3テキスト3</li> <li>サンプル1サンプル1サンプル1</li> </ul>
「サンプル」という文字列が含まれる4番目のli要素が#9cfの色になり、
strong要素を含む1番目の要素が#6f9の色になる。
- テキスト1テキスト1テキスト1
- テキスト2テキスト2テキスト2
- テキスト3テキスト3テキスト3
- サンプル1サンプル1サンプル1
parentフィルター
「parentフィルター」は、何らかの子要素やテキストを含む要素を選択できるフェルター。
CSS3セレクターで紹介したempty疑似クラスと逆のフィルター。
<script type="text/css">
$(function(){
$("li:parent").css("color","#9cf");
});
</script>
<ul> <li>テキスト1テキスト1テキスト1</li> <li></li> <li>テキスト2テキスト2テキスト2</li> <li></li> </ul>
空のli要素以外のli要素、つまり1番目と3番目が#9cfの色になる。
- テキスト1テキスト1テキスト1
- テキスト2テキスト2テキスト2
headerフィルター
headerフィルターは、h1〜h6までのheading要素をまとめて選択できるフィルター。
<script type="text/javascript">
$(function(){
$(":header").css("color","#9cf");
});
</script>
<h1>テキスト1テキスト1テキスト1</h1> <p>テキスト2テキスト2テキスト2</p> <h6>テキスト3テキスト3テキスト3</h6>
1行目のh1要素、3行目のh6要素が#9cfの色になる。
テキスト1テキスト1テキスト1
テキスト2テキスト2テキスト2
テキスト3テキスト3テキスト3
eqフィルター／gtフィルター／ltフィルター
セレクターの中から特定の順番の要素を「eqフィルター」(equal)で、
特定の要素より前の要素を「ltフィルター」(less than)で、
後の要素を「gtフィルター」(greater than)で選択できる。
要素は登場する順番を数値で指定する。
JavaScriptは0から数値を数えるため、
1番目の要素の場合は「0」、2番目は「1」、３番目は「2」…といった具合に
[実際の数字]-1と指定する。
<script type="text/javascript">
$(function(){
$("li:lt(2)").css("color","#9cf");
$("li:eq(2)").css("color","#6F9");
$("li:gt(2)").css("color","#99F ");
})
</script>
<ul>
<li>テキスト1テキスト1テキスト1</li>
<li>テキスト2テキスト2テキスト2</li>
<li>テキスト3テキスト3テキスト3</li>
<li>テキスト4テキスト4テキスト4</li>
</ul>
2番目よりも前のli要素(ltフィルター)、0,1番目のli要素が#9cfの色になる。
2番目(2+1)のli要素(eqフィルター)が、#6F9の色になる、
2番目(2+1)よりも後の要素(gtフィルター)の色は#F9fになる。
- テキスト1テキスト1テキスト1
- テキスト2テキスト2テキスト2
- テキスト3テキスト3テキスト3
- テキスト4テキスト4テキスト4
