jQueryでの要素の内容やCSSの書き換え・取得方法まとめ

jQueryはjavascriptコードを簡潔・簡単に扱えるようにしたjavascriptライブラリで、WordPressを始め多くのWebサイトで使われています。

jQueryを使った場合、要素の内容(テキストやHTML)や要素に適用されているCSSを簡単なスクリプトで書き換えすることが可能です。

ここではjQueryを使った要素内容の取得・書き換えの方法についてまとめて解説します。

jQueryの基本

jQueryではこのライブラリに属する関数を呼び出すのに$記号から始まる「$関数」を使います。

例えば空白を除去するtrim関数を呼び出すには次のように記述します。

$.trim(" JQUERY ");

$記号はjQueryという名前空間の代用なので「$」を「jQuery」に置き換えた次の書き方も可能です。

jQuery.trim(" JQUERY ");

この２つのどちらの書き方でも正しいです。

ただしWordPressの場合は「$」は使えず「jQuery」と略さず書く必要があるので注意してください。WordPressでjQueryでスクリプトが動かない場合は気を付けてください。

そして要素にアクセスするには次のように「$」または「jQuery」のカッコ内にCSSセレクタを書きます。

「box」というクラス名(class="box")の要素にアクセス

$(".box")

div要素の内で「box」というクラス名(class="box")の要素にアクセス

$("div.box")

「example」というID名(id="example")の要素にアクセス

$("#example")

このようにアクセスした要素に対して操作関数を呼び出すことで書き換えや内容の取得ができます。

要素内容の取得・書き換え方法

次の関数を要素に対して使用すると要素内容の取得や書き換えができます。

text関数

text関数で要素のHTMLタグを含まないテキストの取得・書き換えを行えます。

例えば次の要素があるとします。

<div id="example"><strong>jQuery</strong>でテキスト書き換え</div>

この要素のタグに含まれるテキストは「jQueryでテキスト書き換え」になります。strongタグなどのHTMLタグは含まれません。

この要素のテキストを取得するには要素に対してtext関数を実行するだけです。

var text = $("#example").text();

そしてテキストを設定したい場合はtext関数に書き換えたいテキストを渡してください。

$("#example").text("書き換えられたテキスト");

このように書くと要素の内容が「書き換えられたテキスト」で書き換えられます。

html関数

これはHTMLタグも含めた内容を取得・書き換えする関数です。

例えば次の要素があるとします。

<div id="example"><strong>jQuery</strong>でHTML書き換え</div>

この要素はブラウザでは次のように表示されます。

この要素でHTMLも含めた内容を取得するには要素に対してhtml関数を呼び出します。

var html = $("#example").html();

この場合html関数から返されるのは「<strong>jQuery</strong>でHTML書き換え」という文字列です。

また要素にHTMLをセットするには次のようにhtml関数にタグを含んだ文字列を渡します。

$("#example").html("書き換えられた<strong>HTML</strong>");

このように書くとタグは文字列でなくHTMLタグとして認識されて書き換えされるのでブラウザ上での表示は次のようになります。

css関数

css関数は要素のstyle属性や外部のCSSファイルにより適用されたCSSプロパティの取得や書き換えを行う関数です。

例えば次のような要素があるとします。

<div id="example" style="background-color: gray">jQueryでCSS書き換え</div>

style属性で背景色を灰色にしているのでブラウザ上では次のように表示されます。

この要素のbackgroundプロパティの値を取得するには要素に対して次のcss関数を呼び出します。

var bgcolor = $("#example").css("background-color");

この場合は「gray」という値が返ってきます。

次に要素にbackground-colorプロパティを書き換える場合は次のようにcss関数を呼び出します。

$("#example").css("background-color", "white");

このように書くのはCSSで「background-color: white;」と書くのと同じです。

また「"CSSプロパティ名": "値"」のペアを複数持つ連想配列をcss関数に渡すとまとめてスタイルを指定できます。例えば文字色と背景色を同時に換えたい場合は次のように書けます。

$("#example").css({ 
  "color": "red", 
  "background-color": "gray"
});

これは要素に対して「color: red; background-color: gray」というスタイルを適用するのと同じです。

まとめ

ここまでで紹介した要素の内容の取得・書き換えを行うのは次の３つの関数です。

• text関数
  要素のHTMLタグを含まないテキストの取得・書き換え
• html関数
  要素のHTMLタグを含めた内容の取得・書き換え
• css関数
  要素のCSSを取得・書き換え

以上jQeuryで要素の内容を取得・書き換えする方法について解説しました。実際はこれ単体で使うという事は少なくボタンクリックなどのイベントとともに使われることが多いです。