JavaScript  :  jQuery

add addClass after ajax ajaxComplete animate append appendTo attr before bind blur cache change children click clipboard clone closest contents contextmenu cookie css csv datepicker dblclick delay die each empty eq error extend fadeIn fadeOut fadeTo fadeToggle filter find fn focus get getJSON hasClass hash height hide hover html if index innerHeight innerWidth insertAfter insertBefore is JSON keydown keypress keyup lazyload live load map masonry mousedown mousemove mouseout mouseover mouseup next nextAll not off offset on one outerHeight outerWidth parent parents parseInt position prepend prependTo prev prevAll prop queue ready remove removeAttr removeClass replace replaceAll resize scroll scrollLeft scrollTop select serialize show size skrollr slice slick slideDown slideToggle slideUp smoothscroll stop submit text Ticker toArrays toggle toggleClass touchend touchmove touchstart trigger unbind unload unwrap val width wrap wrapAll wrapInner xml

• jQuery 告知テキストの演出
• ブラウザの上部中央に固定でちょっとした告知を表示するサンプルです。 例えば、何かを保存したときや、検索が見つからなかったときなど、ただ文字を書いてあげるだけじゃなく、アニメーションで強調したいときに使えます。...
• 2020-06-08 00:27:43

• jQuery フォームに非同期で値をセット
• フォームにajaxで取得したJSONの値をセットするサンプルです。 フォームに予めデータを埋め込む時は「value=""」でセットしますが、書きのフォームのHTMLは空です。 そこに対してJSで値を埋めています。 [[ <form...
• 2020-04-12 22:04:52

• jQuery フォームの値を取得
• jQueryでフォームの入力値を取得するサンプルです。 以下のフォームに文字を入力するしてボタンを押すと値をまとめても文字列にします。 data1 data2...
• 2020-04-12 15:17:23

• jQuery 独自メソッドを作る
• $(this).hoge();のように独自のメソッドを作りたい時の書き方のサンプルです。 $.fnと$.extendさえ押さえておけば自前のメソッドが作れます。 例えば下記はmyscrollというメソッドを作っています。 $.fnを付けて宣言し、$.extendで初...
• 2020-03-29 16:52:59

• jQuery 狭いエリアに文字をアニメで格納する
• 文字列を動的に埋め込むとき、デザインの都合上、どうしても横幅に 制限あるときがよくある。そんな時に使ってほしいサンプルがこちら。 スマホなどの横幅が狭い画面で、人の名前や地名など動的に入ってくる文字を設置したいことがあります。 そんなときサーバーサイドで文字を切って「…...
• 2020-01-27 00:36:08

• jQuery フォーム入力によるフィルター
• フォームに入力された文字によって、リストの要素を出したり、消したりするサンプルです。 たくさんの要素の中から特定の要素を見つけるときに、使えるUIです。 通信もなく、単純に文字が一致するものを探し出すことができます。 appl...
• 2019-08-10 23:16:25

• jQuery 画像遅延読み込みのサンプル
• たくさんの画像を読み込ませるとき、ファーストビュー以外は後で読み込ませるというサンプルです。 jQueryのプラグインでlazyloadという画像を後から読み込ませるプラグインもありますが、それを使わないで自作します。 いろんなオプションは必要ない 細か...
• 2019-08-08 00:56:46

• jQuery スクロールでURLを書き換える
• URLを書き換えるJSを、スクロールで移動したコンテンツの位置をトリガーに発動させるサンプルです。 記事などのコンテンツで、スクロールして下まで読み切ると、次の記事が表示されるサイトがあります。 今時は通信速度が速く、ついついたくさん読ませるための...
• 2019-07-29 20:32:02

• jQuery 自動ドア風アニメーション
• 画像や文字などを隠しておいて、クリックで表示させるサンプルです。 まずは、シンプルに表示させるパターンです。 toggle fadeToggle slideToggle トグルは表示、非表示。フェードは徐々に透明度で変化。ス...
• 2019-07-29 07:56:24

• CSS 左右に行き来するアニメーション
• 車、電車などホームページでちょっとした演出を施したいときのサンプルです。 CSSのアニメーションを利用して、画像を左右に行き来させています。 画像を変えればいろんなものに応用ができます。 一部jQueryを使ってますが、ほぼCSSの...
• 2019-07-28 14:44:36