最近お覚えたjQueryでよく使う記述、ライブラリについてメモ

マークアップ

最近、嬉しいことに段々とjQueryが使えるようになってきたくりちゃんです。

実務等でよく使う記述やライブラリをメモ、共有しておこうと思います。

ページ読み込んだ時~

$(window).on('load', function () {
});

クリックした時~

$().on("click", function () {
});

アニメーションが終わった時~

$().on('animationend webkitAnimationEnd', function () {
});

→アニメーションのパート管理によく使います。

ホバーした時~

$().hover(function () {
});

クラスを追加する

addClass()

クラスを削除する

removeClass()

追加・削除の切り替え

toggleClass()

→アコーディオンパネルを作るときによく使います。

属性の付与

attr()

data*属性を動的に付与する時によく使います。

処理を一定時間後に実行させたい時

setTimeout(function () {
}, 1000);

この場合は処理が1秒後に実行されます。アニメーションの時によく使います。

ある地点でクラスを付与したい時~

ScrollMagic
The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user's current scroll position.

スクロールマジックというライブラリで、ある地点に到達したらクラスを付与したい、切り替えたい時に使用します。デバック機能もあるので、よく使ってます。

スライダー、タブを作成したい時~

Swiper - Most Modern Mobile Touch Slider
Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiper.jsというライブラリです。スライダーやタブを作るときによく使っています。他の有名なslick.jsやbxsliderも使用してみましたが、swiperの方がスワイプやページャボタンを連打した時の感度が良いなと感じました。jQueryに依存していないのも素晴らしい点ですね。

まとめ

jQueryはスクールでも学んでいたんですが、当時は正直全然わからなかったです…

でも実務を通して自然と理解できるようになりました。そしてかなりできることの幅が広がったなぁと感じています。例えば、ユーザーの動き(クリックなど)にあわせてアニメーションを開始させたりもできるようになりました。

JavaScriptのみで書けるようにこれからは精進してまいります。ではまた来月!

コメント

タイトルとURLをコピーしました