jQueryの書き方の基本

コピペで対応し続けているjQuery。基本的な書き方でスッキリさせたいことをまとめました。

基本の記述いろいろ

jQueryは「jQuery(function() {});」や「$(function() {});」で書き始める。JavaScriptが「function kansu ( hensu ) {」と似ていルが微妙に違う。混乱する。

//jQuery
jQuery(function() { {
});
$(function() { {
});

//JavaScript
 function kansu ( hensu ) { {
});

jQuery(function() {});と$(function() {});は同じ。
jQueryを$に置き換えているだけ。

そして、$(function() {});は、以下の省略形。

$(document).ready(function() {
		//.ready()イベント発生時の処理を書く
	     });

htmlファイル内に記述されたDOM要素がすべて読み込まれた（操作可能になった）時に引数のfunctionを実行します

という意味。

jQueryでたとえば<table></table>をまるっと挿入したいとき、どうやって書くんだろうと思った。解説サイトでは「<a href=””>この部分が挿入されるよ</a>」的なサンプルは見るけど、複数行にわたるhtmlを載せているサイトがパッと見つからなくて、困った。

結論は＋でつなげればOK。

	function(){
	$(
		'<table>'+
		'<tr>'+
		'<th></th><td></td>'+
		'</tr>'+
		'</table>'
	)};

複数行にわたるhtmlのサンプルがない理由の一つには、html内のすべての改行やタブを消してしまいさえすればOkであることが考えられる。でもあ改行やタブを失くすとメンテナンスするときに億劫なので、助かった。

jQuery本体やライブラリをパッケージで落とすと、jQuery-×.×.×.jsとjQuery-×.×.×.min.jsというように2種類入っていることが多い。どう違うのか、どう使い分けるのか。

どうやらminとついている方は圧縮版（Minified）で、minがついてないほうは非圧縮版のよう。圧縮版は改行などをしないことでファイルサイズを小さくしているようです。

つまり、通常はmin付きのほうを使えば軽くて良い、と。

$(this)は、イベントの対象になった特定の要素。

<li>に対するマウスイベントのクリック（.click( )）だったら、すべての<li>ではなく、実際にクリックされた<li>だけを指す。