【jQuery】セレクターを使い、要素のスタイルを指定する

jQueryで処理するには、以下のように記述します。

<script>
$(document).ready(function(){
});
</script>

セレクタの書き方はCSSと同じです。

$('要素名')
$('#id名')
$('.class名')

セレクタを指定し、特定の要素にスタイルを上書きする。

実際に要素に当てられているスタイルを書き換えます。
　

実行例（ソース）

様々な例を実行してみます。

子要素に対して

<div name="test">
<p>これはdiv要素の子要素</p>
</div>
<p>これはp要素</p>

<script>
$(document).ready(function(){
  $('div').css('color','#f00');
});

</script>

結果：
f:id:game-web-design:20141006124811p:plain

name属性に対して

<div name="test">
<p>これはname属性"test"の子要素</p>
<p>これはname属性"test"の子要素</p>
</div>
<div name="demo">
<p>これはname属性"demo"の子要素</p>
<p>これはname属性"demo"の子要素</p>
</div>

<script>
$(document).ready(function(){
  $('[name=test]').css('color','#f00');
});

</script>

結果：
f:id:game-web-design:20141006124820p:plain

id属性に対して

<div id="test">
<p>これはid属性"test"の子要素</p>
<p>これはid属性"test"の子要素</p>
</div>
<div id="demo">
<p>これはid属性"demo"の子要素</p>
<p>これはid属性"demo"の子要素</p>
</div>

<script>
$(document).ready(function(){
  $('#test').css('color','#f00');
});

</script>

結果：
f:id:game-web-design:20141006124831p:plain

class属性に対して

<div class="test">
<p>これはclass属性"test"の子要素</p>
<p>これはclass属性"test"の子要素</p>
</div>
<div class="demo">
<p>これはclass属性"demo"の子要素</p>
<p>これはclass属性"demo"の子要素</p>
</div>

<script>
$(document).ready(function(){
  $('.test').css('color','#f00');
});

</script>

結果：
f:id:game-web-design:20141006124856p:plain

すべてに対して

<div class="test">
<p>これはclass属性"test"の子要素</p>
<p>これはclass属性"test"の子要素</p>
</div>
<div id="demo">
<p>これはid属性"demo"の子要素</p>
<p>これはid属性"demo"の子要素</p>
</div>

<script>
$(document).ready(function(){
  $('*').css('color','#f00');
});

</script>

結果：
f:id:game-web-design:20141006124907p:plain

要素もしくは、要素、idまたはclassに対して

<div><p>div p</p></div>
<p class="test">p.test</p>
<p>p<p>

<script>
$(document).ready(function(){
  $('div,.test').css('color','#f00');
});

</script>

結果：
f:id:game-web-design:20141006125659p:plain

idまたはclassの子要素に対して

<div id="test">
<div>#test div</div>
<p>#test p</p>
</div>

<script>
$(document).ready(function(){
  $('#test div').css('color','#f00');
});
</script>

結果：
f:id:game-web-design:20141006124935p:plain

idまたはclassの直の子要素全部（子セレクターを使う）

<div id="test">
<div>#test div</div>
<p>#test p</p>
<div>#test div</div>
<div><p>#test div p</p></div>
</div>

<script>
$(document).ready(function(){
  $('#test > p').css('color','#f00');
});
</script>

結果：
f:id:game-web-design:20141006124946p:plain

idまたはclassの子要素にあたるidまたはclassに対して

<div class="test1">
<div class="test2">#test1 div.test2</div>
<p class="test2">#test1 p.test2</p>
<div>#test1 div</div>
<p>#test1 p</p>
</div>

<script>
$(document).ready(function(){
  $('.test1 .test2').css('color','#f00');
});
</script>

結果：
f:id:game-web-design:20141006125203p:plain

idまたはclassを２つ持つ要素に対して

<div>
<div class="test demo">div div.test.demo</div>
<p class="test">div p.test</p>
<div class="demo">div div.demo</div>
<p class="test demo"> div p.test.demo</p>
</div>
<script>
$(document).ready(function(){
  $('.test.demo').css('color','#f00');
});
</script>

結果：
f:id:game-web-design:20141006125218p:plain

最初の要素に対して

<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$(document).ready(function(){
  $('p:first').css('color','#f00');
});
</script>

結果：
f:id:game-web-design:20141006125230p:plain

最後の要素に対して

<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$(document).ready(function(){
  $('p:last').css('color','#f00');
});
</script>

結果：
f:id:game-web-design:20141006125242p:plain

偶数目の要素に対して

JavaScriptなので0から始まります。

<div>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$(document).ready(function(){
  $('p:even').css('color','#f00');
});
</script>

結果：
f:id:game-web-design:20141006125252p:plain

奇数目の要素に対して

<div>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$(document).ready(function(){
  $('p:odd').css('color','#f00');
});
</script>