カテゴリー : JavaScript

[jQuery] mouseover/mouseout と mouseenter/mouseleave の違い

jQuery のイベント mouseover/mouseout, mouseenter/mouseleave の違いを知らずに、かなりハマってしまった…。

下記のサイトが分かりやすく説明してくださってました。

DOM Leve3 イベント mouseover/mouseout, mouseenter/mouseleave それぞれの違いについて – 今日もスミマセン。

mouseenter/mouseleave イベントの方が、利用用途として直感的ですね。

mouseover/mouseout は、内部のDOMを出入りするときもイベントが発火してしまうので、思わぬ挙動をしてしまって結構悩みました。

[JavaScript] モバイルのタップイベントを高速化するライブラリ「fastclick.js」

モバイルのタップイベントを高速化するJavaScriptライブラリ「fastclick.js」が便利そうなのでメモ。

ftlabs/fastclick

スマートフォンwebのタップイベントを高速化するライブラリ"fastclick.js"をさわってみた – ushisantoasobu's blog

[jQuery] Minimalect で値の変更を反映させる方法

フォームのselect要素を綺麗に表示させる jQuery ライブラリ「Minimalect」で、値の変更を反映する方法をメモ。

$("#myselect").val("newvalue").change();

.val() だけでは値はセットされるが表示が変わらないので、.change() で変更したことを教えて上げる必要があるみたいです。


参考情報

Minimalect by groenroos

[JavaScript] 日付や時刻をカンタンに扱えるライブラリ「moment.js」

JavaScript の日付や時刻をカンタンに扱えるライブラリ「moment.js」が超便利だったのでメモ。

Moment.js | Parse, validate, manipulate, and display dates in javascript.

moment/moment – github

JavaScriptで日付を扱うならこれ!「moment.js」 : アシアルブログ

[jQuery] jQuery.ajax(options)、$.ajax のメモ

jQuery の $.ajax メソッドの引数や、success, error, complete などに指定する引数をよく忘れてしまうのでメモ。

jQuery 1.7 までの $.ajax

$.ajax({
  url: 'http://api.example.com/v1/posts',
  type: 'POST',
  dataType: 'HTML',
  data: {
    id: '123'
  },
  success: function(data, statusText, xhr){
    if (xhr.status === 200) {
      // 成功時の処理
    } else if (xhr.status === 302) {
      // HTTPステータスコードによって、処理を分岐
 
      // 302 でリダイレクトさせたり
      location.href = 'http://example.com/redirect';
    }
  },
  error: function(xhr, statusText, error) {
    // エラー処理
  },
  complete: function(xhr, statusText){
    // 共通処理
  }
});

jQuery 1.8 以降の $.ajax

success, error, complete が .done, .fail, .always に変更されているようです。

これについては、いつか更新します。


参考情報

jQuery.ajax()のまとめ: 小粋空間

jQuery モダンAjaxな書き方を目指して 〜Deferredを使ったAJAX〜 – Hack Your Design!

jQuery.ajax(options) – jQuery 日本語リファレンス

jQuery.ajax() | jQuery API Documentation

[jQuery] チェック済みの checkbox の値を取得して配列へ格納する方法

jQuery で、チェック済みの checkbox の値を取得して配列へ格納する方法をメモ。

<input type="checkbox" name="seasons" value="spring"> 春
<input type="checkbox" name="seasons" value="summer"> 夏
<input type="checkbox" name="seasons" value="autumn"> 秋
<input type="checkbox" name="seasons" value="winter"> 冬

チェックされた checkbox の値を取得して、配列に格納するコードは下記の通りです。

var checkedSeasons = [];
$('[name="seasons"]:checked').each(function(){
  checkedSeasons.push($(this).val());
});

参考情報

jQueryでチェックされたcheckboxの値を取得して配列に格納する方法、また、配列をcheckboxの値に設定する方法 – knt45の日記

[CoffeeScript] object の Iterator は for of

CoffeeScript で、object のイテレータは for of らしいです。

CoffeeScript

for key of object

JavaScript

for (key in object) {
}

参考情報

javascript – for (var key in object) in CoffeeScript? – Stack Overflow

[CoffeeScript] @ と => で that = this を無くす

ここを読むんだ!

CoffeeScriptの@について再び | ひげろぐ

[jQuery] フォームの値をクリア/リセット/空にする方法

jQuery でフォームの値をクリアする方法をご紹介します。

var clearAllFormValues = function() {
  $('input,textarea')
    .not('input[type=\"radio\"],input[type=\"checkbox\"],:hidden, :button, :submit,:reset')
    .val('');
  $('input[type=\"radio\"], input[type=\"checkbox\"],select')
    .removeAttr('checked')
    .removeAttr('selected');
}
// div#modal-area 内のフォームの値をクリアする
var clearModalAreaFormValues = function() {
  $('#modal-area')
    .find('input,textarea')
    .not('input[type=\"radio\"],input[type=\"checkbox\"],:hidden, :button, :submit,:reset')
    .val('');
  $('#modal-area')
    .find('input[type=\"radio\"], input[type=\"checkbox\"],select')
    .removeAttr('checked')
    .removeAttr('selected');
}

以上です。

CoffeeScript のインストール方法

CoffeeScript をインストールする方法をメモ。

事前準備

npm からインストールするのが定番みたいなので、nvm と Node.js をインストールしておく。

[Node.js] バージョン管理ツール「nvm」を Mac にインストールする方法

CoffeeScript のインストール

npm install -g coffee-script コマンドでサクッとインストールする。

% npm install -g coffee-script
npm http GET https://registry.npmjs.org/coffee-script
npm http 200 https://registry.npmjs.org/coffee-script
/Users/bakorer/.nvm/v0.6.19/bin/coffee -> /Users/bakorer/.nvm/v0.6.19/lib/node_modules/coffee-script/bin/coffee
/Users/bakorer/.nvm/v0.6.19/bin/cake -> /Users/bakorer/.nvm/v0.6.19/lib/node_modules/coffee-script/bin/cake
coffee-script@1.6.1 /Users/bakorer/.nvm/v0.6.19/lib/node_modules/coffee-script
 
% source ~/.zshrc                                                    
 
% coffee -v
CoffeeScript version 1.6.1

カンタンですね!

参考情報

coffeescript を ubuntu 12.04 にインストール – {[Takuya71]}の日記