jQueryについて知らない5つのこと

jQueryは非常に強力なライブラリですが、その豊富な機能の一部は不明確です。jQueryソースコードを学習せずにjQuery Pocket Reference（著者が私の新しい本を書いている）を読まなかった場合、それらについては知らないかもしれません。 この記事には、この本からの抜粋が含まれています-あなたが知らないかもしれない5つの有用なこと。



1）$（ドキュメント）.ready（）を使用する必要はありません



2）このタイプの要素を作成するためにタグを$（）関数に渡すことができ、作成された要素に設定されるオブジェクトの属性（2番目の引数として）を渡すことができることをおそらく既に知っています。 2番目の引数には、attr（）メソッドに渡す任意のプロパティを指定できます。 さらに、イベントと同じ名前のプロパティ（クリック、マウスオーバー）がある場合、プロパティの値はこのイベントのハンドラーの関数として使用されます。

たとえば、次のコードは新しい要素を作成し、3つのHTML属性を設定し、イベントハンドラー（クリック）関数を登録します。

var image = $("<img>", { src: image_url, alt: image_description, className: "translucent_image", click: function() {$(this).css("opacity", "50%");} });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3）jQueryには、イベントハンドラーを登録するためのclick（）およびchange（）などの単純なメソッドがあり、また、イベントを登録するためのより一般的なメソッドであるbind（）が定義されています。 bind（）の重要な機能は、登録時にイベントハンドラーの名前空間（またはいくつかの名前）を指定できることです。 これにより、ハンドラーのグループを定義できます。これは、後で特定のグループのすべてのハンドラーを呼び出したり、登録解除したりする場合に非常に便利です。 ハンドラーの名前空間は、再利用されたjQueryコードのライブラリーまたはモジュールを作成するプログラマーに特に役立ちます。 ハンドラーの名前空間は、CSSのクラスセレクターのように見えます。

名前空間でイベントハンドラーをバインドするには、イベント名とハンドラーの名前空間を使用します。

 //  f    mouseover    "myMod" $('a').bind('mouseover.myMod', f);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モジュールが名前空間を使用してすべてのイベントをログに記録している場合、unbind（）を使用してすべてのイベントを簡単にアンフックできます。

 //     mouseover, mouseout //    "myMod" $('a').unbind("mouseover.myMod mouseout.myMod"); //        myMod $('a').unbind(".myMod");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4）jQueryにはfadeIn（）などの単純なアニメーションメソッドがあり、汎用のアニメーションメソッドanimate（）も含まれています。 animate（）に送信するオプションオブジェクトのキュープロパティは、以前のすべてのアニメーションが完了するまで、スケジュールされたアニメーションを遅らせるかどうかを決定します。 デフォルトでは、アニメーションは順番に呼び出されますが、キュープロパティをfalseに設定することでこれを無効にできます。 順番が違うアニメーションはすぐに開始されます。

非キューイングアニメーションの場合、後続のアニメーションキューは遅延しません。 次のコードを検討してください。

 $("img").fadeIn(500) .animate({"width":"+=100"}, {queue:false, duration:1000}) .fadeOut(500);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

エフェクトfadeIn（）およびfadeOut（）にはキューがあり、キューなしでanimate（）メソッド（widthプロパティを1秒間アニメーション化します）を呼び出しました。 オブジェクト幅のアニメーションは、fadeIn（）と同時に開始されます。 fadeOut（）エフェクトは、fadeIn（）エフェクトが終了するとすぐに開始されます



5）jQueryは、「ajaxStart」および「ajaxStop」イベントをトリガーして、Ajaxネットワークアクティビティの開始と終了を示します。 jQueryがAjaxリクエストを実行せず、新しいリクエストが初期化されると、jQueryは「ajaxStart」イベントを発生させます。 新しいリクエストが呼び出されたが、現在のリクエストが完了していない場合、ajaxStartイベントは発生しません。 ajaxStopイベントは、最後の保留中のAjax要求が完了し、jQueryがネットワークアクティビティを表示しなくなったときに発生します。

これらのイベントのいくつかは、「読み込み中...」アニメーションまたはネットワークアクティビティアイコンの表示/非表示に役立つ場合があります。 例：

 $("#loading_animation").bind({ ajaxStart: function() { $(this).show(); }, ajaxStop: function() { $(this).hide(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらの2つのイベント「ajaxStart」と「ajaxStop」は、ページの任意の要素に添付できます。 jQueryはそれらをグローバルに呼び出します。



私は翻訳者から 2/5 を知りませんでしたが、定期的にjQueryリリースをフォローしています（ajaxStart / ajaxStopバンドルは特に喜ばれました）、結局この本を読む価値があると思います。 他にどのような機能を追加できますか？