【jQuery最高の教科書】第5章 活用の幅を広げるjQueryの必修テクニック
①滑らかな動きのスライドショー
$(function () {
$('.slideshow').each(function () {
let $slides = $(this).find('img'),
slideCount = $slides.length,
currentIndex = 0;
$slides.eq(currentIndex).fadeIn();
setInterval(showNextSlide, 7500);
function showNextSlide () {
let nextIndex = (currentIndex + 1) % slideCount;
$slides.eq(currentIndex).fadeOut();
$slides.eq(nextIndex).fadeIn();
currentIndex = nextIndex;
}
});
});
※.lengthプロパティを指定してjQueryオブジェクトに含まれる要素数を取得
※eq()メソッドで該当を選択する
eq()メソッドとは
複数あるjQueryオブジェクトのうち、引数に渡したインデックスに該当するものを選択するメソッド
※fadeIn()メソッドでフェードインアニメーションさせる
fadeIn()メソッドとは
徐々に不透明度を変化させながら表示させるメソッド
※setInterval()関数で時間経過でスライドショーさせる
setInterval()関数とは
指定した時間ごとに指定した処理を実行する関数
※Javascriptのネイティブ関数
※第1引数は実行する関数、第2引数は実行間隔
※fadeOut()メソッドでフェードアウトさせる
fadeOut()メソッドとは
徐々に不透明度を変化させながら非表示にするメソッド
Javascriptが無効になっている場合を考慮する
・Javascriptのライブラリ、Modernizrで判定する
②多機能なスライドショー
※html()メソッドでHTMLを挿入する
※html()メソッドとは
引数に渡した文字列をHTMLに挿入するメソッド
※preventDefault()メソッドで通常のクリック動作をキャンセルする
preventDefault()メソッドとは
イベントのデフォルト動作をキャンセルするメソッド
index()メソッドで兄弟要素のインデックスを取得する
index()メソッドとは
対象のjQueryオブジェクトについて、
その兄弟要素内でのインデックスを返すメソッド
③スティッキーヘッダー
※offset()メソッドで位置を取得する
offset()メソッドとは
jQuery要素のドキュメント上の位置を取得するメソッド
※scrollTop()メソッドでスクロール量を取得する
scrollTop()メソッドとは
要素がスクロール可能な場合に、
その要素が縦方向にどれだけスクロールされたのかを調べるメソッド
※trigger()メソッドでイベントを発火させる
trigger()メソッドとは
任意のイベントを発生させるメソッド
④デザインが変化するスティッキーヘッダー
※contents()メソッドで子要素すべてを選択する
contents()メソッドとは
対象要素の子要素すべてを選択するメソッド
※clone()メソッドでクローンを呼び出す
clone()メソッドとは
選択している要素の複製（クローン）を生成するメソッド
※outerHeight()メソッドで要素の高さを取得する
outerHeight()メソッドとは
要素の高さを求めるメソッド
※append()メソッドでヘッダーのクローンを挿入する
append()メソッドとは
引数に指定された要素をjQueryオブジェクトに挿入するメソッド
⑤画面領域を有効活用できるタブ
※hide()メソッドで要素を非表示にする
hide()メソッドとは
要素を非表示にするメソッド
※attr()メソッドで要素の属性を取得する
attr()メソッドとは
要素の属性値を取得するメソッド
⑥高機能で拡張しやすいタブ
jQuery UIを利用して実装する
jQuery UIとは
ユーザーインターフェース系のプラグインの集まり
※position()メソッドで要素の位置を取得する
position()メソッドとは
要素の位置を取得するメソッド
offset()とposition()メソッドの違い
・offset()はドキュメントを基準にした位置を返す
・position()はpositionプロパティの値がstatic以外である
直近の祖先要素を基準にした位置を返す
⑦スムーズスクロール
scrollTop()はスクロールバーの上下の位置
scrollLeftはスクロールバーの左右の位置
⑧拡張性のあるスムーズスクロール
SmoothScrollプラグインで実装