首先明确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函数封装后,增加类名和修改内容,我们仅使用三四行代码就可以实现。相比原生方法简单了许多。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。