这篇文章主要介绍“JavaScript下jquery的使用方法”，在日常操作中，相信很多人在JavaScript下jquery的使用方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript下jquery的使用方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

怀来网站建设公司创新互联,怀来网站设计制作，有大型网站制作公司丰富经验。已为怀来数千家提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱，请找那个售后服务好的怀来做网站的公司定做！

本文粗燥的实现jquery的ready、each、bind、``$.fn.extend、$.extend

初始化$

(function (win) {
  var _$ = function (selector, context) {
    /**
     * 通常咱们定义一个 函数 var Fun = function(){}
     * 然后定义一个 Fun.prototype.init = function(){}
     * 那么咱们调用init 的时候 得先要实例化对象 var f = new Fun()
     * 然后f.init()
     * 这里就省去了 var $ = new $()
     */
    return new _$.prototype.Init(selector, context);
  };
  _$.prototype = {
    //初始化$
    Init: function (selector, context) {
      this.elements = [];
      /**
       * 传入的类型是function 就执行ready事件，如果是document 就将document对象插入到this.elements
       * 主要就是判断$(document).ready  和 $(function(){}) 这两种的ready事件的写法
       */
      if (typeof selector === "function") {
        this.elements.push(document);
        this.ready(selector);
      } else {
        var context = context || document;
        var isDocument = (ele) =>
          Object.prototype.toString.call(ele) == "[object HTMLDocument]" ||
          "[object Document]";
        if (isDocument(selector)) {
          this.elements.push(selector);
        } else {
          /**
           * 如果是字符串的话就查询该节点 $('.class') | $('#id')
           */
          if (context.querySelectorAll) {
            var arr = context.querySelectorAll(selector);
            for (var i = 0; i < arr.length; i++) {
              this.elements.push(arr[i]);
            }
          }
        }
      }
    },
    //实现each
    each: function (callback) {},
    //实现ready
    ready: function (callback) {},
    //实现bind
    bind: function (type, callback) {},
  };
  /**
   * 让两个作用域不一样的对象共享一个方法，让他们的原型指向一致，即Init.prototype = _$.prototype
   * 那么原型一致之后 就可以共享this.elements 属性了。
   */
  _$.prototype.Init.prototype = _$.prototype;
  window.$ = _$;
})(window || global);

ready

//实现ready
ready: function (callback) {
  var isDocument = (ele) => Object.prototype.toString.call(ele) == '[object HTMLDocument]' || '[object Document]'
  //如果已经取得了节点
  if (isDocument(this.elements[0])) {
    if (document.addEventListener) { //判断火狐、谷歌
      /**
       * DOM树构建完成的时候就会执行DOMContentLoaded
       * 页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了，才会触发window.onload
       * 这也就是$(document).ready() 比 window.onload 执行早的原因
       *
       * arguments.callee 博客里面有一篇文章 [js-递归] 里面专门讲到了，这里不再解释了
       */
      document.addEventListener('DOMContentLoaded', function () {
        document.removeEventListener('DOMContentLoaded', arguments.callee, false)
        callback()
      }, false)
    } else if (document.attachEvent) { //判断IE
      document.attachEvent('onreadystatechange', function () {
        if (document.readyState == 'complete') {
          document.detachEvent('onreadystatechange', arguments.callee);
          callback()
        }
      })
    } else if (document.lastChild == document.body) { //body已经加载完了，就直接回调了
      callback()
    }
  }
},

each

//实现each
 each: function (callback) {
    if (this.elements.length > 0) {
        for (var i = 0; i < this.elements.length; i++) {
        callback.call(this, this.elements[i], i);
        }
    }
 },

bind

//实现bind
bind: function (type, callback) {
  if (document.addEventListener) { //判断火狐、谷歌
    this.each(function (item, i) {
        item.addEventListener(type, callback, false)
    })
    } else if (document.attachEvent) { //判断IE
    this.each(function (item, i) {
        item.attachEvent('on' + type, callback)
    })
    } else {
    this.each(function (item, i) { //其他浏览器 egg: item.onclick = function(){}
        item['on' + type] = callback
    })
  }
}

$.fn.extend/$.extend

$.fn.extend是为查询的节点对象扩展方法，是基于$的原型扩展的方法

$.extend是扩展常规方法，是$的静态方法

官方给出解释：

jQuery.extend(): Merge the contents of two or more objects together into the first object.（把两个或者更多的对象合并到第一个当中）

jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.（把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法）

$.fn.extend方法的初衷是我们扩展之后可以用$("").newMetod()这样访问，实际上就是给$原型加一个extend方法。这中间的fn其实类似于命名空间的作用，没什么实际的意义。为的是和$.extend作区分

$.fn.extend

; (function (win) {
  ...
  _$.prototype.Init.prototype = _$.prototype;

   _$.fn = _$.prototype; //把对象挂载到jQuery的prototype属性

  var isObj = (o) => Object.prototype.toString().call(o) === '[object Object]';
  $.fn.extend = function (obj) {
    if (isObj(obj)) {
      for (var i in obj) {
        this[i] = obj  //注意这里的this指向是 $.prototype
      }
    }
  }

$.extend

var isObj = (o) => Object.prototype.toString().call(o) === '[object Object]';
...
_$.extend = function (obj) {
    if (isObj(obj)) {
        for (var i in obj) {
            this[i] = obj[i]; //注意这里的this指向是 $
        }
    }
}

这俩看上去一模一样啊，没啥区别，注释里面已经说了，this指向不同。咱们来看个例子：

  
    
    
    
    
    
      (function ($) {
        $.extend({
          sayHello: function () {
            console.log("Hello");
          },
        });
        $.fn.extend({
          sayHello: function () {
            console.log("Hello");
          },
        });
      })(jQuery);
    
    
    
      $(document).ready(function () {
        //$.extend扩展调用
        $.sayHello();

        //$.fn.extend扩展调用
        $("#test").sayHello();
      });