JQueryの簡単な説明

ちょっと、今回説明する機会があったので、
そのときの内容をメモメモ

---

■JQueryとは
Javascriptのライブラリの１つ
ライブラリ：他にはprototype.jsなど
特徴：メソッドの返り値がJQueryオブジェクトになっている
→つなげて書ける：後でわかる

■JQueryの説明

（１）$(function () {　　なんか書く　}); ではじまる

　　なぜ、こう書くか・・・

　　★$→JQuery()を略したもの

　　★ドキュメントが読み終わったとき、何かしたい場合、

JQuery(document).ready(なんかすること);

　　　と書くことになる。ここで$でかくと、

　　　　$(document).ready(なんかすること)

　　　となるが、(document).readyは省略可能。なので、

$( なんかすること );

　　　になる。

　　★匿名のfunction
　　　一般にJavascriptではfunction abc(){ }のように、
　　　functionのあとに関数名をつけるが、一時的に利用し、
　　　名前をつけなくて言い場合には、これを省略する。
　　　そのため「なんかすること」に匿名のfunctionに
　　　すると、

　　　　　$(function () {　　なんか書く　});

　　　になる。

（２）「なんか書く」に相当する部分
　　　ここで、いろいろ行いたいこと、つまり
　　　　　・何かクリックされたら、処理を行う
　　　　　・ＣＳＳを読み込み時に変更する
　　　　　　　　：
　　　などの処理を書く。

　　★ $("#button1").click(function(){　ボタンがおされたときの処理 });

　　$=JQueryなので、これは

　　　JQuery("#button1").click(引数);

　　に相当する。
　　JQuery()関数は、引数に対応するオブジェクトを返す。
　　そのオブジェクトのclickという関数が実行される。
　　clickの引数は、クリックされたとき実行する関数

　　一般にJQueryは、
　　$(対象）.命令やイベント(その引数→匿名の関数のときもある);
　　という形をとる

　★対象の部分をセレクタという。主に

　　$("div")　　ＨＴＭＬのタグ
　　$("#id1")　　ＩＤ名
　　$(".class")　クラス名

　　で指定する divの中のfontのように限定するときは div fontとスペースで区切る
　　id1とid2のようなときは#id1,#id2のように、,で区切る

これ以外のセレクタは
　　http://ascii.jp/elem/000/000/498/498710/index-2.html
参照

　★セレクタの後には、セレクトしたものに対しての
　　　命令・操作または
　　　イベントを書く
　　命令、操作としては、
　　　　text(書き換えたい言葉);
　　　　html(書き換えたいHTML文);
　　　　css(プロパティ,値);
　　　　val(入力値);
　　　　hide(隠れる時間);
　　　　fadeIn(表示する時間);
　　などを使う
　　詳しくは
http://ascii.jp/elem/000/000/498/498710/index-3.html
参照

　　イベントとしては
　　　click(クリックされたときの関数);
　　　mouseover(マウスオーバーしたときの関数);
　　などがある。
　　関数は、匿名の関数を書くことになる

くわしくは
http://ascii.jp/elem/000/000/498/498710/index-4.html
参照

■JQueryの書き方

（１）はじめに

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/pqgrid.min.js"></script>

等と、JQueryのあるところを書く

　　★ＣＤＮ（コンテンツ　デリバリー　ネットワーク）
　　　一般に言われる意味と違うので注意！
　　　googleに、ajaxのライブラリがある。そこで、これをリンクして
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
　　　などと指定する。このとき、GoogleのJQueryのソースを
　　　CDNということがある（普通のＣＤＮの定義ではない）

　　★ローカルに持つ
　　　上記の方法だと、かならずGoogleを参照することになるので、
　　　ローカルにJQueryを置いて、src="js/jquery.min.js"のようにすることもある

　　★JQueryと、プラグイン
　　　　JQueryには、
　　　　　　JQuery本体jquery.min.js
　　　　　　JQueryuiなど
　　　　のほかに、公開されているプラグインがある。今回は
　　　　　　"js/pqgrid.min.js
　　　　がそれに相当する。このようなものは（なくならないように）ローカルに持っておく

　　　なお、JQueryMobileは、モバイル用のモノで、
　　　JQueryを使っているものの、書き方は結構違う

（２）スクリプトとして
Javascriptとして
<script>
$(function () {

　　なんたらかんたら

});

</script>

として、JQueryを書く。なお、JQueryはJavascriptなので、この中に
ふつうのJavascript
document.f1.ABC.value = "5";

などと書いても、ちゃんと実行する。


■ＡＪＡＸの関係

　画面で非同期処理（画面を遷移させないでサーバーとやり取りする）をするとき
　JQuery.post()；などで出来る。こんなかんじ

http://stacktrace.jp/jquery/api/ajax/jquery.post.html　から引用

とくにJSON形式でのやり取りが多い