jQuery开发笔记（一）

1.$(document).ready() 方法可以简写成$(function(){});

1.这个函数中的代码只会在我们的页面加载时候运行一次，确保执行js之前页面所有的dom已经准备就绪
2.点击"Get Message"按钮，将class为message 的元素的文本改为：“Here is the message”

<script>
  $(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.
    });
  });
</script>


<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

2.Ajax网络请求

1.你的Ajax函数将把文字"The message will go here"替换成此从FreeCodeCam的猫图API中获得的原始JSON数据。

<script>
  $(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.
    });

  });
</script>

2.将获取到的数据渲染到页面上

<script>
  $(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);

      });
    });
  });
</script>

3.理解jquery的$.extend()、$.fn和$.fn.extend()

虽然 javascript没有明确的类的概念，但是可以构建类似类的定义。
jQuery便是一个封装得非常好的类，比如，$("#btn1") 会生成一个 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(); // 页面上为：

jQuery开发笔记（一）

1.$(document).ready() 方法 可以简写成$(function(){});

2.Ajax网络请求

3.理解jquery的$.extend()、$.fn和$.fn.extend()

推荐阅读更多精彩内容

1.$(document).ready() 方法可以简写成$(function(){});