トリガー
- click
- dblclick
- mousedown
- mouseup
- mouseover/mouseout
- mouseenter
click():クリックで発火
dblclick():ダブルクリックで発火
mousedown():マウスが押されたときに発火
mouseup():マウスが押された状態から離されたときに発火
contextmenu():右クリックで発火
mouseover():マウスが要素の上にあるときに発火
mouseout():マウスが要素から離れたときに発火
mouseenter():マウスが要素の上にあるとき発火
show/hide
show
hide
show:要素を表示
hide:要素を非表示
toggle
toggle
toggle:要素の表示/非表示
fadeIn/fadeOut
fadeIn
fadeOut
fadeIn:不透明度を本来の値まで徐々に上げる
fadeOut:不透明度を0%まで徐々に下げていき、最後に表示から削除(display: none)
fadeTo
非表示
半透明
表示
fadeTo:セレクタで指定した要素のopacityを現在の値から、設定した値にまで徐々に変更
slideUp/slideDown
開閉パネル ▼ Open
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
slideUp:垂直サイズを徐々に伸ばす
slideDown:垂直サイズを徐々に縮める
slideToggle
slideToggle:要素のうち、隠れていたものにはslideDown()、表示されていたものにはslideUp()を実行
animate①
拡大
縮小
クリックする度に要素を拡大縮小させる
animate:CSSの値を指定して、アニメーションを実行
animate②
黄色の丸をクリックすると位置を変更して移動させる
localStorage
追加ボタン:ローカルストレージにタイトルと本文を保存する
リセットボタン:ローカルストレージに保存されたデータを削除する
【ローカルストレージの特徴】
・半永久的にブラウザに保存される
・保存できる容量が多い
・セキュリティ上の問題点はある...
ツールチップ(カーソル追従)
マウスホバーでツールチップ表示
chart.js(プラグイン)
棒グラフ表示
折れ線グラフ表示
円グラフ表示