Mr.J-- jQuery学习笔记(二十二)--入口函数

入口函数的作用：等待页面加载完毕，有一个独立的作用域。

原生JS 和 jQuery 入口函数区别：

（1）JS的window.onload事件必须要等到所有内容，以及外部图片之类的文件加载完之后，才会去执行。

（2）JQuery入口函数是在所有标签加载完之后，就会去执行。

jQuery基本结构

jQuery是一个闭包

之前有写过闭包：Mr.J--JS学习（闭包及IIFE）

Mr.J--JS学习（闭包私有化）

(function test(){
    console.log("test");
})()

执行结果：test

对于下面的demo:

var num;
num = 10;
num = 20;
console.log(num);

执行结果一眼看出：20，后面的值会覆盖前面的值进行输出

jQuery为什么要使用闭包来实现?
          为了避免多个框架的冲突
jQuery如何让外界访问内部定义的局部变量
           window.xxx = xxx;

(function f1() {
	var num = 10;
	window.num = num;
})();
(function f2() {
	var num = 20;
})();
console.log(num);

对于上面的demo运行结果：

 jQuery为什么要给自己传递一个window参数?
           为了方便后期压缩代码
           为了提升查找的效率

自己存在值使用自己的，不存在则在函数外部找

var value = 20;
function f3() {
	 //var value = 10;
	console.log(value);
}
f3();

执行结果：20

var value = 20;
function f3() {
	var value = 10;
	console.log(value);
}
f3();

执行结果：10

jQuery为什么要给自己接收一个undefined参数?
           为了方便后期压缩代码

IE9以下的浏览器undefined可以被修改, 为了保证内部使用的undefined不被修改, 所以需要接收一个正确的undefined

undefined = 998;
console.log(undefined);

jQuery基本结构--demo

(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 );

jQ入口函数传入不同参数得到的实例

传入 '' null undefined NaN  0  false

会返回一个空的jQuery对象给我们

console.log($());
console.log($(''));
console.log($(null));
console.log($(undefined));
console.log($(NaN));
console.log($(0));
console.log($(false));

传入html片段

会将创建好的DOM元素存储到jQuery对象中返回

console.log($('<p>1</p><p>2</p><p>3</p>'));

传入选择器

会将找到的所有元素存储到jQuery对象中返回

console.log($('li'));

传入数组

会将数组中存储的元素依次存储到jQuery对象中立返回

var arr = [1, 2, 3, 4, 5, 6];
console.log($(arr));

传入伪数组

会将数组中存储的元素依次存储到jQuery对象中立返回

var likeArr = {0:"yjk", 1:"33", 2:"male", length: 3};
console.log($(likeArr));

 console.log(typeof arr);
 console.log(typeof likeArr);
 console.log(arr.toString());
 console.log(likeArr.toString());
 console.log(({}).toString.apply(arr));

传入对象

会将传入的对象存储到jQuery对象中返回

function Person() {}
console.log($(new Person()));

传入DOM元素

会将传入的DOM元素存储到jQuery对象中返回

console.log($(document.createElement('div')));

传入基本数据类型

会将传入的基本数据类型存储到jQuery对象中返回

console.log($(123));

console.log($(true));

总结：

 1.传入 '' null undefined NaN  0  false, 返回空的jQuery对象
 2.字符串:
 代码片段:会将创建好的DOM元素存储到jQuery对象中返回
 选择器: 会将找到的所有元素存储到jQuery对象中返回
 3.数组:
 会将数组中存储的元素依次存储到jQuery对象中立返回
 4.除上述类型以外的:
 会将传入的数据存储到jQuery对象中返回