JS練習場

トリガー

  • click
  • dblclick
  • mousedown
  • mouseup
  • contextmenu
  • 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(プラグイン)

棒グラフ表示

折れ線グラフ表示

円グラフ表示