jQuery 上級編

2018年9月21日

jQuery 上級編では演習としてスライドを制作しました。

jQueryオブジェクトは、配列と同じような構造で、インデックス番号(0からはじまる)もついています。

eqメソッドとは、jQueryオブジェクトで指定した要素の中から引数で指定したインデックス番号の要素を取得します。
$(‘セレクター’).eq(インデックス番号)

indexメソッドとは、jQueryオブジェクトで指定した要素の中から引数で指定した要素に一致したインデックス番号を取得します。

prevメソッドとnextメソッド
これはスライダーによくある「前へ」「次へ」の実装で使えるメソッドですね。
prevメソッドは、jQueryオブジェクトで指定した要素の兄弟要素(同じ階層の要素)から「前の要素だけ」を取得します。
nextメソッドは、prevメソッドとは逆に、「次の要素だけ」取得します。

同じ処理を記述した場合、それを関数としてまとめていつでも呼び出せるような処理も勉強しました。

lengthメソッドは、jQueryオブジェクトの要素の個数を取得できる。
値で設定している箇所の変化をlengthメソッドに置き換えることで、後の値の変化にも自動で対応できるようにします。

またサイトでよく使われているフォームの操作についても学びました。

attrメソッドは、HTMLの属性をセットしたりゲットできます。
attr(‘属性名’,’属性値’);

valメソッドは、引数を設定しない場合、jQueryオブジェクトで指定した要素のvalue属性の値を取得します。引数を設定した場合は、value属性の要素に値を設置します。

submitイベントは、フォームで送信されたときのイベント。
$(‘セレクター’).submit(function(){
//フォーム内容が送信されたときの処理
});

入力のエラーをチェックするには条件分岐を使って判断します。
空文字列は、”(シングルクォート2つ)で表記。

カスタム属性
jQueryでは、HTMLの属性を自分で作ることがあります。その属性を「カスタム属性」といい、「data-●●●」という属性名で記述できます。

animateメソッドとは、jQueryオブジェクトにアニメーションをつけれるメソッドです。animateメソッドの引数は連想配列で指定。2つ目の引数でアニメーションの時間(ミリ秒)で設定できます。
$(‘セレクタ’).animate({‘プロバティ’:’値’};

ページ内リンクのスムーズスクロール
最近のサイトは縦長のものが多くなっています。そのようなページでは、ページ内リンクが設定されててその位置までスムーズに移動するようなサイトが多いです。そんたときによく使いそうなのが、scrollTopメソッドです。

scrollTopメソッドとは、スクロール位置を取得したり変更したりするメソッドです。
$(‘セレクタ’).scrollTop(値);
scrollTopメソッドを引数なしで使うと対象のjQueryオブジェクトの要素の垂直位置を取得します。引数を指定するとその値にスクロール位置を変更できます。0は最上部になります。

offsetメソッドとは、jQueryオブジェクトの要素の表示位置を取得できるメソッドです。取得できる値は、ページ上部からの相対位置(上と左)になります。上と左は、offset().top、offset().leftと指定して取得もできます。