jQueryで入力チェック - Qiita
前提 ほんの少しバリデーションかけたいだけの際、プラグインはとても大きく、癖があり不要に思えます。 inputのpatternやvalidationに使われる属性、 はたまたjQueryのvlidationプラグインを使わずに自力で入力チェックを行いたいと思います。 リアルタイムの入力チェックではなく、 入力エリアからフォーカスを失ったタイミングでチェックします。 ※結構初心者の頃に作成したものなので、いずれリライトします (2020/09/16 必須/数値/エラーのときはsubmitしない リライト済み) 必須チェック
jQuery deferredの使い方 | 前編 deferredの基本
jQuery deferredの使い方 前編 deferredの基本 jQuery deferredをなんとなく知っているが使い方がよくわからない人のために短期シリーズでおさらいをします。第1回目は非同期処理の概念からdeferredの基本機能までをおさえます。 なぜ、今、jQuery deferred？ この短期シリーズでは、2回に分けてjQuery deferredについて解説します。 jQuery deferredは、jQuery1.5で追加された機能であり、特に新しいものではありません。 しかしながら、私が昔書いたjQuery deferredに関するブログ記事をブックマークする人が、いまだにちょこちょこいるのが見受けられるのです。 もしかして、deferredの存在はなんとなく知っているけれど、どのように使ったらいいのかよくわからないという人が多いのかもしれないと思い、改めてまと
Chrome拡張(Chrome-extention)でクリックイベントが発火しない | 俺的技術記録
問題 Chrome拡張でクリックイベントが発火しない Chrome拡張でのこと。(Chrome Extention) 拡張で操作したいWebページが、Javascriptのイベント処理なんかで、formへの入力値をこねくり回し処理しているような場合。 (ある選択肢を選ぶと、入力項目が変化する場合、など) jqueryで値をセットしても、その値を認識してくれない場合がある。 おそらくフォームに入力された値を、入力値の変化のイベントを受けて、裏でこねくり回して、 hiddenか何かのフィールドに収めているのだと思う。 Chrome拡張 でなければ、 $("#dom").val('value').change(); とか $("#dom").trigger("change"); とか、書けばいいのだけれど。 Chrome拡張では、これではイベントは発火しない。 Chrome拡張では、ページのDO
【jQuery入門】validate()の使い方と独自ルールの設定方法！ | 侍エンジニアブログ
「validate()」とは？ それでは、まず最初に「validate()」の基本的な知識から学習を進めていきましょう！ 「validate()」は、自分の意図通りにユーザーがフォーム要素へ入力できているかを検証することができるメソッドになります。 例えば、以下のような簡単なフォームを見てください！ <form> <input name="name" type="text"><br> <input name="email" type="text"><br> <input type="submit" value="送信"> </form> この例では、単純に名前とメールアドレスを入力するだけのフォームになります。「validate()」を使うと、例えば名前の入力を「必須項目」にしたり、メールアドレスの形式でないと入力できないように設定できます。 つまり、jQuery側からフォーム要素の「独自
Download jQuery | jQuery
Download jQuery link Latest versionTo locally download these files, right-click the link and select "Save as..." from the menu. Download the compressed, production version: Download jQuery 3.7.1 Download the uncompressed development version of jQuery 3.7.1 Download the map file for jQuery 3.7.1 jQuery 3.7.1 blog post with release notes The slim build is a smaller version, that excludes the ajax an
jQueryで複数のアニメーションを順番に実行する方法 | Free Style
jQueryでアニメーションを作る際に、何かのアニメーションの後にもう一つアニメーションをさせたい時にはコールバックを利用します。animateメソッドの後に実行される関数としてコールバック関数を呼び出して、関数内で次のアニメーションを実行するという流れになります。 また順番にアニメーションを実行するプログラムの書き方は他にもあり、queueメソッドを使う方法もあります。 ここでは2つの方法のアニメーションプログラムをご紹介します。 サンプルとして正方形のボックスを移動させるアニメーションの後に、色を変更してまた別の場所に移動する2つ目のアニメーションを実装してみます。 アニメーションを順番に実行 まずはHTMLとCSSでサンプルのオブジェクトを作成します。 HTML <div id="obj"></div> 簡単にdivでオブジェクトの要素を用意しておきます。 CSS #obj { wi
スナック「jQuery」 - Qiita
……あら、いらっしゃい。 若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。 何飲む？ ……水割り？ わかったわ。 じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――『jQuery』がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる？ ……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。 その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。 他のブラウザは、Safariがバージョン3がMacとWindowsに公開されていた頃で、Firefoxはまだバージョン2.0
jQueryからVue.jsに乗り換えて良かった点・悪かった点をまとめてみた！ - クラウドワークス エンジニアブログ
今年の3月からクラウドワークスで働き出した高梨です！ さっそくですが、 最近、jQueryで書いていたJavaScriptをVue.jsに変えていくということをやりました！ 「がっつりcomponent化して、API用意して、SPAにして・・・」 みたいな感じではなく、 最低限jQueryでやっていた表示・非表示の処理だったり、金額を計算するといった処理を そのままVue.jsに置き換えていくという感じですね。 実際、Google Trendを見ても ここ数年でVue.jsの人気が急激に伸びているのは事実です。 （実はReactにも大差をつけている） 【Google Trend JS比較】 https://trends.google.com/trends/explore?date=today%205-y&q=vue.js,react.js,angular.js ここでは、実際に実装してみて
【NW-7対応】jQuery（javascript）でバーコードを読み取ることができた
こんにちわ、平昌オリンピックのスノーボードハーフパイプ、平野くんの銀メダルに興奮しましたね。さて、今回はjavascriptネタを一つ。ちょっと仕事でバーコードを読み取る機能を作らないといけなくなったのですが、探してみたらjavascriptでもバーコードを読み取ってくれる便利なライブラリがあったので紹介したいと思います。 ネイティブアプリにはたくさんのバーコードリーダーがありますし、今ではiosの標準ライブラリ「AVFoundation」でも読み取ることもできる（NW-7は非対応）など、そこまで難易度は高くないんですが、webアプリで読み取るとなるとなかなかよさそうなライブラリがありませんでした。しかし、検索してみたところ「JOB」という優秀なライブラリがありました。 JOBとは？ JOBとは、「Javascript Only Barcodereader」の略語で、その名の通りjavas
jQueryでAjaxするときに知っておきたい、JSONとJSONPの違い
jQueryだけで他のサーバーのコンテンツを読み込もうとすると、クロスドメインの制限がついて回ります。なぜJSONではなくJSONPを使わなければならないのか確認し、他の解決策も検討してみましょう。 ※本記事は2016年7月15日に掲載した記事の翻訳を一部更新したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 Webベースのアプリケーションを開発し、権限のないドメインからデータをロードしようとすると、おそらくブラウザーの画面に以下のようなメッセージが表示されているはずです。 XMLHttpRequest cannot load http://external-domain/service. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘h
jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
JavaScriptにフレームワークが必要な理由 - Qiita
JavaScriptにはむしろもっと抽象化がもたらされるべき - Qiitaという記事で、もう少し踏み込んだ話を書いてみました。 某所でReact.js界隈の人に聞きたいというフレームが発生したのだが、はてなブックマークでコメントしたらIDコールされたので、反論をここに書くことにした。(最近は技術系記事はQiitaにしか書いてないので)。 あくまで僕が考えるなので、JavaScript界の人達が本当はどう思っているかはわからない。そもそもJavaScriptを本格的にさわり始めたのごく最近なので、JavaScript界では異端かもしれない。 元記事では論点(感情)が複数ごちゃまぜになっていたので僕は辛口のブコメを書いたのだが、論点をごちゃ混ぜにするのは意図的にやってるのならばただの詭弁だ。なので、まずは元の記事での論点を整理する。 jQuery (or フレームワーク?) 言語採用 Rea
jQueryでPUT, DELETEリクエストを送るメソッドを定義する - id:anatooのブログ
extend使って$.ajaxメソッドのラッパーを定義してやってるのが以下。 $.extend({ "put" : function (url, data, success, error) { error = error || function() {}; return $.ajax({ "url" : url, "data" : data, "success" : success, "type" : "PUT", "cache" : false, "error" : error, "dataType" : "json" }); }, "del" : function (url, data, success, error) { error = error || function() {}; return $.ajax({ "url" : url, "data" : data, "succe
GitHub - Mottie/Keyboard: Virtual Keyboard using jQuery ~
A jQuery on-screen keyboard (OSK) plugin that works in the browser. Originally posted by Jeremy Satterfield in his blog, jQuery plugins and on Snipplr. Currently maintained by Mottie. Features (Demo) Ease of use An on-screen virtual keyboard embedded within the browser window which will popup when a specified entry field is focused. The user can then type and preview their input before Accepting o
デベロッパーツールとjQueryでREST APIのテストリクエストを実行 | Webエンジニアブログ
サーバ側のエンドポイントにAjaxリクエストを送信 CurlかPostmanを使ってきたがブラウザのコンソールからjQueryを実行する方法も有効 Chromeやfirefoxのjsコンソールから直接jQueryを実行することで、Ajaxのテストリクエストを送信する方法。 Curl Postman REST Client 上の2つのツールを利用してAjaxのテストリクエストを行ってきたが、JSコンソールから直接テストコードをコピペして実行する方法も手軽で良いかもしれない。 やり方 コンソール上でjQueryを実行可能にする ブラウザのコンソールでjQueryを実行できる状態にするのが以下のコードです。 var jq = document.createElement('script'); jq.src = "http://code.jquery.com/jquery-2.1.3.min.js
jQuery Mobile
jQuery Mobile is no longer supported To read more about the status of the jQuery Mobile project, see the announcement blog post. A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Seriously cross-platform with HTML5 jQuery Mobile framework takes the "w
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
スマホサイトのパーツをことごとく網羅！「スマートフォンサイトUI図鑑」は是非手元においておくべき一冊
スマートフォンサイトを構築してて「このパーツなんて言う名前なのかな」「どうやって作るのかな」と言う瞬間は結構あるものです。 そんな悩める子羊を救う良著がKADOKAWA/アスキー・メディアワークスさんより発売されました。その名もCSS3&jQueryで作る スマートフォンサイトUI図鑑。 ありがたくも一冊ご恵贈頂きましたので、レビューしてみたいと思います。 いや、マジこの本オススメ。こう言う本、ほんとに欲しかったんです。 書籍の内容 何度もコピペして使いたい定番43パーツを厳選。 スマホサイトのUIの名前と使い方、ソースコードをまとめました。 「コーチマークってどんなUI?」「タイムラインってどうやって作るの?」 本書は、スマートフォンサイトの制作で欠かせないUIパーツの「名前がわからない」「使い方がわからない」「作り方がわからない」を解決する本です。 定番の43パーツを体系化して収録。豊
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...