一: jQuery基本结构
1:jQuery的本质是一个闭包
2:jQuery为什么要用闭包来实现: 为了避免多个框架的冲突
3:jQuery如何让外界访问内部定义的局部变量:window.xxx=xxx
(function test(){ var num=1; window.num=num; })(); console.log(num);
4:jQuery为什么要给自己传递一个 window参数?:为了方便后期压缩代码,为了提升找到的效率
5:jQuery为什么要给自己接收一个undefined参数? 为了方便后期压缩代码,IE9以下的浏览器undefined可以被修改,为了保证内部使用的undefined被修改,所以需要接受一个正确的undefined
<!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>
<script>
(function(window,undefined){
var jQuery=function(){
return new jQuery.prototype.init();
}
jQuery.prototype={
constructor:jQuery
}
jQuery.prototype.init.prototype=jQuery.prototype;
window.jQuery=window.$=jQuery;
})(window);
</script>
</head>
<body>
</body>
</html>
二:jQuery入口函数测试
jQ入口函数传入不同参数得到的实例
1:传入“ ” null undefined NaN 0 false
<!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>
<script src="../jQuery/jquery-3.4.1.min.js"></script>
<script>
$(function(){
//会返回一个空的jQuery对象
console.log($());
console.log($(''));
console.log($(null));
console.log($(undefined));
console.log($(NaN))
console.log($(0))
console.log($(false))
})
</script>
</head>
<body>
</body>
</html>
2:传入html片段
<script>
$(function(){
//会将创建好的DOM元素存储到jQuery
console.log($('<p>1</p><p>2</p><p>3</p>'));
})
</script>
3:传入选择器
<script>
$(function(){
//会将找到的所有元素存储到jQuery对象中
console.log($('li'));
})
</script>
4:传入数组
<script>
//会将数组中存储的元素一次存储到jQuery对象中返回
$(function(){
//会将找到的所有元素存储到jQuery对象中
console.log($([1,2,3,4,5,6]));
})
</script>
5:传入伪数组
<script>
$(function(){
//会将数组中存储的元素一次存储到jQuery对象中返回
var likeArr={0:'a',1:'b',length:2};
console.log($(likeArr));
})
</script>
6:传入对象
<script>
$(function(){
//会将传入的对象存储到jQuery对象中返回
function Person(){}
console.log($(new Person()));
})
</script>
7:传入DOM元素
<script>
$(function(){
//会将传入的DOM元素存储到jQuery对象中返回
function Person(){}
console.log($(document.createElement('div')));
})
</script>
8:传入基本数据类型
<script>
$(function(){
//会将传入的DOM元素存储到jQuery对象中返回
function Person(){}
console.log($(document.createElement('div')));
})
</script>