共计 1341 个字符，预计需要花费 4 分钟才能阅读完成。
首先明确 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 函数封装后，增加类名和修改内容，我们仅使用三四行代码就可以实现。相比原生方法简单了许多。
正文完
发表至： javascript
2019-06-24
