１、jQueryのダウンロード
http://jquery.com/download/
からダウンロードする。
jQuery には、圧縮版の Compressed と、非圧縮版の Uncompressed があって、一般的には読み込みの早い圧縮版を使います。
圧縮版は改行などが排除されていて、ファイル名が jquery-1.11.3min.js のように min がついています。
※2.1.4ダウンロードする場合は、 Internet Explorer 6, 7, or 8.はサポートしていません
使用するには、headタグ内に以下のように記述する。
<head>
（中略）
<script type="text/javascript" src="ライブラリをアップロードした場所/jquery-1.8.2.min.js"></script>
（中略）
</head>
ダウンロードしなくても CDN（Contents Delivery Network）、コンテンツデリバリーネットワークを使う方法もあります。
htmlファイルに以下のタグを記載します。
（ただし、ネットワークにつながっていないと、使えないので注意）
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
※jqueryのサイトでは、"http:"がぬけているので、忘れないように！。
２、jQueryを使ってみる
(1)基本形
$(function(){
$("A").B()
});
Aをセレクトといい、Bをメソッドといいます（AをBする）。
例：
・$(“#hoge”) ・・・・ idセレクタ
・$(“.hogehoge”) ・・・・・クラスセレクタ
・$(“li a”) ・・・・・・ 子孫セレクタ
・$(“p.hoge, p.hogehoge”) ・・・・・ グループセレクタ
・$(“.hogehoge”) ・・・・・クラスセレクタ
・$(“li a”) ・・・・・・ 子孫セレクタ
・$(“p.hoge, p.hogehoge”) ・・・・・ グループセレクタ
------- p要素の色を赤にする --------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<title>jquery study</title>
<meta charset="utf-8">
</head>
<body>
<p>jquery study</p>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$('p').css('color','red');
});
</script>
</body>
</html>
<html lang="ja">
<head>
<title>jquery study</title>
<meta charset="utf-8">
</head>
<body>
<p>jquery study</p>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$('p').css('color','red');
});
</script>
</body>
</html>
----------------------------------------------------------
(2) イベントメソッド
セレクタを「クリックした時」や「hoverした時」など、記述する
$(function(){
$("A").B(function{
$("C").D()
});
});
AをBしたときに、CをDする
<イベント一覧>
例：hoge2Aをクリックしたときに、色を緑にする
$(function(){
$(".hoge2A").click(function(){
$(this).css("background-color","green")
});
});
$(".hoge2A").click(function(){
$(this).css("background-color","green")
});
});
(3)エフェクトメソッド
要素を隠すなど、アニメーションなどに使用します。
例：hoge2Aをクリックしたときに、2秒かけて要素がフェードアウトする
$(function(){
$(".hoge2A").click(function(){
$(this).fadeOut(2000)
});
});
$(".hoge2A").click(function(){
$(this).fadeOut(2000)
});
});
例：hoge2Aをマウスオーバーしたときに赤にして、マウスアウトしたときに緑にする
$(function(){
$(".hoge2A").hover(
//マウスオーバー時の処理
function(){
$(".red").css("background","red")
},
//マウスアウト時の処理
function(){
$(".red").css("background","green")
});
});
$(".hoge2A").hover(
//マウスオーバー時の処理
function(){
$(".red").css("background","red")
},
//マウスアウト時の処理
function(){
$(".red").css("background","green")
});
});
(4) フィルタ
要素内で複数要素から指定要素を取得する。
$("#sub > li").css("color","red"); ・・・・・id(sub)内のリスト要素の色を赤にする
フィルタの例：
$(“li:first”) ・・・・ 一番始めの要素
$(“li:last”) ・・・・ 一番最後の要素
$(“li:even”) ・・・・ 偶数番目の要素
$(“li:odd”) ・・・・ 奇数番目の要素
$(“li:last”) ・・・・ 一番最後の要素
$(“li:even”) ・・・・ 偶数番目の要素
$(“li:odd”) ・・・・ 奇数番目の要素
(5) CSS、Attributes(属性)
CSS、Attributes のメソッドは、CSS や属性を取得、変更することができるメソッドです。
例：
・カラーを取得
$("#navi a").css("color");
・カラーを取得
$("#navi a").css("color");
・#navi 内にあるリンク(a)の色を、赤にする
$("#navi a").css("color", "red");
・複数指定の場合
$("#navi a").css({"color": "red", "text-decoration": "none" });
(6) メソッドチェーン
jQuery のメソッドは、ドット（.）でつなげて、複数指定することができます。
例えば、同じ要素にふたつのメソッドを使いたいとき、別々に書かずに、一度に書く事ができます。
例：ボタンクリックしたときに、 色を緑にして、メッセージ表示する
$("button").click(function () {
$("div").css("background-color","green").text("buttonがクリックされました");
});
$("div").css("background-color","green").text("buttonがクリックされました");
});
まだ、いろいろ覚える事はありますが、上記の内容を覚えて、後は、少しづつ覚えていきましょう。
【参考URL】
0 件のコメント:
コメントを投稿