前回の記事「DOM (Document Object Model)とは」でJavaScriptを使ってHTMLの要素の操作を行いました。
しかし、今はJavaScriptをそのまま書く人は少ないと思います。
それはjQueryを使うほうが圧倒的に簡単だからです。
今回はjQueryを使った色々な要素の取得方法や、要素の操作方法について抜粋してお伝えします。
jQueryについてイメージしてもらえたら幸いです。
IDを指定してHTML要素を取得する
var element = $("#idname");
jQueryを使いIDを指定して、HTML要素を取得する方法です。
IDは1ページ内に1つしか出現しないというルールがあるので、これで取得できるタグは1つだけということになります。
クラスを指定してHTML要素を取得する
var elements = $(".classname");
jQueryを使いクラス名を指定してHTML要素を取得する方法です。
クラスは1ページ内に複数存在する可能性があり、JavaScriptの getElementsByName では配列で取得しました。
jQueryの場合は配列では無いため、ループをするときには下のように書きます。
$(".classname").each(function(index) {
$(this).text("クラスを指定してテキスト変更");
});
上の例はループして各要素のタグ内のテキストを変更する処理ですが、それだけでしたら以下のようにも書けます。
$(".classname").text("クラスを指定してテキスト変更");
名前を指定してHTML要素を取得する
var elements = $('*[name=btnname]');
※名前というのは、name プロパティで指定した名前のことです。
名前を指定する場合には、[name=btnname] のように [ ] をつけないといけません。
[type=text] と書けば、type が text の要素を全て取得します。
* はタグ名で、* と書くと全てが対象になります。
input タグだけで name が btnname を取得したい場合は ‘input[name=btnname]’ と書きます。
タグ名を指定してHTML要素を取得する
var elements = $("p");
タグ名を指定してHTML要素を取得する方法です。
タグももちろん複数存在します。
ループの仕方などは「クラスを指定してHTML要素を取得する」をご参考ください。
親要素を取得する
var element = $("#idname").parent();
jQueryを使い親要素の取得方法です。
上の方法は #idname の1つ上の階層の要素を取得します。
子要素を取得する
var elements = $("#idname2").children('span');
jQueryを使い子要素の取得方法です。
上の例だったら下のように書いてもOKです。
var elements = $("#idname2 span");
CSSのようにセレクタで子要素を指定することが出来ます。
スタイルを変更する
$("#idname2 span").css('color', 'Red');
jQueryを使いスタイルを変更する方法です。
css() の引数の左にプロパティ名を入れ、右に値を入れます。
値の取得・変更
var val = $('input[name=btnname]').val();
val() を使って値を取得することが出来ます。
変更する場合は引数に値を入れることで変更できます。
$('input[name=btnname]').val("あいうえお");
まとめ
jQueryを使えば簡単にHTML要素にアクセスでることが分かると思います。
もちろんJavaScriptで行ってもいいです。
ただ、ここまではまだ基礎なのでこういった技術を応用して様々なものを作ります。
コメント