【jQuery入門】よく使うメソッドとその書き方

$(セレクタ)で、HTML要素を取得する事ができたら、取得した要素に対する操作をしていきましょう！

今回記事では、よく使うメソッドを紹介していきます！

メソッドの種類はかなり種類が多く、今回記事はボリュームがありますが、コードを全て覚える必要はありません。

ひとまずこんな機能があるんだな～と理解してもらい、あとはコーディングするときに必要に応じて参照してください！

導入編記事も是非ご覧ください！！

https://katsu-dev.netlify.app/blog/web/jquery-basic/

メソッドの種類

$(セレクタ).メソッド名(引数)とすると各種メソッドを呼び出して、要素の色々な操作ができます。

メソッドには引数を指定するものもあり、それにより動作が変化します。

要素の操作

タグを含まないテキストの操作

.text()メソッドでタグを含まないテキストの操作を行うことができます。

$(function(){
  // p要素を取得し、テキストを変更する
  $("p").text("Hello World!");
  
  // IDがhogeの要素のタグを含まないテキストを取得し、変数txtに入れる
  var txt = $("#hoge").text();
});

• 引数に指定した文字列がテキストとして設定されます
• 引数の文字列内にタグを含めても、タグとして設定されずにそのまま表示されます
• 引数を省略すると、テキストのうち、タグを含まないものを返します

タグを含むテキストの操作

.html()メソッドでタグを含まないテキストの操作を行うことができます。

$(function(){
  // p要素を取得し、テキストを変更する
  $("p").html("Hello<br>World!");
  
  // IDがhogeの要素のテキストを取得し、変数txtに入れる
  var txt = $("#hoge").html();
});

• 引数に指定した文字列がテキストとして設定されます
• 引数の文字列内にタグを含めると、その部分はタグとして設定されます
• 引数を省略すると、タグを含むテキストを返します

要素を前に挿入 (セレクタで指定した要素のメソッド)

.before()メソッドで、セレクタで指定した要素の前に、引数で指定したものを挿入することができます。

$(function(){
  // IDがhogeの要素を取得し、手前に要素を追加する
  $("#hoge").before("<p>fuga</p>");
});

• 引数には、文字列を指定し、タグが含まれる場合はHTML要素として、タグを含まない場合はそのままテキストとして挿入されます
• 取得した要素と同じ階層の一つ前に挿入され、兄弟関係となります

要素を前に挿入 (挿入する要素のメソッド)

.insertBefore()メソッドで引数で指定した要素の前に、自分自身を挿入することができます。

$(function(){
  // 新規にp要素を作成し、IDがfugaの要素の手前に追加する
  $("<p>hoge</p>").insertBefore("#fuga");  
});

• 新規にjQueryオブジェクトを作成して.inesertBefore()とします
• 引数には挿入先の要素をセレクタで指定します
• 挿入先の要素と同じ階層の一つ前に挿入され、兄弟関係となります

要素を後に挿入 (セレクタで指定した要素のメソッド)

.after()メソッドで、セレクタで指定した要素の前に、引数で指定したものを挿入することができます。

$(function(){
  // IDがhogeの要素を取得し、後に要素を追加する
  $("#hoge").after("<p>fuga</p>");
});

• 引数には、文字列を指定し、タグが含まれる場合はHTML要素として、タグを含まない場合はそのままテキストとして挿入されます
• 取得した要素と同じ階層で一つ後に挿入され、兄弟関係となります

要素を後に挿入 (挿入する要素のメソッド)

.insertAfter()メソッドで引数で指定した要素の後に、自分自身を挿入することができます。

$(function(){
  // 新規にjQueryオブジェクトを作成し、IDがfugaの要素の後に追加する
  $("<p>hoge</p>").insertAfter("#fuga");  
});

• 新規にjQueryオブジェクトを作成して.insertAfter()とします
• 引数には、挿入先の要素をセレクタで指定します
• 挿入先の要素と同じ階層で一つ後に挿入され、兄弟関係となります

子要素の先頭に挿入する (セレクタで指定した要素のメソッド)

.prepend()メソッドで、セレクタで指定した要素の子要素の先頭に、引数で指定したものを挿入することができます。

$(function(){
  // IDがhogeの要素を取得し、その子要素の先頭にp要素を追加する
  $("#hoge").prepend("<p>fuga</p>");
});

• 引数には、文字列を指定し、タグが含まれる場合はHTML要素として、タグを含まない場合はそのままテキストとして挿入されます
• 取得した要素内の先頭に挿入され、親子関係となります

