Javascript

jQuery基本操作まとめ。

いまさら感否めないけど、おさらいの意もこめて。

■セレクタ編

$('div, span') // 複数の要素を指定。
$('div span') // 親要素の子孫を指定。この場合div中のどこかにあるspanを選択。
$('div > span') // 親要素直属の子供を指定。子孫要素は無視される。
$('h1 + p') // 要素の前後関係を指定する。この場合h1直後にあるpが選択される。
$('div[class=header]') // 指定した要素、属性、値を持つ要素を選択。
$('tr:odd') // 偶数番目の要素を指定。
$('tr:even') // 奇数番目の要素を指定。
$('tbody:nth-child(5)') // n番目の子要素を指定。(even)、(odd)を渡せば奇数、偶数を指定可能。
$('tbody:first-child') // 最初の子要素を指定。
$('tbody:last-child') // 最後の子要素を指定。
$('ul li:only-child') // 単一の子要素を指定。この場合ulの中に単一のliを持つものがあれば選択される。
$('input:checked') // チェックボックスにてチェックされた要素を指定。
$('select option:selected') // セレクトボックスにて選択された要素を指定。

■メソッド編

.css()
// 指定した要素のstyleを設定する。プロパティ名のみを指定した場合、現在の設定値を返却する。
.attr()
// 指定した要素の属性を設定する。属性名のみを指定した場合、現在の値を返却する。
.text()
// 指定した要素のテキストを操作する。パラメーターを指定しなかった場合、現在のテキスト要素を返却する。
.html()
// 指定した要素のHTMLを操作する。パラメーターを指定しなかった場合、子のHTML要素を返却する。text()関数と違い文字列のサニタイズは行われない。
.addClass()
// 指定した要素に引数で渡したクラスを追加する。
.removeClass() 
// 指定した要素に引数で渡したクラスが存在していれば削除する。
.toggleClass()
// 引数で渡したクラスが指定要素中に存在していれば削除し、無ければ追加する。
.width()
// 指定した要素の幅をピクセル単位で操作する。パラメーターを渡さなかった場合現在の幅を返却する。
.height()
// 指定した要素の高さをピクセル単位で操作する。パラメーターを渡さなかった場合現在の高さを返却する。
.val()
// input要素のvalueを操作する。パラメーターを渡さなかった場合、現在のvalue値を返却する。

■イベント系メソッド編

.click()
// 要素がクリックされた際に処理を行う。
.change()
// input要素の値が変更された際に処理を行う。
.hover()
// マウスオーバー、アウトをトリガーに処理を行う。第1引数にオーバー時の処理を、第2引数にアウト時の処理を指定する。
.resize()
// ウィンドウサイズが変更された際に処理を行う。
.scroll()
// スクロールアクションが発生した際に処理を行う。

これだけ抑えてれば大体の処理は実現できるかと。(思う!!)

Javascriptにて文字列から指定文字を取り除く。

まずは、特定の一文字を取り除く方法。

var str = '123,000,000,000';
res = str.replace(/,/, '');
console.log(res);
↓
// 123000,000,000

上記は文字列中のカンマ(,)を取り除く場合の例。一番最初に発見したカンマのみ空白文字に置換、文字列を返却して終了。

次に、文字列中全てのカンマを取り除きたい場合。
正規表現の最後にオプションを指定することで、ヒットした全ての文字を置換することが可能。

var str = '123,000,000,000';
res = str.replace(/,/g, '');
console.log(res);
↓
// 123000000000

2行目の通り、正規表現の最後に「g」オプションを渡してやることで再帰的に対象文字列を置換してくれる。

jQueryにてappend()したエレメントをfadeIn()させたい時。

めも。処理の順番が重要。

// 追加したい要素を定義
var html = '<tr><td>Append</td><td>Element</td></tr>';
$(html).hide().appendTo('tbody.target').fadeIn(150);

上記はclass=”target”のtbodyへ、2行目の要素を追加しフェードインさせる際の例。
まず最初にhide()で要素を隠してから追加、最後にフェードインするという流れ。

jQueryUIでMacのログオン失敗時っぽい挙動を再現する。

パスワードが違うとぶるぶる左右にゆれるあれ。

1, まずはjQueryUIを読み込む。下記はgoogleのホスティングサービスを利用した例。まぁどこで読み込んでもいいけどhead内が無難かと。

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2, そしたら使いまわしやすいようにぶるぶる専用の関数を作ってみる

function shake(elem){
	var shakeTimes = 3;		
	$(elem).effect('shake', {times:(shakeTimes)}, 300);
}

※shakeTimesは何回左右にゆれるかを指定
※3行目、最後の因数に総処理時間をミリ秒で指定

3, 作った関数へぶるぶるさせたいエレメントを渡してあげれば完了

target = $('div.error');
shake(target);

上記はclass=”error”のdiv要素をぶるぶるさせる時の例。

jQueryUIめっちゃたのしい。

JavascriptにてPHPのnumber_format()的な処理を行う方法。

数列の3桁ごとにカンマを挿入したい時用。
渡した値が数値以外だった場合は文字列型の0を返却。

function numberFormat(int){
    value = String(int);
    while(value != (value = value.replace(/^(-?\d+)(\d{3})/, '$1,$2')));
    if(isNaN(parseInt(value))) value = '0';
    return value;
}

これは便利。

jQueryのfadeOut()関数は第二因数にコールバックを指定できた。

自分的大発見←
以下例。

target = $('tr');
target.fadeOut('50', function(){
	target.remove();
});

上記はtr要素をフェードアウトさせた後そのまま削除する際の例。
同様にfadeIn()関数でもコールバックを指定することが出来る模様。

Javascriptにて先頭1文字を取り除く。

表示金額をごにょごにょしたかった時、jQueryで文字列中の円マークをどうしても取り除けなかったので仕方なくやった時のメモ。

var str = 'abcd';
res = str.substr(1);
console.log(res);
↓
// bcd

まじごり押し(´・_・`)
もっとスマートなやり方を見つけたらもっかい書き直します。

jQueryにてjson形式の文字列をオブジェクトに変換する。

PHPとかでjson_encodeした配列をフロント側でパースしたい時用。

// 何かしらのjson文字列
var str = '{"my":"banana","favorite":"apple","fruit":"orange"}';
var obj = $.parseJSON(str);
console.log(obj);

json文字列内はシングルクオーテーションが使用出来ないので注意。