とても初歩的なjQuery(僕のスニペットの中から)

お昼に外に出たら霰と霙(漢字で書くとなんだかちょっと迷いますね)の中間みたいなのに降られたyasaiです。

急に冬っぽくなってきまして、北国生まれの寒がりにはちょっと厳しい季節になってきました。

長袖をせっせと着込んで、早速着ぶくれしてます。

ちなみに、暑いのも苦手です。ずっと春がいいなぁ。

さて最近はWordPressのお勉強していて、先日久しぶりにjQuery書いたら、「あ、PHPじゃない…」と思うくらいアホになってたわけでして。

これはいかんなぁということで、ごく初歩的なことからjQueryのおさらいをしてみたいと思います。

基本的には適当に保存してあったスニペットからですが…

「$(document).ready()」と「$(window).load()」

僕もはじめは呪文のように覚えてましたが、$(document).ready()と$(window).load()の違いについて。

まずは使い方。


その1
$(document).ready(function(){
  //ここに処理
});

その2
$(window).load(function(){
  //ここに処理
});

その1

$(document).ready(function(){

//ここに処理

});

その2

$(window).load(function(){

//ここに処理

});

どちらも意味合いとしては、「～が完了したら」ってことですが、

ここではざっくりつかむと、$(document).ready()のほうは、「HTML読みこみ終わったら処理」。

$(window).load()の方は「描画とかも終わったら処理」。って感じですかね。

だから、画像の高さを取得したいとかいう場合は、$(window).load()の方をつかわないとダメなんですね。

タイミングを見計らって処理「setTimeout()」

これもよく使いますよね。


var time = 1000;
$setTimeout(function(){
  //処理
},time);
//timeは何ミリ秒後に処理が始まるか。
//1秒後だったら1000。

var time = 1000;

$setTimeout(function(){

//処理

},time);

//timeは何ミリ秒後に処理が始まるか。

//1秒後だったら1000。

アニメーションさせるときとかによく使いますねー。


$(document).ready(function(){
  $(&#39;#btn&#39;).on(
    &#39;click&#39; : function(){
      var time = 1000;
      $setTimeout(function(){
        $(#content).fadeOut(1500);
      },time);
    }
  );
)}

$(document).ready(function(){

$('#btn').on(

'click' : function(){

var time = 1000;

$setTimeout(function(){

$(#content).fadeOut(1500);

},time);

}

);

)}

例えばこんな感じですかね。これで、#btnをクリックして1秒後に#contentがフェードアウトします。

今回はとても初歩的なところですけど、自分のリハビリもかねて算数ドリルです。

やっぱりなんでも日々触ってないと抜けていくもんだぁと実感している最近です。

抜けていくのはあっという間なのに、覚えられるものが年々少なくなっているのは、これどういうことなんでしょう?(苦笑)

とても初歩的なjQuery(僕のスニペットの中から)

「$(document).ready()」と「$(window).load()」

タイミングを見計らって処理「setTimeout()」

関連

コメントを残すコメントをキャンセル

「$(document).ready()」と「$(window).load()」

タイミングを見計らって処理「setTimeout()」

関連

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル