jQuery Progate　上級　５～１４まで（全１８）

５．共通部分の関数化

まったく同じコードを複数回使う場合は共通箇所を関数でまとめると良い。

例えば以下のjQueryコード

var $slideIndex = ...

var $slideIndex = ...

と複数回出てきたら、

function toggleChangeBtn () {
var $slideIndex = ...
}

処理を関数としてまとめる。

$('.index-btn').click(function(){
   toggleChangeBtn();
});

function toggleChageBtn(){
   //処理
}

上記で呼び出す。

６．lengthメソッド

スライドの枚数が変わっても動くようにする

lengthを使うとjQueryオブジェクトの要素の個数を取得できる。

以下html、

<ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>jQuery</li>
 
</ul>

以下jQuery、

$('li').length; //結果：３

７．textメソッド,htmlメソッド,cssメソッド

上記メソッドは引数を指定しなければ値を取得できる。

以下、jQuery

textメソッド　var text = $('p').text();

htmlメソッド　var html = $('#main').html();

cssメソッド　var fontsize = $('h1').css('font-size');

８．attrメソッド

属性のセットや取得が可能

属性のセット　$('h1').att('id','title');
属性の取得　var url = $('a').attr('href');

９．inputタグの入力値

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

以下html

inputタグは　1行の入力欄が作れる。

<form>
 <div>名前：</div>
 <input id="name" type="text">
</form>

以下jQuery

var name = $('#name').val();

【submitイベント】

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

以下jQuery

$('form').submit(function(){
//フォームの処理
});

１０．選択ボックスの値を取得

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

セレクトタグを使うと選択肢式のセレクトボックスを作れる。

以下html

<form >
 <div>性別</div>
 <select id="gender">
   <option value="male">男</option>
   <option value="frmale">女</option>
 </select>
</form>

以下JQuery

var gender = $('#gender').val();

１１．フォームの入力チェック

if($('#text-form').val() == ''){
   //エラーメッセージを表示
}

１２．フォームの自動入力

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

以下ｊQuery

 $('.option-btn').click(function(){
   var optionText = $(this).text();
   $('#text-form').val(optionText + 'が好きな理由は');
 });
 

１３．選択ボックスの自動選択

selectタグもvalメソッドを使って自動で選択することができる。inputタグとの違いは、selectタグの方は選択肢が限定されるということ。

ｊQuery

$('#gender').val('female');

select要素のoptionのvalue属性がfemaleのものを
選択させる

１４．カスタムデータ属性

idやclass、src等の「属性」は自分で作ることが可能。これをカスタムデータ属性という。「date-」から始まる属性を作成できる。

html <div date-option="○○"></div>

jQuery $(div).attr(date-option);