ｊQueryのeachとコールバック関数について
jQuery.each(object, callback) - jQuery 日本語リファレンス
eachは配列に対して、順番に処理をおこなうもの。
jQuery.each(object, callback)
このように書かれてあるけど、objectというのが配列の変数名（もしくはオブジェクト名）で、callbackというのはその取り出した配列のひとつひとつになにをするかということを記述する。
jQuery.each(arr, function() {
実行される文
});
こうなる。eachメソッドの引数として別のメソッドというか、命令群を書き込むことができる。こういうのをコールバック関数というらしい。
さらにコールバック関数に対して引数も渡せるということで、
jQuery.each(obj, function(i, val) {
実行される文、iは配列のkey（array[0]の0の部分）を渡し、valはそのkeyの持つ値を渡す。
});
配列を指定して、それぞれの持つデータに対して処理を指定する。ということ。
ｊQuery UI は便利
ｊQueryの拡張パックみたいなもの。UIで派手なことができる。
いろいろできるけど、いろいろやるためのライブラリがそれぞれ別に用意されているから使う機能を最初に宣言してやらないといけない。
こんな感じで。順番もこの通りにやれという話もある。
$(function() {
//$( "#draggable" ).draggable({ axis: "y" });
//$( "#draggable2" ).draggable({ axis: "x" });//$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
//$( "#draggable4" ).draggable({ containment: "#demo-frame" });
$( ".tips" ).draggable({ containment: "parent" });
});あとはこんな感じで、要素を指定して動きを指定してやるだけ。
【appendした要素をドラッグできるようにする】
よくわからないんだけど、要素のオブジェクトを作る時に.draggable({revert: false});これもつけとく。
revertというのは、ドロップした後に自動的に元の場所にもどるオプション。
これじゃなくてもいいと思うのだけど、なにかオプションをつけないと動かない感じ。
【追加した要素についての注意点！】
appendなんかで、ページを読込んだ後に追加された要素に関しては、jqueryでアクションをつけていたとしても適応されない。
jqueryが動くのはおそらくページが読込まれた時に全部が実行されて、それ以後はアクションに対して必要な部分しか動かさないようになってるみたい。これを変えたい場合、たとえば後で追加した要素に対しても、あらかじめアクションを指定しておくような場合
アクションをliveという設定で書いておく。おそらく動きとしてはliveの指定があるアクションに関しては、なにかが追加されるたびに実行されるようになるのだと思う。$("div.tips").live("mouseup",function(e){
});
マウス関係の入力は受け取ってくれるけど、受け取れるものは限られているみたい。
クエリの結果を取得する
クエリを実行するとresuleが返ってくる。
配列変数で返ってくる時もあるので、受け取り方がいくつか用意されている。
mysql_fetch_array($result,MYSQL_ASSOC);
列タイトルをキーとした連想配列で返ってくる。
下にいくつか種類の違うデータ取得方法を書いているけど、違うのは配列で取るか連想配列で取るか。連想配列で取ると列のタイトルを取ってきてくれるということになる。
重要なのはmysql_fetchを実行するとその結果を利用しようとしまいと、ポインタが次に移ってしまうということ。
全部のデータを表示させたい場合はポインタが最後にいく（結果としてfalseを返す）までフェッチを繰り返さないといけない。
while ($row = mysql_fetch_assoc($result)) {
print $row["name"];
}
参考データの取得(SELECT) - MySQLへの接続 - PHP入門
【クエリ結果の行数を受け取る】
mysql_num_rows($result);
【クエリ結果の列数を受け取る】
mysql_num_fields($result);
【更新追加削除された行数】
mysql_affected_rows($reslt);
【クエリの送信でエラーが返って来る時】
Warning: Supplied argument is not a valid MySQL result resource in
こんな感じのエラーが返ってくる時は、直前のクエリーがおかしい。構文が間違っているか、結果が０か。
クエリにエラーが出る時は
if (!$result) {
echo mysql_error();
exit;
}
これを入れて、どこが間違ってるかを教えてもらう。
Javascriptのライブラリ
iepngfix.js
pngの画像をIE6で見られるようにするライブラリ。
AC_RunActiveContent.js
フラッシュのswfファイルをhtmlに貼り付けたときに出るエラーを制御するっぽいなにか。
http://umroom.com/blog/archive/2009/06/021513.html
swfobject.js
フラッシュを表示する時にブラウザにでるメッセージを回避する。
SWFObjectを使ったFlashの埋め込み方法 /SSP
＜!--[if lt IE 7.]>
＜script defer type="text/javascript" src="../js/pngfix.js">
IEだけが反応するスクリプトを表記することができる。
IEのみに適用させるIF – WebTecNote
DOMってなんだ？
Document Object Model
見た目だけで言うと、タグに挟まれてる文字や画像やスタイルをオブジェクトとして扱うという考え方のことだと思う。
「DOMとはDocument Object Modelの略でHTMLやXML文書を取り扱うためのAPIです。 DOMとは - DOM入門 - JavaScript入門」
こういう記述もあるので、APIなのか？htmlとXMLを扱うためのAPIということは＜＞この形に対応しているAPIのことをDOMと呼ぶのだろうか。
var val = document.getElementById("sample").innerHTML = "変更されました";
javascriptではこんな感じでIDを指定してinnerHtmlで書き込むというのが定番っぽいけど、ｊQueryではもっとシンプル。
おそらくjQueryでDOM Elementと表現するものは、＜＞のタグに囲まれた要素をオブジェクトとしたもの。ということだと思う。
それに対してユニークにするためにidも使えるclassも使える。
jQueryの勉強をしよう
jQueryに対して徐々に理解を深めていこうと思います。
jQueryとはなにか。JAVAのimportみたいにたくさんの汎用的なメソッドを集めたライブラリだと思えばいいと思う。
javascriptから呼び出す。機能を増やすバージョンアップツールセットみたいなもの。
jQueryをダウンロードして名前をjquery.jsにして、呼び出しもとから呼び出せる場所にアップする。
jqueryのコードはscriptタグの中に書く。「jquery.js」を呼び出したことで改造javascriptが使えるようになったと考えればいい。
htmlのコードは上から順番に実行されるので、htmlタグが読込まれるまえにjqueryを実行させても対象のhtmlタグがまだ用意されていない場合がある。
$(document).ready(function(){
//ここにjQueryの命令を記述
})
こんな感じで、ページが読込まれるのを待って実行すると良いらしい。
$("#about").html("軽量/高速なライブラリです");
$()の括弧の中身はhtmlタグのidの名前。タグに対してメソッドとその引数を指定する。だから、jqueryが持っているメソッドをどれだけ知っているかが勝負になるっぽい。
$(".about").text("軽量/高速なライブラリです");
$("div.about").text("軽量/高速なライブラリです");
$()の括弧の中身はclass名でもいけるらしいです。上のとおり。なるほど納得。
っていうことは。このようにすればタグを直接指定できるということらしいです。
$("p span").text("【軽量/高速なライブラリです】"); ＜p＞タグ内のspan全部
$("p>span").text("【軽量/高速なライブラリです】"); ＜p＞タグ内の子供だけ。孫はだめ。＜ｐ＞
スタイルシートも触れます。ポップアップウインドウを出せます。
function getCSSValue(){
var cssValue = $("p").css("color");
alert("色の値は「"+cssValue+"」です");
}$("p").css({ "color" : "#ff0000", "background-color" : "#000080"}); CSSをまとめて変更する
$("p").toggleClass("highlight"); クラスを切り替える
非同期通信はこれだけ
$("#news").load("news.txt");
ページが呼び出されたら非同期通信を始める
$("#news").ready(function(){
$("#news").load("news.txt");
});
データを受け取る。ページを表示するのではなく。
下のように変数に代入して保持しておくことができる。
$(function(){
var httpObj = jQuery.get("./news.txt",null, function(){
alert(httpObj.responseText);
});
マウスのドラッグやアコーデオンみたいなUIがらみの動きは、jQueryではできない。
ｊQueryUIというのが別途用意されているのでそれを使ってやる。
長い話になるので、下のリンク先を見ればいいと思います。
第6章 「ドラッグの処理」
UIがらみでできること→リサイズ。（オブジェクトの大きさを変える。縁をドラッグして自由に変形させることができる。）
UIがらみでできること２→テーブルのソート。エクセルみたいに並び替えができる。
【マウスカーソルの位置を取得する】
$("div").mousemove(function(e){}
要素の中でのマウスカーソルの位置が取得できます。
functionの中にeっていう変数が入ってて、これがmousemoveが持ってる情報のオブジェクトみたいなものだと思う。
e.clientXみたいなメソッドでマウスカーソルの位置を拾えるというようなイメージです。このあたり構造を理解しないといけない。
【関数の呼び出し方】
update($("span:first"));function update(j) {
var n = parseInt(j.text(), 0);
j.text(n + 1);
}
このように、引数をつけて関数を呼び出せるわけだけど、DOM要素を引数にすることもできるわけですよね。その時の引数の指定の仕方に注目です。
【クリックした要素の属性を取得する】
$("div").click(function(){
//window.alert($("div.tips").index(this)); ←これは通し番号を取得する。
window.alert($(this).attr("class"));
});
【要素を追加する】
").addClass("box").css({"background-image":"url(backPaper.png)","position":"absolute","top":$y+"px","left":$x+"px","font-family":"'HG明朝B','HG行書体'","width":"250px","height":"150px","padding":"30px 40px 30px 20px"}).text($text);
$jqObj = $("
$("body").append($jqObj);
xamppでPHPを使う
phpファイルの保存場所はC:\xampp\htdocsのフォルダのなか。
