Browse: Home » Javascript

Javascript

【jQuery】input要素からフォーカスアウトした際に処理を行う。

めも。

<input type="text" name="text" class="hoge"/>

<script>
$(function(){
	$('.hoge').focusout(function(){
		console.log($(this).val());
	})
})
</script>

 

2013/10/15 _onichannn , ,

【jQuery】input要素上でキーを離した際に処理を実行する。

めも。

<input type="text" name="text" class="hoge"/>

<script>
$(function(){
	$('.hoge').keyup(function(){
		console.log($(this).val());
	})
})
</script>

簡単だね。

 

2013/10/15 _onichannn , ,

【jQuery】.on()によってバインドされた関数を全て解除する。

メモ。

「.off()」関数を用いる。

以下のようなHTMLがあったとする。

<div class="append">
<button id="btn" type="button">Click</button>
<button id="off" type="button">Off Event</button>
</div>

スクリプトは以下の通り。

<script>
$(function(){
	// 既存、追加問わず全ての#btnに対してイベントがバインドされる
	$(document).on('click', '#btn', function(){
		$('.append').append('<button id="btn" type="button">Appended</button>')
	});
	$('#off').click(function(){
		// #btnにバインドされたイベントが全て解除される
		$(document).off('click', '#btn');
	})
})
</script>

Clickボタンを押すとボタンが追加される。追加されたボタンに関してもメソッドがバインドされているため、クリックすれば更にボタンが追加される。
ここでOff Eventボタンをクリックすると、上記コードの9行目でボタンにバインドされている関数が全て解除され、クリックしても反応しなくなる。

リアルタイムで関数の紐付けを操作したい時にとても便利。

 

2013/10/10 _onichannn , ,

【jQuery】後から追加された要素に対してイベントをバインドする。

めも。

.on()関数を用いる。

例。

下記のようなHTMLがあったとして。

<div class="append">
<button id="btn" type="button">Click</button>
</div>

クリックするとボタンを追加するスクリプトを書く。
この際追加されたボタンに対しても、メソッドをバインドしたい場合は、以下のように記述すればよい。

<script>
$(function(){
	$(document).on('click', '#btn', function(){
		$('.append').append('<button id="btn" type="button">Appended</button>')
	});
})
</script>

過去のバージョンでは「.live()」が存在していたが、「jQuery1.9rc1」より「.live()」は削除されたため、代わりに「.on()」を用いる。
※.live()関数とは引数が異なるので注意されたし。

 

2013/10/10 _onichannn , ,

【Javascript】文字列の指定位置から指定文字数分を切り出す。

メモ。

「substr(index, length)」を用いる。

以下例。

var str = 'abcdefghijklmnopqrstuvwxyz';

var targetSt = 'jkl';
var targetEd = 'xyz';
var st = str.indexOf(targetSt) + targetSt.length;
var ed = str.indexOf(targetEd);
var length = ed - st;
var result = str.substr(st, length);
console.log(result); // mnopqrstuvw

 

2013/10/06 _onichannn , ,

【Javascript】文字列内を検索し出現位置を取得する。

指定文字列を検索し、最も初めにヒットした位置が何文字目かを取得する方法。PHPでいうとstrpos()とかstripos()みたいなことをJavascriptでやりたい場合。

indexOf()、lastIndexOf()を用いる。

■indexOf(needle, index)
文字列の先頭からneedleを検索し、一番最初にヒットした位置を返却する。
indexが指定された場合、その位置から文字列の末端に向かって検索を開始する。
ヒットしなかった場合は-1を返却する。

■lastIndexOf(needle, index)
文字列の末端から遡ってneedleを検索し、一番最初にヒットした位置を返却する。
indexが指定された場合、その位置から文字列の先頭に向かって検索を開始する。
※返却される数値は先頭から数えた位置である点に注意
ヒットしなかった場合は-1を返却する。

 

以下例。

var str = 'abcdefghijklmnopqrstuvwxyz';

var pos = str.indexOf('i'); // 8
var l_pos = str.lastIndexOf('i'); // 8
var pos_i = str.indexOf('i', 9); // -1
var l_pos_i = str.lastIndexOf('i', 9); // 8
var pos_i_2 = str.indexOf('i', 7); // 8
var l_pos_i_2 = str.lastIndexOf('i', 7); // -1

 

2013/10/06 _onichannn , ,

【Javascript】でURLエンコード、デコードする方法。

メモ。

■URLエンコード
下記何れかの関数を用いる。

・encodeURI()
・encodeURIComponent()

違いはエンコードしない文字列に差がある点。

関数名 エンコードしない文字列
encodeURI() ;/?:@&=+$-_!~*.,()a#’
encodeURIComponent() -_!~*.()a’

基本的には「encodeURIComponent()」を使ってればいいのではないかと。

■URLデコード
下記何れかの関数を用いる

・decodeURI()
・decodeURIComponent()

エンコード時に使用した関数と対応するデコード方法で復元を行うこと。またこれらの関数はUTF-8でエンコードを行うので、それ以外の文字コードを渡したい場合別のアプローチをとる必要があるので注意されたし。
※いずれの関数もデコードできない文字が含まれるときはスクリプトを終了させてしまうので、適宜try,catchなどをすること。

 

2013/10/06 _onichannn , ,

【jQuery】セレクト要素内オプションのテキストを取得する方法。

選択されたオプションの値ではなく、表示されている文字列（テキスト）を取得する方法。

例えば以下のようなセレクト要素があると仮定する。

<select class="select">
<option value="1">hoge</option>
<option value="2">piyo</option>
<option value="3">fuga</option>
</select>

この時、「1, 2, 3」という値ではなく、「hoge, piyo, fuga」といったテキストが欲しい場合、下記のようなセレクタで取得することが出来る。

<script>
$(function(){
	// セレクトボックスの値が変更された際に実行
	$('.select').change(function(){
		var text = $(this).children('option:selected').text();
		console.log(text);
	})
})
</script>

「:selected」を指定してやるところがポイント。

 

2013/10/03 _onichannn , ,