[jQuery原理] jQuery入口函数

入口函数测试

传入 ‘’ 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>'));
console.log($('     <div><p>1</p></div><div><p>2</p></div>     '));

 

传入选择器

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

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

 

传入数组

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

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

 

传入伪数组

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

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

 

传入对象

会将传入的对象存储到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对象中返回

 
 

入口函数代码实现

• 传入 ‘’ null undefined NaN 0 false, 返回空的jQuery对象

if(!selector){
	return this;
}

• 字符串
  • 判断是否是代码片段 < a >
    • 根据代码片段创建所有的元素
    • 将创建好的一级元素添加到jQuery当中
    • 给jQuery对象添加length属性
    • 返回加工好的this(jQuery)
  • 判断是否是选择器
    • 根据传入的选择器找到对应的元素
    • 将找到的元素添加到njQuery上
    • 返回加工上的this

else if(njQuery.isString(selector)){
	// 2.1判断是否是代码片段 <a>
	if(njQuery.isHTML(selector)){
		// 1.根据代码片段创建所有的元素
		var temp = document.createElement("div");
		temp.innerHTML = selector;
		/*
		// 2.将创建好的一级元素添加到jQuery当中
		for(var i = 0; i < temp.children.length; i++){
			this[i] = temp.children[i];
		}
		// 3.给jQuery对象添加length属性
		this.length = temp.children.length;
		*/
		[].push.apply(this, temp.children);
		// 此时此刻的this是njQuery对象
		// 4.返回加工好的this(jQuery)
		// return this;
	}
	// 2.2判断是否是选择器
	else{
	// 1.根据传入的选择器找到对应的元素
	var res = document.querySelectorAll(selector);
	// 2.将找到的元素添加到njQuery上
	[].push.apply(this, res);
	// 3.返回加工上的this
	// return this;
	}
}

• 数组
  • 真数组
  • 伪数组

碰到自定义的数组时,都要先把伪数组转换为真数组,然后再将真数组转换为伪数组

• 真数组转换伪数组
  • [].push.apply(obj, arr);
• 伪数组转换真数组
  • var arr = [].slice.call(obj);

else if(njQuery.isArray(selector)){
	/*
	// 3.1真数组
	if(({}).toString.apply(selector) === "[object Array]"){
		[].push.apply(this, selector);
		return this;
	}
	// 3.2伪数组
	else {
		// 将自定义的伪数组转换为真数组
		var arr = [].slice.call(selector);
		// 将真数组转换为伪数组
		[].push.apply(this, arr);
		return this;
	}
	*/
	// 将自定义的伪数组转换为真数组
	var arr = [].slice.call(selector);
	// 将真数组转换为伪数组
	[].push.apply(this, arr);
	// return this;
}

• 除上述类型以外

else{
	this[0] = selector;
	this.length = 1;
	// return this;
}
return this;

 
 

extend方法

用于将一个或多个对象的内容合并到目标对象

jQuery.fn.extend = jQuery.prototype.extend

 
 

监听DOM加载

• onload事件会等到DOM元素加载完毕, 并且还会等到资源也加载完毕才会执行
• DOMContentLoaded事件只会等到DOM元素加载完毕就会执行回调

window.onload = function (ev) {
	// var res = document.querySelectorAll("div");
	// console.log(res);
	console.log("onload");//后打印
}
//IE8不支持,可以用attached
document.addEventListener("DOMContentLoaded", function () {
	// var res = document.querySelectorAll("div");
	// console.log(res);
	console.log("DOMContentLoaded");//先打印
});

• document.readyState属性有如下的状态

  • uninitialized - 还未开始载入
  • loading - 载入中
  • interactive - 已加载，文档与用户可以开始交互
  • complete - 载入完成

• onreadystatechange事件就是专门用于监听document.readyState属性的改变的

document.attachEvent("onreadystatechange", function () {
	if(document.readyState == "complete"){
		console.log("onreadystatechange");
	}
});