Browse: Home » Javascript

Javascript

jQueryにてセレクターの子要素を取得する。

メモメモ。

// 直下の子要素がtdの場合のみ取得可能（孫は無視）
$('selector').children('td');

// 孫も見に行くパターン
$('selector').find('td');
2013/08/06 _onichannn , ,

jQueryにて親要素を取得する方法色々。

メモ。

// すぐ上の親要素がtdであれば取得可能
$('selector').parent('td');

// 先祖要素まで走査するパターン
$('selector').parents('div');

// 一番近い先祖を取得
$('selector').closest('div');

子要素の取得方法はまた後ほど。

2013/08/05 _onichannn , ,

jQueryにてeach()関数を逆から回す方法。

メモ。

$($('selector').get().reverse()).each(function(){
	// 処理を記述
})

each()を逆から走査させている訳ではなく、DOMエレメントを一旦リバースさせてからeach()に放り込むような実装。

2013/08/05 _onichannn , ,

Javascriptにてオブジェクトの中身が空か判定する方法。

メモ。

var obj = {'key': 'value', ...}
console.log(Object.keys(obj).length);

これでオブジェクトの要素数がわかるので、あとは比較演算子で1以上と指定すれば空判定が可能。

2013/08/05 _onichannn , ,

Javascriptの配列とオブジェクトを間違える事勿れ。

超絶初歩的だけど数分間悩んだのでメモ。

// 配列を生成するとき
var data = ['str1', 'str2', 'str3', ...];

// オブジェクトを生成するとき
var obj = {'key1': 'value1', 'key2': 'value2', ...};

ついさっきまで[]と{}の何が違うのとか思ってた件ｗｗｗ

2013/08/05 _onichannn , ,

CakePHP2系にて通信手段がAjaxかどうか判定する。

メモ。

if($this->request->is('ajax')){
	// Ajaxによる通信です。
}

これはシンプルかつ強力。リクエストオブジェクト便利だね。

2013/08/04 _onichannn , , ,

jQueryによるAjax、もっとシンプルに。

この記事←で書いたAjaxの処理部分、わざわざdone()、fail()、に無名関数を入れてやら無くてもよかった模様。

関数を定義した後以下の書き方でOK。

$.ajax({
	url: 'http://example.com/',
}).done(success).fail(error);

ちなみに値をPOSTで送信したい時などはこんな感じ。

var data = {"my":"apple","favorite":"banana","food":"orange"};
$.ajax({
	url: 'http://example.com/',
	type: 'POST',
	data: data,
}).done(success).fail(error);

簡単だね！
ちなみにCakePHPだとPOSTされた値は以下の、

$this->request->data;
$this->params->data;

どっちでも参照できるけど、どっちがいいんだろうね。せっかくリクエストオブジェクトが用意されているならそっちを使ったほうが良いような気もするけど、ついつい$this->paramsの中に都合の良いパラメーターが入ってきてないか確認しにいっちゃうよね。笑

だって$this->paramsちゃん万能なんですもの！！

2013/08/04 _onichannn , , ,

jQueryでのAjax処理、自分用メモ。

やるたびに調べるのはもういやだぁぁぁぁ！
ということで自分用メモ。
※コードが激しくイケてない可能性が十分考えられます。

// まずは成功時の処理と失敗時の処理を定義
var success = function(data){
	// 成功時の処理を記述
	alert('ok');
}
var error = function(data){
	// 失敗時の処理を記述
	alert('ng');
}

$.ajax({
    url: 'http://example.com/',
}).done(function(data){
	success(data);
}).fail(function(data){
	error(data);
});

jQuery1.8以上では上記の記述方法が推奨されており、従来利用していた関数は以下のような対応になっている。

jQuery 1.7以下 jQuery 1.8以上
success() done()
error() fail()
complete() always()
2013/08/04 _onichannn 1 Response , ,