子要素の先頭に挿入する (挿入する要素のメソッド)

.prependTo()メソッドで引数で指定した要素内の先頭に、自分自身を挿入することができます。

$(function(){
  // 新規にp要素を作成し、IDがfugaの要素内の先頭に追加する
  $("<p>hoge</p>").prependTo("#fuga");  
});

• 新規にjQueryオブジェクトを作成して.prependTo()とします
• 引数には、挿入先の要素をセレクタで指定します
• 挿入先となる要素内の先頭に挿入され、親子関係となります

子要素の末尾に挿入する (セレクタで指定した要素のメソッド)

.append()メソッドで、セレクタで指定した要素の子要素の末尾に、引数で指定したものを挿入することができます。

$(function(){
  // IDがhogeの要素を取得し、その子要素の末尾にp要素を追加する
  $("#hoge").append("<p>fuga</p>");
});

• 引数には、文字列を指定し、タグが含まれる場合はHTML要素として、タグを含まない場合はそのままテキストとして挿入されます
• 取得した要素内の末尾に挿入され、親子関係となります

子要素の末尾に挿入する (挿入する要素のメソッド)

.appendTo()メソッドで引数で指定した要素内の末尾に、自分自身を挿入することができます。

$(function(){
  // 新規にp要素を作成し、IDがfugaの要素内の末尾に追加する
  $("<p>hoge</p>").appendTo("#fuga");  
});

• 新規にjQueryオブジェクトを作成して.appendTo()とします
• 引数には、挿入先の要素をセレクタで指定します
• 挿入先となる要素内の末尾に挿入され、親子関係となります

要素を削除する

.remove()メソッドで、セレクタで指定した要素を削除できます。

$(function(){
  // IDがhogeの要素を取得し、削除する
  $("#hoge").remove();  
});

スタイルの操作

CSSプロパティの操作

.css()メソッドで、要素のCSSプロパティの操作ができます。

$(function(){
  // IDがhogeの要素を取得し、heightプロパティの値を変数heightに入れる
  var height = $("#hoge").css("height");
  
  // IDがhogeの要素を取得し、heightプロパティに20pxを指定
  $("#hoge").css("height","20px");
});

• 引数が一つの時はプロパティ値の取得となり、取得したいプロパティを文字列で渡します
• 引き数が二つ(カンマ区切りで指定)の時はプロパティ値の設定となり、一つ目にプロパティ、二つ目に設定したい値をそれぞれ文字列で渡します

表示・非表示

.hide()、.show()、.toggle()メソッドで、要素の表示・非表示の切り替えができます。

$(function(){
  // IDがhogeの要素を取得し、非表示にする
  $("#hoge").hide();

  // IDがhogeの要素を取得し、非表示を解除する
  $("#hoge").show();
  
  // IDがhogeの要素を取得し、表示・非表示を切替える
  $("#hoge").toggle();  
});

じわっと表示・非表示

.fadeOut()、.fadeIn()、.fadeToggle()メソッドで、要素の表示・非表示をじわっと切り替えることができます。

$(function(){
  // IDがhogeの要素を取得し、じわっと非表示にする
  $("#hoge").fadeOut();

  // IDがhogeの要素を取得し、じわっと非表示から表示状態にする
  $("#hoge").fadeIn();
  
  // IDがhogeの要素を取得し、表示・非表示をじわっと切替える
  $("#hoge").fadeToggle();  
});

スライドして表示・非表示

.slideUp()、.slideDown()、.slideToggle()メソッドで、要素の表示・非表示をスライドして切り替えることができます。

$(function(){
  // IDがhogeの要素を取得し、スライドして非表示にする
  $("#hoge").slideUp();

  // IDがhogeの要素を取得し、スライドして非表示から表示状態にする
  $("#hoge").slideDown();
  
  // IDがhogeの要素を取得し、表示・非表示をスライドして切替える
  $("#hoge").slideToggle();  
});

スクロール位置の操作

.scrollTop()メソッドで、要素のスクロール位置を操作できます。

$(function(){
  // IDがhogeの要素のスクロール位置を取得し、変数scrollに入れる
  var scroll = $("#hoge").scrollTop();

  // body,htmlのスクロール位置を画面上から100pxに設定
  $("body,html").scrollTop(100);
});

• 引数を指定しない場合、取得した要素のスクロール位置を返します
• 引数に数値を指定した場合、その要素のスクロール位置を設定します

