プログラミング学習メモ　PHP・Java・Ruby言語をメインにBlogを書いてみました。: Jquery

ラベル Jquery の投稿を表示しています。すべての投稿を表示

2011年1月30日日曜日

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

～～～～～繰り返し処理～～～～～
①
    <script type="text/javascript">
        $(window).load(function(){
            $("p").each(function(){
                if($(this).text() == "jQuery"){
                    $(this).text("JQUERY");
                }else{
                    $(this).text("JQUERYS");
                }
            });
        });
    </script>
①の解説
指定したセレクタのｐタグの要素の要素の内が「if」もしjQueryならと処理と、ではない時の処理を
実行します。

②
<html>
<head>
    <script type="text/javascript" src="jquery-1.4.3.js"charset="shift_jis"></script>
    <script type="text/javascript">
        $(window).load(function(){
            $("p").each(function(index){
                if($(this).text() == "jQuery"){
                    $(this).text("JQUERY");
                    $(this).prepend(index);
                }else{
                    $(this).text("JQUERYS");
                    $(this).prepend(index);
                }
            });
        });
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
</head>
<body>
<h2></h2>
    <p>jQuery</p>
    <p>jQuery</p>
    <p>jQuery</p>
    <p>jQuerys</p>
</body>
</html>
②の解説
指定したセレクタ要素のループ回数をfunction(index)で指定し、$(this).prepend(index);でループ回数を表示します

③
<html>
<head>
    <script type="text/javascript" src="jquery-1.4.3.js"charset="shift_jis"></script>
    <script type="text/javascript">
        $(window).load(function(){
            $("p").prepend(function(index){
                if($(this).text() == "jQuery"){
                    $(this).text("JQUERY");
                    return index;
                }else{
                    $(this).text("JQUERYS");
                    return index;
                }
            });
        });
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
</head>
<body>
<h2>loadが指定したセレクタの要素が読み込まれた時に実行します。</h2>
    <p>jQuery</p>
    <p>jQuery</p>
    <p>jQuery</p>
    <p>jQuerys</p>
    <script type="text/javascript">
        //document.write(top);
    </script>
</body>
</html>
③メソッドの中にはコールバックを受け付けるメソッドもあります。prependメソッドはreturnで指定
した値を受け取ります　。

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>
⑦の解説
指定したセレクタ要素にマウスが乗った時と、マウスが外れた時の処理

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

～～～～～～～～JqueryでCSSの書きかえ～～～～～～
①
    <script type="text/javascript">
      $(function(){
          $("a").css("font-size","30px");
          });
    </script>

■①の解説
指定したセレクタのCSSプロパティのCSSプロパティ値を追加。
CSSプロパティの値を指定しなかった場合は値を取得する。

②
    <script type="text/javascript">
      $(function(){
          $("a").css({
                  "font-size":"30px",
                "color":"red"
              });
          });
    </script>
■②の解説
指定したセレクタのCSSプロパティとプロパティ値を複数追加

③
    <script type="text/javascript">
      $(function(){
          $("p").offset({
            top : 100,
            left :100
        });

      });
    </script>
■③の解説
指定したセレクタのブラウザからの上からの距離、
指定したセレクタのブラウザからの左からの距離

    ④<script type="text/javascript">
      $(function(){
          var top = $("p").height(100);

      });

    </script>
■④の解説
指定したセレクタの高さをセットします。またwidthは幅を設定します。

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

      });

    </script>
dd

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

～～～～～～HTMLの書き換え～～～～～～～
■javascriptソース
<javascript type="text/javascript">
$(function(){
$("a") .after("<p>test</p>");
});
</javascript>

■ｈｔｍｌソース
<a href="">文字</a>

■解説
①「after」。。。。Jqueryの「after」メソッドは指定したセレクタの要素の後にHTMLを追加します。
②「html」。。。。Jqueryの「ｈｔｍｌ」メソッドはセレクタで指定した要素の内側を操作する
③「append」。。。。Jqueryの「append」メソッドはセレクタで指定した要素の中の最後にHTMLを追加
④「wrap」。。。。Jqueryの「wrap」メソッドはセレクタで指定した要素を指定したHTMLタグで囲みます
⑤「replaceWith」。。。 Jqueryの「replaceWith」メソッドはセレクタで指定した要素を、メソッドの指定
した要素と置き換えます

＊その他いろいろとあるので調べてみようと思います。

～～～～～～HTMLの属性を書き換え～～～～～～～
①      $(function(){
          $("a").attr({
                "href":""
              });
          });
    </script>

■①解説
指定したセレクタの要素の属性や属性値を操作します。

②    <script type="text/javascript">
      $(function(){
          $("a").removeAttr("href");
          });
    </script>
■②の解説
指定したセレクタの要素の属性を削除します。

③ <script type="text/javascript">
      $(function(){
          $("a").addClass("class2");
          });
    </script>

■③の解説
指定したセレクタの要素Classの属性値を追加します
また、複数のclass属性値の追加は半角スペースで区切って追加します

④    <script type="text/javascript">
      $(function(){
          $("a").attr("class","class3");
          });
    </script>

■④の解説
指定したセレクタの要素の属性クラスの値を書き換えます。

   ⑤ <script type="text/javascript">
      $(function(){
          $("a").removeClass("class1");
          });
    </script>
■⑤ 指定したセレクタのクラス値を削除

⑥    <script type="text/javascript">
      $(function(){
          $("a").toggleClass("class1");
          });
    </script>
■⑥の解説
指定したセレクタのクラス値があれば削除、なければ追加

登録: 投稿 (Atom)