jQuery開発ノート(一)

1.$(document).ready()メソッドは$(function(){})と略記することができる.
1.この関数のコードは、jsを実行する前にページのすべてのdomが準備されていることを確認するために、私たちのページのロード時に一度だけ実行されます.「Get Message」ボタンをクリックし、classがmessageの要素のテキストを「Here is the message」に変更します.

  $(document).ready(function() {
    $("#getMessage").on("click", function(){
      // Only change code below this line.
      $(".message").html("Here is the message");
      // Only change code above this line.
    });
  });




  

    
Cat Photo Finder
  
  

    

      The message will go here
    
  
  

    

      
        Get Message
      
    
  

2.Ajaxネットワークリクエスト
1.あなたのAjax関数は、FreeCodeCamの猫図APIから取得した元のJSONデータに、「The message will go here」という文字を置き換えます.

  $(document).ready(function() {

    $("#getMessage").on("click", function(){
      // Only change code below this line.
      
      
      $.getJSON("/json/cats.json", function(json) {
          $(".message").html(JSON.stringify(json));

      });
      // Only change code above this line.
    });

  });

2.取得したデータをページにレンダリング

  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        
        
        var html = "";
        // Only change code below this line.
        
        json.forEach(function(val) {
          
          var keys = Object.keys(val);
          html += "<div class = 'cat'>";
          keys.forEach(function(key){
            html += "<b>" + key + "</b>:" + val[key] + "</br>";
          });
          html+="</div><br>";
        
});
        console.log(html);
        
        // Only change code above this line.

        $(".message").html(html);

      });
    });
  });

3.jqueryの$を理解する.extend()、$.fnと$fn.extend()
javascriptには明確なクラスの概念はありませんが、類似クラスの定義を構築することができます.jQueryは非常によくカプセル化されたクラスであり、例えば$("#btn 1")がjQueryクラスのインスタンスを生成することを理解することが重要である.
$.extend() = jquery.extentionはjQueryクラス追加クラスメソッドであり,静的メソッドの追加と理解できる.のように

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5

$.fnとは、jQueryのネーミングスペースを指し、fn上のメンバー(メソッドfunctionおよびプロパティproperty)は、jQueryインスタンスごとに有効です.

  jQuery  ，     。

jQuery.fn = jQuery.prototype = {

　　　init: function( selector, context ) {//....　

};

jQuery.fn.extend(object)対jQuery.prototypeが拡張されたのは、jQueryクラスに「メンバー関数」を追加することです.jQueryクラスのインスタンスでは、この「メンバー関数」を使用できます.

$.fn.extend({          
    alertWhileClick:function() {            
          $(this).click(function(){                 
                 alert($(this).val());           
           });           
     }       
});       
$("#input1").alertWhileClick(); //     ：