アニメーション

.animate()メソッドで、要素のアニメーションを指定できます。

$(function(){
  // IDがhogeの要素を取得し、1000ミリ秒かけて幅を300pxにする
  $("#hoge").animate({width: "300px"}, 1000);
});

• 引数は一つ目にアニメーションの動作を指定するオブジェクト、二つ目はアニメーションの時間をミリ秒単位で指定します
• 動作指定オブジェクトのプロパティには、CSSのプロパティのうち、数値を用いるものを指定できます
• margin-top等のプロパティはハイフンを消し、後に続く文字を大文字で、marginTop等とします

アニメーションの途中停止

.stop()メソッドで、要素のアニメーションを途中停止できます。

$(function(){
  // IDがhogeの要素を取得し、アニメーション動作中あれば停止してから、
  // 1000ミリ秒かけて幅を300pxにする
  $("#hoge").stop().animate({width: "300px"}, 1000);
});

属性の操作

クラスの操作

.addClass()、.removeClass()、.toggleClass()メソッドで、要素に対してクラスを付けたり外したりできます。

引数には、付け外しするクラス名を文字列で指定します。

$(function(){
  // IDがhogeの要素を取得し、fugaクラスを付ける
  $("#hoge").addClass("fuga");  
  
  // IDがhogeの要素を取得し、fugaクラスを外す
  $("#hoge").removeClass("fuga");

  // IDがhogeの要素を取得し、fugaクラスの付け・外しを切替える
  $("#hoge").toggleClass("fuga");
});

クラスが付いているか調べる

.hasClass()メソッドで、要素がクラスを持っているか調べられます。

引数には調べるクラス名を文字列で指定し、持っている場合はtrue、持っていない場合はfalseを返します。

$(function(){
  // IDがhogeの要素を取得し、fugaクラスが付いているか調べ、変数ansに入れる
  var ans = $("#hoge").hasClass("fuga");
});

その他の属性の操作

.attr()メソッドで、要素の属性の操作ができます。

$(function(){
  // IDがhogeのa要素を取得し、href属性の値を変数hrefに入れる
  var href = $("a#hoge").attr("href")
  
  // IDがhogeのa要素を取得し、target属性に_blankを指定
  $("a#hoge").attr("target","_blank")
});

• 引数が一つの時は属性値の取得となり、取得したい属性を文字列で渡します
• 引き数が二つ(カンマ区切りで指定)の時は属性値の設定となり、一つ目に属性、二つ目に設定したい値をそれぞれ文字列で渡します

他要素の指定

.parent()、.children()、.next()、.prev()、.siblings()メソッドで、取得した要素を基準に他の要素を選択することができます。

$(function(){
  // IDがhogeの要素を取得し、その親要素を取得する
  var parent = $("#hoge").parent()
    
  // IDがhogeの要素を取得し、その子要素を全て取得する
  var children = $("#hoge").children()
  
  // IDがhogeの要素を取得し、その階層の一つ後の要素を取得する
  var next = $("#hoge").next()
  
  // IDがhogeの要素を取得し、その階層の一つ前の要素を取得する
  var prev = $("#hoge").prev()
  
  // IDがhogeの要素を取得し、その兄弟要素全てを取得する
  var siblings = $("#hoge").siblings()
});

一要素に複数のメソッドを使用する

一つのjQueryオブジェクトに対して、いくつかのメソッドを実行したい場合は、メソッドチェーンを使用する事ができます。

$(function(){
  // p要素を取得し、テキストを変更した後、背景色をピンクにする
  $("p").text("Hello World!").css("background","pink")
});

• jQueryオブジェクト.メソッド().メソッド().メソッド() ... のような形でメソッドを繋ぐことで、一つの要素に対して複数のメソッドを連続して実行できます。
• 但し、各メソッドの実行結果でjQueryオブジェクトを返すものに限られます。

まとめ

かなりボリュームのある内容になってしまいましたが、全てを覚えなくても大丈夫です。

こんな用途があるんだな～くらいに留めておいて、実装で必要になったらまた見に来てください。

次回はイベントについて紹介します！

次の記事
要素に対するイベントを指定する方法について紹介します！

【jQuery入門】要素のイベント発生時の処理を指定する | KATSU LOG

イベント発生時の処理を指定して、要素を操作する方法を紹介します。

https://katsu-dev.netlify.app/blog/web/jquery-event/