首先明确jQuery是一个JavaScript库，它的类型是函数，这一点可以通过typeOf查看。需要注意的是，script引入方式是本地文件引入，如果是CDN引入，typeOf返回的结果是undefined

<script src="./img/jquery-3.4.1.min.js"></script>console.log(typeof jQuery);function
jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"

因为DOM选择器使用起来比较麻烦，jQuery就是是通过封装原生的DOM选择器，让我们使用起来更加方便快捷。

<script src="./script/jquery-3.4.1.min.js"></script><style>   .red {        color: red;    }</style><body><div id=div class="div">div</div><script>        console.log(typeof jQuery);    window.jQuery = function (nodeOrTxt) {        let nodes;        if (typeof nodeOrTxt === "string") {            nodes = document.querySelectorAll(nodeOrTxt);        } else {            nodes = nodeOrTxt;        }        //判断传入的参数是node还是string        return {            addClass: function (classes) {                for (let i = 0; i < nodes.length; i++) {                    nodes[i].classList.add(classes);                }                return nodes;            },            setText:function(text){                for(var i=0;i<nodes.length;i++){                    nodes[i].textContent=text;                }                return nodes;            }        }        //返回具体的方法函数    };    window.$ = jQuery;    var $div = $('div');    $div.addClass('red'); // 可将所有 div 的 class 添加一个 red    $div.setText('hi') // 可将所有 div 的 textContent 变为 hi</script></body></html>

1、全局声明window.jQuery，它是一个函数，返回一个对象，对象内有不同的方法，本文例子有2个方法addClass（增加类名），setText修改节点内容。

2、 jQuery 这个全局函数，接受一个参数，可以是node名或者是选择器都可以，因为jQuery函数内调用了原生的 document.querySelectorAll()

3、 jQuery函数已经return了addClass和setText，所以可以直接访问这两个方法。$div.addClass('red')和 $div.setText('hi')

4、addClass函数增加类名的方式是原生的x.classList.add()，setText函数也是原生的x.textContent()方法，但是通过jQuery函数封装后，增加类名和修改内容，我们仅使用三四行代码就可以实现。相比原生方法简单了许多。