$.ajax(jQuery.ajax)の非同期処理をasync awaitの入れ子なし同期処理で記述する - Qiita
目的 $.ajaxをasync awaitを用いた同期処理で書く。 Ajax通信を待ってから処理に進む。 同期処理が入れ子にならず、クリーンに書くことができる。 IEには対応していない。注意。 経緯 保守の際、既存コードがjqueryのajaxで記述されていた。 jquery自体は別に良い。 だが、大量のコールバックによる入れ子で非常に見通しが悪くなっていた。 それをasync awaitを用いた同期処理にリファクタリングをした際の備忘録である。 書き方 フルーツID🔑からフルーツ名🍒を取得する。 /** * フルーツ名を取得する * * @param {string} fruitId */ async function getFruitName(fruitId) { const fruitRequest = {id: fruitId} const fruitResult = awai
jQuery で作るシングルページ・アプリケーション(SPA) 70行で動くサンプル付き - Qiita
※ だいぶ前に書いた記事ですが、未だに見られているようなので、デモページを作って末尾に追記しました。（2020/03/31） こんにちは。jQuery 大好きです。 SPAが気になるこの頃です。 AngularJS や Vue.js を時間のある時にさわって、何とか使えることが分かりホッとしていますが、もっと簡単に使えないものかな、と思っていました。 フレームワークを使うまでもなく、小規模のウェブアプリを、SPAでサクッと作れるようになりたい。 『ブレイクスルーJavaScript』を読むと、フレームワークなしでSPAを作る手法が掲載されていました。 なるほど、こういうことか、と合点がいきました。 SPAは、「ハッシュタグを使って、画面遷移を実装する」と理解しました。 AngularJS でもそうでした。 調べたところ、このハッシュタグの取得は、jQuery でも、プラグインを入れれば実装
Bootstrapのmodalが正常に動作しない Rails6 + webpacker環境 "modal is not a function..."
jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
jQueryでタップやスワイプなどのスマートフォン操作を取得する＋イメージスライダーのサンプル - 北海道苫小牧市のホームページ制作 STUDIO KEY
jQueryでタップやスワイプなどのスマートフォン操作を取得する＋イメージスライダーのサンプル 2014年09月15日 スマートフォンでも使えるスライダーを作りましたので宜しければどうぞー タップ、スワイプ、指を離すという動作を取得する jQueryにはスマートフォンのタップなどを取得するタッチイベントというものが有ります。ところでタップとタッチってどちらが正しいのでしょうか…よく迷います。 touchstart : タップしたときに発生 touchmove : スワイプしたときに発生 touchend : タップした指を離した時に発生 サンプルはiPhoneやAndroid等、タッチパネル搭載端末でご覧下さい。全ソース見たい方はこちらから jQuery(document).ready(function(){ /* * タップ、スワイプ、指を離した時のイベントハンドラ */ $("#tou
【スマホ対応】jQuery 連続スワイプイベントをハンドリングする方法 - Qiita
スマートフォンなどで、連続スワイプのハンドリング方法をまとめる。 指が触れ始めたときのDOMや、離れた瞬間のDOMは簡単に取得できるが 「今」指が触れているDOMを取得するのに苦戦した。 先日行ったホームページのデザインリニューアルでも この方法を使ってスマホのスワイプ対応をした。 やりたいこと 「このような要素をタッチしたときに、触れたところの色を変えたい」 「ひとつひとつタップするのではなく、指でなぞった部分の色を変えたい」 タッチ対象は、下記のような spanタグを用意して、CSSで成形する。
タッチイベントを拾ってDraggableモドキ - Qiita
jQuery UIのDraggableだとiPhoneだとかのタッチデバイスでドラッグできない。 しょぼーん… いろいろ調べてみたら、touchstart, touchmove, touchendってのでタッチイベントが拾えるらしい。 ということで書いてみた。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>touch test</title> <style type="text/css"> .touchable { position: absolute; cursor: move; width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div class="touchable"></div>
RailsでjQueryが動かないと思ったら
Railsを使ってて忘れがちな点。 Turbolinks こいつがjQueryの動きを止めます。 といっても、ページ読み込みを劇的に早くしてくれる強い味方なので、是非とも使いたい。 ※ Rails4からTurbolinksはデフォルトGemになりました。 ※ Rails3でも使えます。もちろんRails4で使わないという選択肢もあります。 Turbolinksとは ページ上のリンクをクリックした時に、ページ全体をリロードさせるのではなく、bodyタグの中身とheadの中のtitleを同一ページ上で書き換える方法。 .jsとか.cssとか処理し直さないので、ページの読み込みがかなり早くなる。 ↓こんなにごちゃごちゃ読み込んでたのが… ↓こうなったり、、、するので早いのは当然。 問題 下のようにjQuery（coffee script）を書いている場合は動かない。
ネストしたモデルの入力フォーム実装 - t-taira blog
以下（Sorce:）のURLを参考にRails3のサンプルアプリを実装してみました。 まずはscaffoldでカテゴリとサブカテゴリを作成します。 $ rails g scaffold category name:string code:string available:boolean $ rails g scaffold sub_category category_id:integer name:string code:string available:boolean jQueryを使いたいので、Gemfileに一行追加して gem 'jquery-rails' jquery-railsのインストールとマイグレーションを実行します。 $ bundle install $ rails g install:jquery $ rake db:migrate モデルの関連付け app/model
jQuery高速化！処理速度を10倍上げるテクニック20選
Aircraft manuevers during an airpower deomonstration. / Official U.S. Navy Imagery Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。ハイスペックPCでは分かりづらいかもしれませんが、スペックの低いPCやモバイルではWebページの表示速度が遅くすぐに閉じられるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。そこで、jQuery高速化のポイントや方法をここにまとめておきます。 jQueryの最新バージョンを使う 図1 jQueryのバージョンによる速度 https://jsperf.com/speed-comparison-of-jquery-vers
「jQuery×HTML5×CSS3を真面目に勉強」関連の最新 ニュース・レビュー・解説 記事 まとめ - ITmedia Keywords
jQuery×HTML5×CSS3を真面目に勉強（5）： WebページをRetina対応させるテクニック～実践編 前回のWebにおけるピクセルの基本的な話を踏まえ、今回はRetinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介する。（2013/9/26） jQuery×HTML5×CSS3を真面目に勉強（4）： WebページをRetina対応させるテクニック～基礎知識編 iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。（2013/8/29） jQuery×HTML5×CSS3を真面目に勉強（3）： Pinterest風グリッドレイアウトを作ってみよう jQueryを使って、女性に人気の写真共有SNS、Pinterestのグリッドレイアウト
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hammer.JS - Hammer.js
DataTables | Javascript table library
Blogger