jQueryことはじめ。

Tweet

Share on Tumblr

jQueryことはじめ。 | Bamboo lath 日々の記録たまに仕事で使ってたけどちゃんとわかってないのでやってみる。
今後結構使うことになりそうなので今のうちに。
特に今回はたいしたことじゃない。。
結局セレクタを使いこなすっていうのが大事。

セレクター

要素を指定するための。
「操作が発生した要素」や「変更したい要素」を指定するのが「セレクター」

$("セレクター")

セレクターにはCSSとほぼ同様なものが使える。

$("#target img")

上記であればid属性が”target”の要素内にあるimg要素を指定できる。

jQueryで利用できる主なセレクター

HTML/CSSを操作する

jQueryでHTML/CSSを操作するには、次のような書式で記述する。

$("セレクター").jQueryの命令

イベント発生時に行いたい処理も以下のような書式で記述する。

$("セレクター").イベント(function(){
イベント発生時の処理
});

サンプルコード

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(function(){
                    // 文字変更と色変更
                    $("p#first").text("jQueryで変えちゃた。");
                    $("p").css("color", "red");

                    // 画像の切り替え
                    $("button").click(function(){
                            $("img").attr("src", "sea.jpg");
                        });
            })
        </script>

        <p id="first">変更前</p>

        <button>画像を変更</button>
        <p><img src="flower.jpg" alt="" /></p>

jQueryで利用できる主なHTML/CSSを操作する命令

アニメーションの例

ノーマルアニメーション

$("セレクター").show(スピード);
$("セレクター").hide(スピード);

スライドアニメーション

$("セレクター").slideDown(スピード);
$("セレクター").slideUp(スピード);

フェードアニメーション

$("セレクター").fadeIn(スピード);
$("セレクター").fadeOut(スピード);

サンプルCSS

    div{
        width:300px;
        height:300px;
        background:red;
        display:none;
    }

サンプルjs

    $(function(){
            $("button").click(function(){
                    $("div").show("slow");
                });
    })

サンプルHTML

<button>表示</button>
<div></div>

とりあえずここまで。