hagetak's blog

どうも、はげたかです。

今日の一言:カテゴリ分けをしっかりしたらPVあがるかな?

dotinstallのjQueryを学習完了した

はじめに

dotinstall の STEP #3 , JavaScriptをもっと便利にしてくれるjQueryを覚えよう を完了させた。 実践編をやってみて、特に印象が残っているレッスンのメモを残す。

ページの先頭へ

「このページの先頭へ - dotinstallから」を実装する よくウェブサイトで見かけるこのギミックがこんな簡単にできるとは思わなかった。

メモ:スクロール量の取得

 $(window).scroll(function(){
       var dy = $(this).scrollTop()
       console.log(dy)
});

HTML5で作る「シンプルメモ帳」

HTML5で作る「シンプルメモ帳」 - dotinstallから HTML5のlocalStorageを使うことで、入力したものを保存することが出来る。 キャッシュとは違うのかな。あとで調べて見る必要があるね。 入力フォーム等に用いれば良い感じ。

メモ:localStorageの使い方

<textarea id="memo"></textarea>
localStorage.setItem('memo', $('#memo').val()) // (ID, 中身)で保存
localStorage.getItem('memo') // (ID)で取得
localStorage.removeItem('memo') //削除
localStorage.clear // 全部削除

パララックスサイトを作ろう

パララックスサイトを作ろう - dotinstallから

これも最近流行りのギミック。結構簡単にできる事に驚いた。 jQueryでスクロール量を取得し、一定量まで表示させたいものを下げる(上げる)ことで固定していることに気づいた。

jQueryで作るスライドショー

jQueryで作るスライドショー - dotinstallから

これも最近流行りのギミック。実際はメインの画像の下にサムネイルがあったりするが、これを応用すれば簡単に出来そうな気がする。

メモ:jQueryのテクニック

$('.thumnail').click(function(){
            $('#image img').attr('src', $(this).attr('src'));
            currentNum = $(this).index();
            $(this).addClass('current').siblings().removeClass('current')
              })

これを見て出来る人はすごいなぁと思った。(レッスン受けてない人にはなんだか分かんないと思うけど...) まず一つ目に、

#image の img の src に this (クリックした画像)の src をいれる

みたいな理解で良いのかな。パパっとこんな複雑そうなコードを書けるのがすごい。。。 次に、

currentNum に画像が何番目か分かる index を代入する

これもこの理解で良いのかな。 最後に、

this に currentクラスを追加し、siblings(兄弟要素)から全て currentクラスを削除する

みたいな。 こんな厄介なコードを一瞬でパパっと打つのは、一朝一夕で身につけることは出来なそうですな。

jQuery まとめ

$('p').css().hide()

において、 p はセレクタという。セレクタは html要素の他に、 ID, classを指定することができ、細かく指定することも出来る。

メソッドは、 . 以降のことをいい、この例では、 css(), hide() の部分だ。またつなげて書くことをメソッドチェーンという。リファレンスを参照にすると良いだろう。

おまけ

  • click 読み込まれた時にある要素しか使えない
  • on 動的に作られたものに対応できる

さいごに

jQuery(JavaScript)を用いれば、流行りのギミックを簡単に実装できることがわかった。 しかし、一朝一夕でパパっとコードを打つことは出来なそう。頭が追いつかない部分があるから。

そのために、いろいろいじってみたり、実装してみたりすることが大事なのかな。 動くから作ってて楽しかったし、モチベーションはキープできそうな感じ。

広告を非表示にする