結論から言うと
jQueryで要素を操作するときに絶対に覚えておきたいメソッドはこちらの５つです。
- htmlメソッド
要素の内容をhtmlで操作する。 - textメソッド
要素の内容をtextで操作する。 - valメソッド
要素のvalue属性を操作する。 - attrメソッド
要素のvalue以外の属性を操作する。 - 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でできることが増えると思います。これらのメソッドはよく使うので、暗記してスラスラとプログラミングが書けるようになりましょう！
- htmlメソッド
要素の内容をhtmlで操作する。 - textメソッド
要素の内容をtextで操作する。 - valメソッド
要素のvalue属性を操作する。 - attrメソッド
要素のvalue以外の属性を操作する。 - cssメソッド
要素のcssを操作する。
