初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

jQuery セレクタ

前回も書きましたがjQueryの文法は大きく分けて三つに分かれます。

どこの{なにを:どうする}

では三つの項目について順に触れていきたいと思います。

セレクタ

【どこの箇所(要素 / 属性)に対して操作したい】と指定するために使用するのが

セレクタ】です。
CSSと同様にid属性とclass属性 を設定すれば細かく場所を指定することができます。

セレクタで重要な要素と属性がすぐ分かるように
画像にまとめました。参考していただければ幸いです。

要素(element) =開始タグから終了タグで囲まれた範囲の事
f:id:bellsmarket:20150218210436p:plain

属性(attribute) =要素に情報を付加するもの
f:id:bellsmarket:20150218210441p:plain

それぞれのセレクタの記述方法と実行結果を、ページ内リンクを作りましたので 調べたいセレクタの参考にしてください。

HTML要素を指定

<script>
$(document).ready(function(){

//$('要素名')に対してstyle='color:#f00;'を設定
$('div').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<div name="test">
<p>これはdiv要素の子要素のp要素です。</p>
</div>
<p>これはp要素です。</p>
</body>
</html>

《実行結果》
f:id:bellsmarket:20150218211455p:plain

セレクタ一覧に戻る

name属性を指定

<script>
$(document).ready(function(){

//$('name属性=name属性値')に対してstyle='color:#f00;'を設定
$('[name="test"]').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<!-- name=testにのみ、赤色のスタイルが設定される -->
<div name="test">
<p>これはname属性”test”の子要素。</p>
<p>これはname属性”test”の子要素。</p>
</div>
<!-- name=demoには、赤色のスタイルが設定されない -->
<div name="demo">
<p>これはname属性”demo”の子要素。</p>
<p>これはname属性”demo”の子要素。</p>
</div>
</body>
</html>

f:id:bellsmarket:20150225221840p:plain

セレクタ一覧に戻る

id属性を指定

<script>
$(document).ready(function(){

//$('#id名')に対してstyle='color:#f00;'を設定
$('#test_id').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<!-- #test_idに対してのみ、赤色のスタイルが設定される -->
<div id="test_id">
<p>これはid属性”test_id”の子要素。</p>
<p>これはid属性”test_id”の子要素。</p>
</div>
<!-- #demoに対しては、赤色のスタイルが設定されない -->
<div id="demo">
<p>これはid属性”demo”の子要素。</p>
<p>これはid属性”demo”の子要素。</p>
</div>
</body>
</html>

f:id:bellsmarket:20150225223650p:plain

セレクタ一覧に戻る

class属性を指定

<script>
$(document).ready(function(){

//$('.class名')に対してstyle='color:#f00;'を設定
$('.test_class').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<!-- .test_classに対してのみ、赤色のスタイルが設定される -->
<div class="test_class">
<p>これはclass属性”test_class”の子要素。</p>
<p>これはclass属性”test_class”の子要素。</p>
</div>
<!-- #test_classに対しては、赤色のスタイルが設定されない -->
<div id="test_class">
<p>これはid属性”test_class”の子要素。</p>
<p>これはid属性”test_class”の子要素。</p>
</div>
</body>
</html>

f:id:bellsmarket:20150225221846p:plain

セレクタ一覧に戻る

すべての要素を指定

<script>
$(document).ready(function(){

//$('すべての要素')に対してstyle='color:#f00;'を設定
$('*').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<div>
<p>すべての要素が対象になる(div要素のなかのp要素)</p>
<p>すべての要素が対象になる(div要素のなかのp要素)</p>
</div>
<p>すべての要素が対象になる(p要素)</p>
<ul>
<li>すべての要素が対象になる(ul要素のなかのli要素)</li>
<li>すべての要素が対象になる(ul要素のなかのli要素)</li>
</ul>
</body>
</html>

f:id:bellsmarket:20150225221850p:plain

セレクタ一覧に戻る

要素名もしくはid名に一致する要素を指定

<script>
$(document).ready(function(){

//$('要素名, #id名')に対してstyle='color:#f00;'を設定
$('div, #test').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<!-- div要素もしくは#testに対してのみ、赤色のスタイルが設定される -->
<div>div要素</div>
<p id="test">p要素のid属性=”test”</p>
<!-- #no2に対しては、赤色のスタイルが設定されない -->
<p id="no2">p要素のid属性=”no2”</p>
</body>
</html>

f:id:bellsmarket:20150225221858p:plain

セレクタ一覧に戻る

id名の子である特定の要素を指定

<script>
$(document).ready(function(){

//$('#id名 要素名')に対してstyle='color:#f00;'を設定
$('#test div').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<div id="test">
<!-- #testの子要素divに対してのみ、赤色のスタイルが設定される -->
<div>これはid属性”test”の子要素(div要素)</div>
<p>これはid属性”test”の子要素(p要素)</p>
<div>これはid属性”test”の子要素(div要素)</div>
<p>これはid属性”test”の子要素(p要素)</p>
</div>
</body>
</html>

f:id:bellsmarket:20150225221901p:plain

セレクタ一覧に戻る

id名の子(直下)である特定の要素すべてに対して

セレクタを利用するこの記述が最も効率的

<script>
$(document).ready(function(){

//$('#id名 > 要素名')に対してstyle='color:#f00;'を設定
$('#test > p').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<div id="test">
<!-- #testの子要素pに対してのみ、赤色のスタイルが設定される -->
<div>これはid属性”test”の子要素(div要素)</div>
<p>これはid属性”test”の子要素(p要素)</p>
<div>これはid属性”test”の子要素(div要素)</div>
<p>これはid属性”test”の子要素(p要素)</p>
</div>
</body>
</html>

f:id:bellsmarket:20150225221903p:plain

セレクタ一覧に戻る

class名1の要素以下にあるclass名2の要素に対して

<script>
$(document).ready(function(){

//$('.Class名1 .Class名2')に対してstyle='color:#f00;'を設定
$('.test .demo').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<div class="test">
<!-- .testの子要素.demoに対してのみ、赤色のスタイルが設定される -->
<div class="demo">これはclass属性”test”の子要素(クラス名demo)</div>
<p>これはclass属性”test”の子要素(クラス名なし)</p>
<div class="demo">これはclass属性”test”の子要素(クラス名demo)</div>
<p>これはclass属性”test”の子要素(クラス名なし)</p>
</div>
</body>
</html>

f:id:bellsmarket:20150225221907p:plain

セレクタ一覧に戻る

class名1・class名2の両方をもつ要素に対して

<script>
$(document).ready(function(){

//$('.Class名1.Class名2')に対してstyle='color:#f00;'を設定
$('.test.demo').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<div>
<!-- .testと.demoが両方指定されている箇所に対してのみ、赤色のスタイルが設定される -->
<div class="test demo">これはdiv要素の子要素(クラス名:test、demo)</div>
<p class="test">これはdiv要素の子要素(クラス名:test)</p>
<div class="demo test">これはdiv要素の子要素(クラス名:demo、test)</div>
<p class="test">これはdiv要素の子要素(クラス名:test)</p>
</div>
</body>
</html>

f:id:bellsmarket:20150225221909p:plain

セレクタ一覧に戻る

最初の対象要素に対して

<script>
$(document).ready(function(){

//$('要素名:first')に対してstyle='color:#f00;'を設定
$('p:first').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<div>
<!-- p要素の一番最初の要素に対してのみ、赤色のスタイルが設定される -->
<p>1番目のp要素</p>
<p>2番目のp要素</p>
<p>3番目のp要素</p>
<p>4番目のp要素</p>
<p>5番目のp要素</p>
<p>6番目のp要素</p>
</div>
</body>
</html>

f:id:bellsmarket:20150225221912p:plain

セレクタ一覧に戻る

最後の対象要素に対して

<script>
$(document).ready(function(){

//$('要素名:last')に対してstyle='color:#f00;'を設定
$('p:last').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<div>
<!-- p要素の一番最初の要素に対してのみ、赤色のスタイルが設定される -->
<p>1番目のp要素</p>
<p>2番目のp要素</p>
<p>3番目のp要素</p>
<p>4番目のp要素</p>
<p>5番目のp要素</p>
<p>6番目のp要素</p>
</div>
</body>
</html>

f:id:bellsmarket:20150225221915p:plain

セレクタ一覧に戻る

対象要素名が複数ある場合、indexで偶数番目に対して

<script>
$(document).ready(function(){

//$('要素名:even')に対してstyle='color:#f00;'を設定
$('p:even').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<div>
<!-- p要素の偶数番目の要素に対してのみ、赤色のスタイルが設定される -->
<p>0番目のp要素</p>
<p>1番目のp要素</p>
<p>2番目のp要素</p>
<p>3番目のp要素</p>
<p>4番目のp要素</p>
<p>5番目のp要素</p>
</div>
</body>
</html>

f:id:bellsmarket:20150225221918p:plain

セレクタ一覧に戻る

対象要素名が複数ある場合、indexで奇数番目に対して

<script>
$(document).ready(function(){

//$('要素名:odd')に対してstyle='color:#f00;'を設定
$('p:odd').css('color','#f00'); //文字を赤色に

});
</script>
</head>
<body>
<div>
<!-- p要素の奇数番目の要素に対してのみ、赤色のスタイルが設定される -->
<p>0番目のp要素</p>
<p>1番目のp要素</p>
<p>2番目のp要素</p>
<p>3番目のp要素</p>
<p>4番目のp要素</p>
<p>5番目のp要素</p>
</div>
</body>
</html>

f:id:bellsmarket:20150225221922p:plain

セレクタ一覧に戻る

topへ戻る