jQuery

【jQuery】on() で イベントをバインドする。

今更ながら、jQuery の on() を知った。 http://api.jquery.com/on/本当は live() を知って調べたんだけど、 これは jQuery 1.9 で廃止になったらしい。 同時に bind() / delegate() も廃止になる。 これら廃止になった3つをまとめたのが on() になる。 つま…

【JavaScript】ドラッグ&ドロップで画像を非同期アップロードできるライブラリ dropzone.js の デフォルトCSS を有効にしたままカスタマイズする

【追記 2013/10/24】 サンプルをアップしました。 https://github.com/pospome/DropzoneJsSample 【追記 2013/09/13】 CSSの設定を追記しました。 基本的な使い方を書きました。 http://d.hatena.ne.jp/pospome/20130913/1379050713 dropzone.jsはAjaxを利用…

【jQuery】2重submitを防止する

2重submitを防止する。jQueryには one() というメソッドがある。 これは、各要素で一度しか呼べない処理を設定できる。 $('#btn').one('click', function(){ alert('1度しか表示されません。'); }); これで2重submit対策をしてもいいが、 JSでエラーチェック…

find() と filter() の違い

find() は 子孫要素を取得する時に使い、 filter() は 条件を絞り込むために使う。 var obj = $('#test'); var hoge = obj.find('input'); var fuga = obj.filter('input'); 上記の例では、 id = test の要素を取得し、 それに対して find() と filter() を…

CSSはCSSで管理する

今までは CSS を jQuery で直接書いていた。$('#test').css('color', 'red');これでもいいが、CSS がコード内に散らばるのはよくないので、 CSSはCSSで管理して、 addClass() などのクラス操作メソッドで操作する。 CSSは以下のようにクラス毎にまとめておく…

find() のすすめ

今まではセレクターで $('div', '#test') というように第2引数に要素を取得する範囲を指定していた。でも、jQueryには find() というセレクタ用のメソッドがあって、 これも要素の絞込みに使用する。 http://semooh.jp/jquery/api/traversing/find/expr/で、…

セレクターの or と and

or → $(#test1, #test2) and → $(#test1 + #test2)つまり、「,」か「+」を使えばいい。簡単だー。 jQueryよくできてるな。 すごいな。

エフェクトの動きを設定するプラグイン

easing.js ってのが面白い。 http://gsgd.co.uk/sandbox/jquery/easing/アニメーションの幅が広がりそう。

$(function(){}); のスコープ

今まで知らなかった。 $(funciton(){ }); jQueryの上記のonload()記法は独自のスコープを持っていて、 他のjsファイルのonload()記法と同じメソッド名でも大丈夫。これで汎用性のあるメソッド名を使える。

要素の存在確認

要素の存在はsizeメソッドで確認する。 var elementCount = $('#id').size(); if(elementCount == 0){ ない }else{ ある。存在する場合はsizeが1以上になる。 }

onloadの競合

開発を進めると、 JavaScriptを追加することがあり、 onloadの競合が起こる。こともある。 ちょっと調べたらjQueryのonload処理は競合しないといことがわかった。 onload処理ってのは以下。 $(function() {/* 本体 */}); 便利だ・・・。

jQueryでアニメーション

JavaScriptで画像のフェードイン、フェードアウトを実装することになった。なので、タイマーを使ってcssのopacityを設定していこうと思ったが、 jQueryのanimateメソッドで実現できた。animate({属性値:値}, アニメーション時間(ミリ秒)); 属性はcssのものを…