30°

用js简单封装一个jQuery方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div>001</div>
    <div>002</div>
    <div>003</div>
  </body>

<script> (function(global) { function jQuery(selector) {

    return new jQuery.prototype.init(selector);
  }
  jQuery.prototype = {
    constructor:jQuery,
    init:function(selector){

      const elements = document.querySelectorAll(selector);
      
      // querySelectorAll 为ES5中方法,可以根据标签、类名、id获取元素
      
      for(let i = 0;i&lt;elements.length;i++){
        this[i] = elements[i];
      }
      this.length = elements.length;
    },

    css(name,value){
      for(let i =0;i&lt;this.length;i++){
        let element = this[i];
        element.style[name] = value;
      }
    }


  }
 	 //此时创建的jQuery是init构造函数的实例
     //css方法在jQuery.prototype对象中
     //为了让jQuery对象可以访问到css方法
     //让init的原型继承自jQuery.prototype
    
  jQuery.prototype.init.prototype = jQuery.prototype;
	//---1、创建了一个init的对象
    //---2、执行css方法
    // --&gt;找对象本身有没有css方法,并没有
    // --&gt;找对象的原型:init.prototype --&gt;jquery.prototype
    // --&gt;发现jquery.prototype中有一个css方法
    
  window.$ = window.jQuery = jQuery;
})(window)


$("div").css("color","red");

</script> </html>

本文由【jellydd】发布于开源中国,原文链接:https://my.oschina.net/u/4143235/blog/3160118

全部评论: 0

    我有话说: