プロゲート【JQuery上級-#2フォームの操作-】text,attr,val,submit,selectタグ

prorate:JQuery上級コース その２

フォームの操作

textメソッド

textメソッドは引数を指定せずに用いることで、要素内の文字列を「ゲット（取得）」することもできる

var text = $(‘p’).text();
// textを取得

var html = $(‘main’).html();
// mainの中のhtmlを取得

var fontSize = $(‘h1’).css(‘font-size’);
// h1のcssを取得

書き換える場合

$(‘h1’).text(‘こんばんは’);
// h1のテキストをこんばんはに書き換える

attrメソッド

HTMLの属性はattrメソッドを用いて「ゲット」と「セット」ができます。例えば、attr(‘id’, ‘title’)のように第一引数に属性名、第二引数にその属性値を指定することで属性をセットすることができます。そして、第二引数を指定しない場合は、その属性の値を取得できます。progate

$(‘h1’).attr(‘id’,’title’);
//  h1要素にtitleというidをセット

var url = $(‘a’).attr(‘href’);
// a要素のhref属性の値を取得

inputタグの入力値

valメソッド

inputタグに入力されている値は、valメソッドで取得できる

var name = $(‘#name’).val();

submitイベント

submitイベントを用いると、送信ボタンがクリックされたときだけでなく、「Enter」キーでフォームが送信された場合もイベントが発生する

$(‘form’).submit(function(){

});

$('#form').submit(function(){ // submitイベント

    var textValue = $('#text-form').val();　// textValue定義
    $('#output-text').text(textValue);　
        // output-textフォームを書き換える
    return false;

  });

セレクトボックスの入力値

selectタグ

selectタグを用いると選択肢式のセレクトボックスを作ることができます。selectタグとoptionタグからなり、各optionタグが選択肢になります。下図のように、selectタグはvalメソッドによって、選択中の値（optionタグのvalue属性の値）を取得できます。progate

<form>
    <select id=“gender”>
        <option value=“male”>男</option>
        <option value=“female”>女</option>
    </select>
</form>

フォームの入力チェック

if($(‘text-form’).val() == ‘空文字’){
 //テキストフォームの値がから文字だった場合の処理
}else{

}

 if (textValue == '') {
      $('#error-message').text('理由を記入してください');
      // エラーメッセージ
    }else{
      $('#error-message').text('');
      // エラーメッセージ非表示
    }

入力欄への自動入力

valメソッドは値を取得することもできますが、反対に引数に値を指定することで、フォームに値をセットすることもできる。

$('.option-btn').click(function(){ // クリックイベント
  var optionText= $(this).text();　
  $('#text-form').val(optionText +'が好きな理由は、');
});

セレクトボックスの自動入力

selectタグもvalメソッドを用いて自動で選択させることができます。先ほどのinputタグとの違いは、selectタグの場合選択肢が限定されているということです。optionタグのvalue属性に合致する値をvalメソッドの引数に指定しましょう。progate

$('#gender').val('female);
// value属性がfemaleのものを選択させる

カスタムデータ属性

属性は自分でつくることもできます。これをカスタムデータ属性といい、「data-」から始まる属性名を自由に設定できる。

<div deta-option=“wanko”>…</div>