JavaScript | みどりのウェブ開発日記

JavaScript

jQuery で簡単にイベントの ON/OFF を行う方法

イベントリスナー関係の難しそうな処理が不要で、初心者でもイベントのオン・オフを切り替えることができる方法です。 要は、イベントを起こさせたくないタイミングで、上記で設定した ID を消したり、つけたりするだけです。 HT […]


JavaScript で数値を3桁区切りにする 【2017年版】

jQuery のメソッドとして使う方法を使っていたのですが、念のため(2017年)に調べなおしてみました。 すると、あまり知られていませんが、最近のブラウザなら組込み関数になったようです。 console.log((12 […]


jQuery 動的に追加した要素の確実な取得方法

on で動的に生成した要素が取得できない場合は、多くは、on のイベントになっている要素が静的でないことが原因です。 動的に生成される要素は不確定要素であるため、起点にしてしまうと取得できないことがあります。 解決方法は […]


初心者のための jQuery の基本情報 ( jQuery 入門以前)

jQuery3 が2016年に正式リリースされました。 が、現場ではまだ1系、2系を使っているところも多いと思います。 また、なぜ3種類もあるのか、今からどれを使ったらいいのかなど、初心者向けに解説します。 公式情報 公 […]


[PHP x Ajax] 非同期でセッションを複数処理する場合の注意点

発生した問題点: 時間のかかる非同期処理を実行 -> その処理が終了する前に画面遷移 画面遷移後、セッションを更新していると、前の画面の処理が終わった瞬間、セッション情報が古くなってエラーが発生 どうやら、非同期処 […]


jQuery で作るシングルページ・アプリケーション(SPA) :70行で動くサンプル付き

こんにちは。jQuery 大好きです。 SPAが気になるこの頃です。 AngularJS や Vue.js を時間のある時にさわって、何とか使えることが分かりホッとしていますが、もっと簡単に使えないものかな、と思っていま […]


jQueryでクロージャ

JavaScriptでそのもので書けば早いかも知れませんが jQueryを使っているサイトなら簡単に書けるので 活用しないともったいない気がします。 ・最初の処理を確認するフラグを 用意するのがポイントです。 var I […]


jQuery でラジオボタンを選択するには

今まで属性の「checked」を true にしていましたが、 下記のやり方を見つけました。 $(“#hoge input[name=’hoge’]”).val([‘a’]); こちらの方が簡単ですね。val 値の中で […]


jQuery で選択された要素の属性値を取得するには

セレクトボックスの選択された値は、通常 val() で取得しますが、 option に属性を追加することで、複数の値を取得したい時があります。 会員1 ↓ たとえば title 属性を追加して、カテゴリIDをセットすると […]


CKEditor にプラグイン「codemirror」を追加する方法

思いのほか高機能で、手軽に導入できたのでメモしておきます。 CKEditorの他のプラグインもほぼ同じ手順で導入することができます。 このプラグインを入れると、「ソース」ボタンを押した時の 表示がきれいなシンタックスハイ […]


JavaScriptでよく利用するエスケープシーケンス

エスケープシーケンスとは、バックスラッシュ記号、または¥記号から はじまる特別な記号を指します。パラメータの中に指定すると、 改行やタブといった特別な処理を行うことができます。 そのほか、シングルまたはダブルクォーテーシ […]


iPad(+Safari)で、 select の option に対して、 hide,show が効かない現象に対する対策

こちらの記事を参考にしました。 http://moshimoworks.com/2012/02/14/jquery-select-tag-manipulation/ MacのSafari(webkit系)では、jQuer […]


JavaScriptの正規表現の書き方

便利な正規表現。 慣れている時はいいけれど、少し時間を置くと忘れがちです。 入力された値は、改ざんを十分考慮しないといけないので、 最終的にはサーバサイドでチェックする必要があります。 PHP や Ruby で正規表現を […]


構文チェックサービスのまとめ

Eclipse のようなIDEの良いところは、構文チェッカが付いていて 間違いがあれば、その場で表示されることだと思います。 エディタでは、構文チェッカがほとんどありません。 色々調べると、Notepad++ では、PH […]


ブラウザで印刷プレビュー画面を出す

印刷プレビュー画面を出すための仕組み。 将来的には、もっと簡単にできてもいいと思いますが、 JavaScript でやるしかないようです。 [2015.08.04 補足] 上記は古いIEのみで動くようです。XPでの案件で […]


HTMLを先に読んで、ページの一部分だけ Ajax で読み込む方法

作ってみると、用途が広がりそうだったのでメモしておきます。 ページの骨子にあたる部分(HTML)は先に読み込んでおいて、 時間のかかる読み込み部分をAjaxで読み込む時の 処理になります。 ローディング画像をページ全 […]


Ajax をオフにした jQuery Mobile でローディング機能を実装する方法

概要 jQuery Mobile を使ってウェブアプリを作ろうとすると container の部分にリンク先のページを読み込むので データベースからデータを頻繁にひっぱってくるページの場合、 遷移後にコンテンツがきちんと […]


ckeditorで複数のインスタンスを処理する場合

はじめはjQueryでやろうとしましたが、 調べてみたら、とてもシンプルに書くことができました。 for(var i in CKEDITOR.instances) { var data = CKEDITOR.instan […]


jQueryのあの書き方をJavaScriptで書き直す時の覚書

とある案件で、IE6時代に作られたサイトを改修しています。 得意のjQueryが導入できないという面倒な環境で、 JavaScriptで何かする時には、そのまま書くしかない状況です。 Ajaxの勉強も、昔はDOMを操作す […]


prototypeとjQueryの共存について

個人的には共存は極力避けた方がいいと思います。 お客様の現場で事例があったので、どういった 使われ方があるのか、確認してみました。 ① まず以下の順番で読み込みます。 prototype jQuery ② クロージャ内は […]


JavaScript マウスの位置情報について

横方向のX座標と、縦方向のY座標がありますが、 いくつか取得方法があり、性質がそれぞれ異なる上、 ブラウザによっては使えないものもあります。 以下はその見取り図です。   IE Firefox Safari O […]


JavaScriptでオブジェクトを削除するには

オブジェクトは delete で削除できる、と説明されているところが 多いのですが、実際、消えませんでした。 var positionXY = new Array(); delete positionXY; 上記だと、残 […]


jQueryプラグインを作るときのテンプレート

今後、よく使いそうなのでストックしておきます。 まずはヘッダー。 /* * hoge.js 0.0.0 – 簡単な説明 * * Copyright (c) 2013 Web Atlier Midori * License […]


要素をランダムで取得する方法と、undefined の対応

jQueryを使っています。 altに番号が振ってある複数の画像の中から ランダムで1つだけ抜き出す、というよくあるパターン。 画像の数は var length = $(“.picture img”).length; こ […]


表の行をドラッグできるようにする

シンプルにいきます。 CDNを使って、jQuery本体とjQueryUIを読み込みます。 <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2 […]


CDNの活用

通常、サーバ上に設置したjQueryファイルを使用する代わりに、 GoogleやMicrosoftがCDN(Content Delivery Network)にて 提供しているファイルを読み込んで使用することができます。 […]


jQueryダイアログボックスについてまとめてみました

ほとんど確認用で「alert」しか使ったことが なかったのですが、調べたらダイアログは 3種類もあって、今まで損をしていたなと 後悔しています…。 alert confirm prompt アラート文を表示するだけの「a […]


FileAPIで画像を選択したらプレビューを表示する

HTML5の実装はまだ発展途上ではありますが、 インターネット・エクスプローラもバージョン10になって ようやくFileAPIでは、Firefox、Chromeと 肩を並べられるようになったようです。 ファイルの書き込み […]


オリジナルのコンテキストメニューの作り方

簡単なウェブアプリケーションが展開できる jQueryプラグインを作っていたところ、 どうしても独自のコンテキストメニュー (右クリックで出てくるメニュー)が欲しくなりました。 既存のものを探したのですが、どうもしっくり […]


画像の大きさを指定エリアの大きさにフィットさせる方法

指定した表示域におさまるように画像を表示し、 画像の大きさが表示域に収まらない場合に 自動縮小するロジックです。 HTML5のCanvasを使うようになってから よく使うようになったので流れをひかえておきます。 先にコー […]



トップに戻る