js知识梳理八

JQuery

JQuery中常用的方法

参考网站：[http://jquery.cuishifeng.cn/]

1.原型 $().xxx()

• get / eq
• children
• find
• filter
• index
• next / nextAll
• prev / prevAll
• siblings
• parent
• parents
• each
• css
• addClass / removeClass / toggleClass / hasClass
• attr / removeAttr
• prop / removeProp
• animate
• stop
• finish
• html
• val
• text
• append / appendTo
• insertBefore
• insertAfter
• width / height
• innerWidth / innerHeight
• outerWidth / outerHeight
• scrollTop / scrollLeft

2.对象 $.xxx()

• 检测数据类型的
• isArray
• isFunction
• ajax
• toArray
• toJSON

  jquery 个人理解

  (function(window){
      var jQuery = function(selector,context){
          //=>执行jQuery方法：new jQuery.fn.init 创建INIT这个类的实例,把传递给JQ的参数原封不动的传递给了INIT这个类
          return jQuery.fn.init(selector,context)
      }
      jQuery.fn = jQuery.prototype = {
          constructor:jQuery,
          // $() 实例的方法 。。。。
      }
      var init =  jQuery.fn.init = function(selector,context){
          // $() / jQuery()调用此方法，避免使用new jQuery() 来创建实例对象
      }
      init.prototype = jQuery.prototype; // 执行jQuery原型，init() 方法new 出来的就是 jquery实例对象
      window.jQuery = window.$ = jQuery;
  })(window)
  // $() <==> jQuery() ：创建JQ这个类的一个实例
  // new jQuery();
  //=>饶了一圈的目的即使把JQ像普通函数一样执行，但是返回的结果依然是这个类的一个实例
  
  // JQ即是一个类也是一个对象
  // $()创建它的一个实例，可以调取jQuery.fn/jQuery.prototype上的属性和方法：$().xxx()
  // jQuery.xxx=xxx，这些是作为对象给JQ加的私有属性和访问，使用的时候：$.xxx()
  
  //=>extend在对象和原型上都存在，但是是一个方法
  // $.extend()
  // $.fn.extend()  $.prototype.extend()
  // $().extend()

关于JQ中的EACH

• JQ中的原型和对象上都提供了EACH方法，但是最后用的还是JQ对象上的EACH，JQ中的EACH本质上只有一个（对象中的EACH）
• $.each([obj],[function]) 遍历对象、数组、类数组中的每一项的，有点类似于数组内置方法forEach

   jQuery.prototype.each = function (callback, args) {
       return jQuery.each(this, callback, args);
   };
   jQuery.extend({
       each: function (obj, callback, args) {
           //...
       }
   });
  
   // let $boxList = $('div');//=>基于JQ选择器获取的是一个类数组集合
  //  $boxList.each(function(){}); //=> jQuery.each($boxList, function(){}); 遍历$boxList
  // $.each($boxList, function (index, item) {
  //     //=>当前类数组中有多少项，函数就被执行多少次
  //     //index:当前这一次循环的索引
  //     //item:当前循环这一次对应项的内容
  //     //this:item
  // });