JqueryでHTML・CSSの編集でやってみた事忘れないようにを書いてみた③

～～～～～～～イベントの設定～～～～～～～
イベントとはJqueryの実行タイミングを制御する事をさします。
クリック・マウスアウト・マウスオーバ等のユーザの操作に応じてイベントを実行するものもあります。


①
$(document).ready(function()){
//HTMLが読み込まれ、要素を操作する準備が出来た時に実行するも  
}
①の解説
HTMLが読み込まれ、要素を操作する準備が出来た時に実行するものです。
また、
$(function(){
 　　//HTMLが読み込まれ、要素を操作する準備が出来た時に実行するも
});
と省略する事も出来ます。

---

②
    <script type="text/javascript">
            $(window).load(function(){
                $("p").text("testtxt").css("color","red");

            });

    </script>
②の解説
loadが指定したセレクタの要素が読み込まれた時に実行します。

---

③
    <script type="text/javascript">
            $(window).unload(function(){
                alert("Bye now!");
            });
    </script>
③の解説
指定したセレクタ、Windowが閉じられた時にイベント処理が実行されます。
この場合Windowを閉じるとBye nowと表示されます。


＊＊＊＊＊＊その他＊＊＊＊＊＊
$(window).scroll(function(){実行処理});//Windowがスクロールされたタイミングで処理
$(window).resize(function(){実行処理});Windowがサイズ変更されたタイミングで処理
$(window).error(function(){実行処理});Windowを指定するとJavaScriptのエラーが出たタイミングで処理
$(window).click(function(){実行処理}); この場合Windowがクリックされたタイミングで処理されまさす。また、指定セレクタ要素をｐタグやaタグにするとそのタグがクリックされたタイミングで処理されます。


＊＊＊＊＊＊その他＊＊＊＊＊＊
また、下記のソースはWindowが読み込まれ。ｐタグがクリックされた時にBry　Nowと表示されます。
    <script type="text/javascript">
            $(window).load(function(){
                $("p").click(function(){
                    window.alert("Bye now!");
                })
            });
    </script>

---

④
    <script type="text/javascript">
            $(window).load(function(){
                $("p").toggle(function(){
                    window.alert("Bye now!");
                },function(){
                    window.alert("Bye now2");
                },function(){
                    window.alert("Bye now3");
                });
            });
    </script>
④の解説
指定したセレクタ要素がクリックされる度に実行されます。最後のまで行くと一番最初に処理に戻ります。

---

⑤   
<script type="text/javascript">
        $(window).load(function(){
            $("p").mousedown(function(){
                window.alert("Bye now!");
            });
        });
    </script>
⑤の解説
指定したセレクタが要素がマウスダウンされたタイミングで処理が実行されます。

---

⑥
    <script type="text/javascript">
        $(window).load(function(){
            $("p").mousedown(function(){
                $("p").css("color","red");
            });

            $("p").mouseup(function(){
                $("p").css("color","black");
            });
        });
    </script>
⑥の解説
⑤の追加でマウスボタンが戻ったタイミングの処理が追加されました。

---

⑦
    <script type="text/javascript">
        $(window).load(function(){
            $("p").hover(function(){
                $("p").css("color","white");
            },function(){
                $("p").css("color","black");
            });
        });
    </script>
⑦の解説
指定したセレクタ要素にマウスが乗った時と、マウスが外れた時の処理

---