jqueryの基本を調べてまとめました

「jquery　基本」でググってもう一度、勉強の為にまとめました。

・大体は古いブラウザも使うのでver1.X系を使う
・最近はbodyの閉じタグ直前が多い。
・scriptは必ずjqueryのscriptを読み込ませた後にscriptを書く
・仕事で使う場合はダウンロードして使用するのが安全

//bodyの閉じタグ直前に読み込む

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="js/app.js"></script>

</body>

</html>

$(document).ready(function () {
    //ここに処理を記述する

});

画像などを除いた、読み込みが終わったらfunction()の中の処理を実行するという意味です。
省略形があるので下記を使うのが一般的

$(function () {

    //ここに処理を記述する

});

$(window).load()はページのすべての要素、つまり画像などがすべてロードされた段階でイベントが発火されます。

それぞれのイベントの順番は下記になります。

◆css()

//cssを操作する（色を変更）

$("div").css("color", "pink");

◆addClass()

//classを追加する

$("div").addClass("first");

◆removeClass()

//classを削除する

$("a.active").removeClass("active");

◆append()

//要素の最後にマークアップを挿入する

$("div").append('<p>追加する要素</p>');

◆attr()

//要素の属性を操作する（title 属性や alt 属性なども可）

$("img").attr("src", "img/cake.jpg");

◆wrap()

//要素の属性を囲む

$("p").wrap("<div class='wrap'></div>");

◆fadeOut()

//ゆっくりフェードアウトで非表示

$("img").fadeOut("slow");

◆fadeTo()

//400ミリ秒のスピードで、不透明度0.5にフェードする。

$("img").fadeTo(400, 0.5);

◆slideDown()

//<div id="box">の要素をスライドしながら表示

$("#box").slideDown("fast");

◆hide()

//要素を小さくしながら非表示

$("img").hide("slow");

他にも便利なメソッド、エフェクトはたくさんありそうです。本来であればデモ・スニペットを埋め込みたかったのですが、 bloggerの使い方に慣れていないせいか、上手く動作させることが出来ず。。今後時間が空いた時に、記事のブラッシュアップ、基本デモなど埋め込んで行ければと思います。

Simplog