[JavaScript] jQuery のセレクタを用いて要素のスタイルを変更する
このページのタグ:[JavaScript] [jQuery]
jQuery のセレクタを用いて要素のスタイルを変更するコードを紹介します。

コード


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" src="jquery-2.0.3.js"></script>

  <script type="text/javascript">
    $(document).ready(function () {
      $("p").css("color", "blue");
      $("a").css("color", "green");
      $("a").css("text-decoration", "none");
    })
  </script>
</head>
<body>
  <p>テストページ</p>
  <a href="http://www.ipentec.com">リンク1</a><br/>
  <a href="http://www.ipentec.com">リンク2</a><br />
  <a href="http://www.ipentec.com">リンク3</a><br />
</body>
</html>

解説

セレクタ(要素の選択)

jQueryのセレクタは
jquery([セレクタ要素])
または
$([セレクタ要素])
の書式で記述できます。[セレクタ要素]は以下の値をとれます。セレクタの詳細はこちらの記事を参照してください。

CSSセレクタ

セレクタ名書式意味
要素セレクター$(要素名)特定のHTML要素
IDセレクター$(#ID名)特定のid属性を持つ要素
クラスセレクター$(.クラス名)特定のclass属性を持つ要素
子孫セレクター$(要素1 要素2)特定の要素の内側にある要素
ユニバーサルセレクター$(*)すべての要素
グループセレクター$(セレクター1)セレクター2

CSS2セレクタ

セレクタ名書式意味
子セレクター$(親要素名 > 子要素名)特定の要素の直下の子要素
隣接セレクター$(要素1 + 要素2)特定の要素の次の要素
first-child擬似クラス$(要素:first-child)同一の親要素内の最初の要素

CSS3セレクタ

セレクタ名書式意味
間接セレクター$(要素1 ~ 要素2)特定の要素の後に出現する要素
否定擬似クラス$(要素1:not(要素2))特定の要素内で指定した要素以外の要素
empty擬似クラス$(要素:empty")"子要素やテキストを含まない要素
nth-child擬似クラス$(要素:nth-child(番号))特定の要素内の指定した番号の要素
last-child擬似クラス$(要素:last-child)特定の要素内の最後の要素
only-child擬似クラス$(要素:only-child)指定した要素が1つだけ含まれる特定の要素

CSS属性セレクタ

セレクタ名書式意味
[attribute] $([属性名])特定の属性を持つ要素
[attribute='value']$([属性名='値'])特定の属性が指定した値を持つ要素
[attribute!='value']$(要素名[属性名!='値'])特定の属性が指定した値を持たない要素
[attribute^='value']$([属性名^='値'])特定の属性が特定した値で始まっている要素
[attribute$='value']$([属性名$='値'])特定の属性が特定した値で終わっている要素
[attribute*='value']$([属性名*='値'])特定の属性が特定した値を含んでいる要素
[attributeFilter1][attributeFilter2]$([属性セレクター1][属性セレクター2])複数の属性セレクターに該当する要素

jQuery独自フィルタ

セレクタ名書式意味
firstフィルター$(要素:first)同一の親要素内の最初の要素
lastフィルター$(要素:last)指定した要素の最後の要素
evenフィルター$(要素:even)指定した要素の偶数番目の要素
oddフィルター$(要素:odd)指定した要素の奇数番目の要素
eqフィルター$(要素:eq(番号))指定した番号の要素
gtフィルター$(要素:gt(番号))指定した番号より後の要素
ltフィルター$(要素:lt(番号))指定した番号より前の要素
headerフィルター$(要素:header)h1?h6までのheader要素
containsフィルター$(要素:contains(文字列))特定の文字列が含まれている要素
hasフィルター$(要素1:has(要素2))特定の要素が含まれている要素
parentフィルター$(要素:parent)子要素やテキストを含む要素

フォームフィルター

セレクタ名書式意味
.inputフィルター$(要素:input)input要素/textarea要素/select要素/button要素
:textフィルター$(要素:text)1行テキスト入力フォーム(type属性がtextのinput要素)
:passwordフィルター$(要素:password)パスワード入力フォーム(type属性がpassowordのinput要素)
:radioフィルター$(要素:radio)ラジオボタン(type属性がradioのinput要素)
:checkboxフィルター$(要素:checkbox)チェックボックス(type属性がcheckboxのinput要素)
:submitフィルター$(要素:submit)送信ボタン(type属性がsubmit/imagesのinput要素)
:imageフィルター$(要素:image)イメージボタン(type属性がimageのinput要素)
:resetフィルター$(要素:reset)リセットボタン(type属性がresetのinput要素)
:buttonフィルター$(要素:button)ボタン(button要素)
:fileフィルター$(要素:file)ファイル選択フォーム(type属性がfileのinput要素)
:checkedフィルター$(要素:checked)ラジオボタン、チェックボックスでチェックが入っている要素
:selectedフィルター$(要素:selected)セレクトボックスで選択されている要素

スタイルの変更

スタイルの変更はセレクタにより取得されたオブジェクトの.cssメソッドで変更できます。書式は以下になります。
jquery([セレクタ要素]).css("設定するCSS要素","設定値")
または
$([セレクタ要素]).css("設定するCSS要素","設定値")
今回のコードでは

 $("p").css("color", "blue");
 $("a").css("color", "green");
 $("a").css("text-decoration", "none");
のコードであるため。pタグのフォントカラーを青にし、aタグのフォントカラーを緑にし、アンダーラインを非表示にしています。

例:Pタグのフォントカラーを青にする場合

$(p).css("color","#0000FF");

例:heavyクラスのフォントをボールドにする場合

$(.heavy).css("font-weight","900");

実行結果

上記のHTMLファイルを表示すると下図の結果が得られます。pタグの部分は青色に代わり、リンクは緑色の文字列になりアンダーラインがなくなっています。

補足:正しく動作しないコード

正しく動作しないコードを紹介します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" src="jquery-2.0.3.js"></script>

  <script type="text/javascript">
    $("p").css("color", "blue");
    $("a").css("color", "green");
    $("a").css("text-decoration", "none");
  </script>
</head>
<body>
  <p>テストページ</p>
  <a href="http://www.ipentec.com">リンク1</a><br/>
  <a href="http://www.ipentec.com">リンク2</a><br />
  <a href="http://www.ipentec.com">リンク3</a><br />
</body>
</html>
上記のコードではスタイルは反映されません。原因はページがすべて読み込まれる前にJavaScirptが実行されてしまうためタグにスタイルが反映されないためです。


修正コード

下記のコードは正しく動作します。
ページの上部からコードが実行されていくため、反映されるタグより下部にjavascriptコードが記述されていればスタイルは反映されます。最初に紹介したコードは、ready()関数のイベントとして記述しているためページがすべて読み込まれたのちにコードが実行されるためhead部分にjavascriptを記述していてもスタイルは反映されます。
Head部分にJavaScriptのコードを記述したい場合は、明示的にページロード時にコードを実行することでスタイルの反映ができます。jQueryでページロード時にコードを実行する方法は「jQuery でページ表示時にjavascriptのコードを実行する」を参照してください。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" src="jquery-2.0.3.js"></script>

</head>
<body>
  <p>テストページ</p>
  <a href="http://www.ipentec.com">リンク1</a><br/>
  <a href="http://www.ipentec.com">リンク2</a><br />
  <a href="http://www.ipentec.com">リンク3</a><br />

  <script type="text/javascript">
    $("p").css("color", "blue");
    $("a").css("color", "green");
    $("a").css("text-decoration", "none");
  </script>
</body>
</html>

参考ページ

http://ascii.jp/elem/000/000/498/498710/index-2.html

登録日 :2013-12-26    最終更新日 :2014-06-05
このページのタグ:[JavaScript] [jQuery]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)