自己用原生js写jquery能够达到寻找节点，调用方法的效果。

实现目标：
1. 通过id，类，元素 寻找节点 $("#box")    $(".box")   $("div")
2. 进阶 可以通过寻找的节点 调用 .html() .css() 方法

一、方法一

1、通过id，类，元素 寻找节点

        eg： $("#box") $(".box") $("div")

function $(a){
        var char = a.slice(0,1);
        var b = a.slice(1);
        switch (char){
            case '#':
                return document.getElementById(b);
                break;
            case '.':
                return document.getElementsByClassName(b);
                break;
            default:
                return document.getElementsByTagName(a);
                break;
        }
    }

        寻找节点：

    console.dir("获取id为box的")
    console.dir($("#box"))
    console.dir("获取所有p标签")
    console.dir($("span"))
    console.dir("获取所有class为list的dom")
    console.dir($(".list"))

2. 进阶 可以通过寻找的节点 调用 .html() .css() 方法

//   css
    HTMLElement.prototype.css = function(k,v){
        k == 'cssText' ? this.style[k]+=v : this.style[k]= v ;
        // 返回原型是为了可以实现链式操做
        return this
    }
    // html
    HTMLElement.prototype.html = function(a){
        return (a == undefined) ? this.innerHTML : this.innerHTML = a ;
    }

调用.html和.css方法：

$('.light')[0].css('cssText',"height:40px;width:40px;")
$("p")[2].css("color","red").html(`aaaaa`)
$('.a')[0].html('222222')

二、方法二： 利用构造函数方法的做法

        在js中，任何用new关键字来调用的函数，都叫做构造函数。

        使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征（属性）和行为（行为），降低代码冗余，提高代码复用率。

(function (){
    function jQuery(selector){
        return new Init(selector)
    }
    //构造函数
    function Init(selector){
        this.node="";//节点
        if(/^#/.test(selector)){
            this.node=document.getElementById(selector.substring(1));
        }else if(/^\./.test(selector)){
            this.node=document.getElementsByClassName(selector.substring(1))
        }else if(/\d*/.test(selector)){
            this.node=document.getElementsByTagName(selector)
        }
    }
    // html
    Init.prototype.html=function (str){
        console.log("html方法")
    }
    // css
    Init.prototype.css=function (attr,value){
        console.log("css方法")
    }
    // ajax方法
    jQuery.ajax=function (){
        console.log("ajax方法")
    }
    
    jQuery.fn=jQuery.prototype=Init.prototype;
    // 扩展方法
    jQuery.extend=function (obj){
        for(let key in obj){
            jQuery[key]=obj[key];
        }
    }
    // 创建一个接口
    window.jQuery=window.$=jQuery
})()

在页面上调用

    console.log($("div"))
    $("#div").html("喝喝喝")
    jQuery("#box")
    $("div").css()
    $.ajax()
    $.extend({
        each:function (){
            console.log("each")
        },
        newFn:function (){
            console.log("newFn")
        }
    })
    $.each();
    $.newFn();