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);
