本家のホームページは、http://jquery.com/、ここからjQueryのライブラリィをダウンロードできる。
※現在は、バージョン3.1.1らしい。
- jquery-3.1.1.js
- ソース。タブレーションしてあるので読みやすい。
- jquery-3.1.1.min.js
- jquery-3.1.1.jsからタブレーションや改行を取り除いてファイルサイズを小さくした実用向けのもの。
- jquery-3.1.1.min.map
利点
HTMLやNode.jsでJavaScriptのライブラリィとして使うと、ブラウザの差異をあまり気にせずにコードできる。
イベント・ドリブンなコードを書くので、必要な個所だけ付け加えればいい。
難点
HTMLに取り込むとコードが見づらくなる。
ライブラリィを参照させるとサーバーが必要だしローカルに保存し実行しにくいが、最近のブラウザはページを保存するとそのサブフォルダの参照ファイルを保存してくれるのであまり不便ではない。
jQueryで書くコードは、イベントの事前に宣言することを基本にコードするので、書いたものはイベントが発生しないと実行しないので、コードが上から下に順に動作する訳では無いので、普通のJavaScriptに混ぜると非常に読みにくくなる。
とりあえず
<script>
$(function(){
// この中に変数の初期化やイベントを書いていくと
//HTMLファイルを読み終わった後に、初期化やイベント宣言（っぽい）が処理されるので便利。
});
</script>
妙な形だが、$のパラメータに名無しの関数を書き込んでいるダケ。
普通にJavaScriptを書くと、<body>の部分を読んでいないのに処理されてしまうと、document.getElementByID(‘*****’)な部分が undefine となってしまうので、<body onclick=”init()” >な感じに初期化処理を書かないといけないけど、$(function(){・・・});はそれを自動的にやってくれるので、デザインとスクリプトが別々の人で作っている時には特に便利なので、こんな風にした方がいいのだろう。
セレクターの書き方
document.getElementByID(‘＊＊＊’)のように長く指定せず、$(‘#＊＊＊’)と簡単に書ける。
IDで指定する場合は $(‘#＊＊＊’) 、クラスの場合は $(‘.＊＊＊’) 、タグの場合は $(‘table’) とそのまま書く。
よく見ればcssの指定と同じなので、$(‘td aaa’)のように細かく分けて指定もできるが , で区切って複数指定もできそう。
イベントの書き方
先のセレクターを使い
$(‘#****’).click( function() {
// イベントの中身
});
のように書く。
妙な形だが、セレクターで指定したオブジェクトのclickイベントのパラメータに名無しの関数を書き込んでいるダケ。
もしclickイベントに既に設定されているものがあれば、そのリストの最後に追加される。
オブジェクトの見た目を変える
イベントの書き方と同じ様にプロパティを変える。
書式なら css 。
$(‘#test1’).click(function() {
$(‘#test1’).css(‘background-color’, ‘#777700’)
});
テキストなら text か val 。
※HTMLタグによる。
//INPUTタグやTEXTAREAタグの場合
$(‘#test2’).click(function() {
$(‘#test2’).val(“INPUTタグを変えました”);
});
//DIVタグやTEXTAREAタグの場合
$(‘#test3’).click(function() {
$(‘#test3’).text(“DIVを変えました”);
});
アニメーション
フェードアウトなどがある。
$(‘#test’).click(function() {
$(‘#test’).fadeOut(“slow”);
});
AJEX
一時期流行った非同期通信の例
ajexでファイルを読み込んでいる。指定のdataType: “script” は、読み込んだらトリアエズ勝手に実行してくれるので便利だが、外部変数をイジる場合は使えないかもしれないので、
勘違いしやすいところ
上でイベント宣言（っぽい）と書いたのは、HTMLを全部読まないと使えないイベントの宣言なので、本物の宣言ではない。
なので・・・
（１）同じIDをいくつも使う場合は#***** ではなく [id=****] と書かないと先頭の1個目しか反応しない。
（２）後に追加したものは中途半端に無視してしまうので、※ID指定の場合
$(document).on(‘click’, ‘#test1’ , function() {
$(‘#test1’).css(‘background-color’, ‘#777700’)
});
な感じに書き、タグを追加した時にマメにイベントも処理する様にしないといけない。
という感じに注意が必要になっている。
クラスの場合はどうでもいいらしい。
（３）jsファイルをいっぱい作ると相対パスを変えてしまうと修正がめんどくさい。
<base>で指定できるが、チョット間違えると動かなくなるし、ｊｓファイルのパスを指定すると、cssファイルや画像ファイルの方も困るかもしれないので、
共通のjsファイルで
var base_js_path = “/sample/jquery/js/”;
var base_css_path = “/sample/jquery/css/”;
var base_img_path = “/sample/jquery/img/”;
個別のjsファイルで、
url: base_js_path + “sample12init.js”
と書いた方がマシ。