UnsplashのImat Bagja Gumilarが撮影した写真

基本構文

jQueryの基本の構文は以下です。

$("セレクタ").メソッド("引数");
例）$("#target").css({"color": "red"});

　

また、１つの要素に複数メソッドを簡単に記述できる「メソッドチェーン」は以下の様に書きます。

$("セレクタ").メソッド1().メソッド2();

要素の取得

ここでは要素の取得方法についてのご紹介です。

記述例	内容
$(“div”).メソッド	HTMLタグで取得
$(“.target”).メソッド	クラス名で取得
$(“#target”).メソッド	idで取得
$(“.target1, .target2″).メソッド	複数セレクタ指定で複数の要素を取得
$(“.target .active”).メソッド	親要素のセレクタ、子要素のセレクタ指定で特定した子要素を取得

上の表は主なもののみ記載しましたが、jQueryのセレクタの書き方はCSSと同じです。

主なメソッド

jQueryのメソッドは以下の公式ページにまとめられています。

　https://api.jquery.com/

　

以下には、よく使うものをピックアップしてまとめています。

子要素の取得

メソッド	内容
.children()	子要素の取得。 例）$(“ul”).children()

要素の追加・削除

メソッド	内容
.append()	要素の追加。取得した要素の最後の子要素として追加。 例）$(“ul”).append(‘<li>追加する要素</li>’);
.after()	要素の追加。取得した要素の直後に要素追加。 例）$(“#target”).after(“<p>追加する要素</p>”);
.wrap()	要素の追加。取得した要素の親要素として追加。
.remove()	要素の削除。 例）$(“#target”).remove();

属性の追加・削除

メソッド	内容
.attr()	属性の追加。 例）$(“ul”).attr(“style”, “color: blue;”);
.removeAttr()	属性の削除。 例）$(“ul”).removeAttr(“style”);

クラスの追加・削除

メソッド	内容
.addClass()	クラスの追加。 例）$(“#target”).addClass(“active”);
.removeClass()	クラスの削除 例）$(“#target”).removeClass(“active”);

「.attr()」「.removeAttr()」でクラスの追加、削除をすると、全てのクラスを書き換え、削除してしまうので、クラスの付け替えは基本的に「.addClass()」「.removeClass()」を使います。

要素の表示・非表示

メソッド	内容
.hide()	要素の非表示 例）$(“ul”).hide();
.show()	要素の表示 例）$(“ul”).show();

　

以上です。