［アラフォプログラミング未経験］JavaScriptのライブラリ「jQuery」でHTML要素を操作する

今回は、jQueryを使って、HTMLのコード内の各要素を色々いじってみます。

変更したい部分を直接書き換えるんじゃなく、

jQueryで操作して変更させるというところを

理解できればなぁと思います。。。

目次

HTML要素を操作してみる

jQueryを使ってHTMLのテキストを書き換えてみます。

元のHTMLファイルがこちらです。

このタイトルやテキストを変更してみます。

main.js

 $(function() {
   $("#title").text("変更したタイトル");
   $("p").html("<strong>変更されたコンテンツ</strong>");
 });

ソースコードを保存したらブラウザでindex.htmlを更新してみましょう。

すると以下の画像のようにテキストが書き換わっています。

jQueryでは、以下のように記述することで要素を操作することができます。

HTML要素の操作

$("セレクタ").jQueryの命令();

jQueryの命令（メソッド）は引数を取ることもあります。

HTML要素の操作

$("セレクタ").jQueryの命令(引数);

今回の例ではjQueryの命令の中でも最もメジャーなtext()とhtml()を使いました。

この2つのメソッドはHTML要素のテキストを扱うメソッドです。

text()

text()を使うと、取得したHTML要素のテキストを書き換えることができます。

引数には書き換えたいテキストを文字列で指定します。

main.jsの2行目ではtext()を使ってテキストを書き換えています。

main.js

$("#title").text("変更したタイトル");

id属性の値がtitleのHTML要素のテキストを「変更したタイトル」
というテキストに書き換えることができました。

また、text()のように引数を与えずに使うとテキストの取得ができます。

html()

html()を使うと、取得したHTML要素のテキストをHTMLのタグを含むテキストに書き換えることが出来ます。

引数には書き換えたいHTML要素を文字列で指定します。

main.jsの3行目ではhtml()を使ってテキストをHTMLに書き換えています。

main.js

$("p").html("<strong>変更されたコンテンツ</strong>");

pタグのHTML要素のテキストをstrongタグで強調された「変更されたコンテンツ」
というHTMLに書き換えることができました。

また、text()メソッド同様html()と引数を省略するとhtmlの内容を取得することができます。

JavaScriptを実行するタイミング

main.jsの実行される処理は$(function() { ... }に囲まれています。

試しに$(function() { })を消して以下のようにしてみましょう。

main.js

$("#title").text("変更したタイトル");
$("p").html("<strong>変更されたコンテンツ</strong>");

変更を保存してページをリロードしてみると、テキストが書き換わっていません。

これはJavaScriptの実行されるタイミングが原因です。

main.jsはhead要素内で読み込んでいます。

head要素を読み込んだ時点ではbodyの読み込みが終わっていないため、

書き換えたいHTML要素を取得できなかったのです。

つまり、HTML要素が読み込み終わったタイミングで処理を実行する必要があります。

$(function() { ... })の中に記述することでHTML要素が

全て読み込み終わったタイミングで処理を実行してくれるようになります。

結構簡単なコードで、さくさく変えてくれるの助かりますね！

次はjQueryの目玉機能であるイベント駆動について、勉強してみます。。。