[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");}
});

[jQuery原理] jQuery入口函数相关推荐

[jQuery原理] jQuery基本结构
1.jQuery的本质是一个闭包 2.jQuery为什么要使用闭包来实现? 为了避免多个框架的冲突 3.jQuery如何让外界访问内部定义的局部变量 window.xxx = xxx; 4.jQuer ...
[jQuery原理] jQuery事件操作相关方法
事件操作相关方法 on(type, callback) 注册事件 1.注册多个相同类型事件, 后注册的不会覆盖先注册的 2.注册多个不同类型事件, 后注册的不会覆盖先注册的 on: function ...
[jQuery原理] jQuery属性操作相关方法
属性操作相关方法 attr() 设置或者获取元素的属性节点值 attr: function (attr, value) {// 1.判断是否是字符串if(njQuery.isString(attr)) ...
【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器
jQuery简介: jQuery是一个高效.精简并且功能丰富的javascript库,它提供的API简单易学,且兼容众多浏览器,极大地简化了javascript代码开发,包含内容:HTML 元素选取. ...
jQuery原理第一天
jQuery原理 jQuery的基本结构 jQuery的本质是一个闭包 jQuery为什么要使用闭包来实现? 为了避免多个框架的冲突 jQuery如何让外界访问内部定义的局部变量 window ...
Mr.J-- jQuery学习笔记(二十二)--入口函数
入口函数的作用:等待页面加载完毕,有一个独立的作用域. 原生JS 和 jQuery 入口函数区别: (1)JS的window.onload事件必须要等到所有内容,以及外部图片之类的文件加载完之后,才会 ...
JQuery | JQuery语言 | JQuery基础 | JQuery语言基础
文章目录前言一.JQuery语言介绍一.JQuery版本: 二.JQuery源文件说明: 三.JQuery使用条件: 二.入口函数一.第一种入口函数二.第二种入口函数三.JavaScrip ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...

[jQuery原理] jQuery入口函数

入口函数测试

传入 ‘’ null undefined NaN 0 false

传入html片段

传入选择器

传入数组

传入伪数组

传入对象

传入DOM元素

传入基本数据类型

总结

入口函数代码实现

extend方法

监听DOM加载

[jQuery原理] jQuery入口函数相关推荐

最新文章

热门文章