【jQuery初心者】要素の操作に絶対に覚えておきたいメソッド5選

JavaScript
スポンサーリンク

結論から言うと

jQueryで要素を操作するときに絶対に覚えておきたいメソッドはこちらの5つです。

  1. htmlメソッド
     要素の内容をhtmlで操作する。
  2. textメソッド
     要素の内容をtextで操作する。
  3. valメソッド
     要素のvalue属性を操作する。
  4. attrメソッド
     要素のvalue以外の属性を操作する。
  5. cssメソッド
     要素のcssを操作する。

事前知識

「jQueryとは何か」を知りたい方はこちらを参照してください。

またjQueryで使うセレクタはCSSと同じ記載方法なので詳しく知りたい方はこちらを参照してください。

具体例

では実際にメソッドの書き方と具体的な例をご紹介します。

htmlメソッド

htmlメソッドは要素の内容を操作できます。文字列はもちろんhtmlの形式で挿入や更新、取得ができます。書き方はこちらです。

//要素にspanタグと「こんにちは」を挿入
$(セレクタ).html('<span>こんにちは</span>');
//要素に「こんにちは」を挿入
$(セレクタ).html('<span>こんにちは</span>');

//要素内のhtmlを取得
$(セレクタ).html();

どういったときに使うか

  • フォーム画面で要素をクリックしたとき入力欄(inputタグ)が追加する場合
  • cssが設定されている要素を追加したい場合

textメソッド

textメソッドは要素の内容をテキストで操作できます。文字列の挿入や更新、取得ができます。書き方はこちらです。

//要素に「こんにちは」を挿入
$(セレクタ).text('こんにちは');

//要素内のtextを取得
$(セレクタ).text();

どういったときに使うか

  • spanタグのテキスト書き替える場合
  • サイトを開いたときにspanタグに今日日付を表示する場合
  • クリックするたびに+1して表示する場合

valメソッド

valueメソッドはval属性の更新や取得ができます。主にinputタグに使用します。書き方はこちらです。

//value属性に「こんにちは」を設定
$(セレクタ).val('こんにちは');

//要素のval属性値を取得
$(セレクタ).val();

どういったときに使うか

  • 郵便番号を入力したときに住所を自動的に設定したい場合
  • ユーザが入力した情報を取得したい場合

attrメソッド

attrメソッドはvalue以外の属性値を変更、取得ができます。属性は自分で指定できるため柔軟な変更ができます。書き方はこちらです。

//要素の設定
$(セレクタ).attr('属性名','値');

//要素の属性値を取得
$(セレクタ).attr('属性名');


//aタグのhref属性を取得
$('a').attr('href');
//aタグのhref属性を変更
$('a').attr('href','https://www.google.com/');

どういったときに使うか

  • aタグのhrefを動的に変えたい場合
  • name属性を動的に変えたい場合

cssメソッド

cssメソッドは要素のcssを操作できます。書き方はこちらです。

//要素のCSSを設定
$(セレクタ).css('プロパティ', '値');

//spanタグ文字を赤くする
$('span').css('color', 'red');
//spanタグの文字のCSSをなくす
$('span').css(color', '');

どういったときに使うか

  • マウスオーバーで文字の色を変えたい場合
  • paddingやmarginを動的に変えて余白の調整をしたい場合

まとめ

jQueryの要素を操作するメソッドはこれらのメソッドを覚えておくことでjQueryでできることが増えると思います。これらのメソッドはよく使うので、暗記してスラスラとプログラミングが書けるようになりましょう!

  1. htmlメソッド
     要素の内容をhtmlで操作する。
  2. textメソッド
     要素の内容をtextで操作する。
  3. valメソッド
     要素のvalue属性を操作する。
  4. attrメソッド
     要素のvalue以外の属性を操作する。
  5. cssメソッド
     要素のcssを操作する。

スポンサーリンク
JavaScript プログラミング
スポンサーリンク
この記事を書いた人
まさき

25歳の社会人3年目のシステムエンジニアです。
未経験からIT企業に入社して業務や、業務外でも学習することでプログラミングが書けるようになりました。
得意なのはHTML,CSS,JavaScript。最近はVue.jsとGASを勉強中です。
本を読むことが好きなのでIT技術書以外にもたくさん読みます。
好奇心旺盛でとりあえずやってみる精神です。
楽しいことが生きがいで、仕事も私生活も楽しくなるように日々奮闘中。

まさきをフォローする
シェアする
まさきのエンジニア図書館
タイトルとURLをコピーしました