您的位置:首页 > Web前端 > JQuery

【jQuery原理】01-jQuery的基本结构 02-jQuery入口函数测试 03-apply和call方法 04-jQuery的extend(扩展)方法 05-jQuery监听DOM加载

2019-07-23 11:18 274 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq_20535249/article/details/96976516

01-jQuery的基本结构

<script>
/*
1.jQuery的本质是一个闭包
2.jQuery为什么要使用闭包来实现?
为了避免多个框架的冲突
3.jQuery如何让外界访问内部定义的局部变量
window.xxx = xxx;
4.jQuery为什么要给自己传递一个window参数?
为了方便后期压缩代码
为了提升查找的效率
5.jQuery为什么要给自己接收一个undefined参数?
为了方便后期压缩代码
IE9以下的浏览器undefined可以被修改, 为了保证内部使用的undefined不被修改, 所以需要接收一个正确的undefined
*/
(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 );

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

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

undefined = 998;
console.log(undefined);
</script>

02-jQuery入口函数测试

<script>
window.onload = function (ev) {
// $(function () {
/*
jQ入口函数传入不同参数得到的实例
1.传入 '' null undefined NaN  0  false
2.传入html片段
3.传入选择器
4.传入数组
5.传入伪数组
6.传入对象
7.传入DOM元素
8.传入基本数据类型
*/
//  1.传入 '' 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));

// 2.传入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>    '));

// 3.传入选择器
// 会将找到的所有元素存储到jQuery对象中返回
console.log($('li'));

// 4.传入数组
// 会将数组中存储的元素依次存储到jQuery对象中立返回
var arr = [1, 2, 3, 4, 5, 6];
console.log($(arr));

// 5.传入伪数组
// 会将数组中存储的元素依次存储到jQuery对象中立返回
var likeArr = {0:"lnj", 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));

// 6.传入对象
// 会将传入的对象存储到jQuery对象中返回
function Person() {}
console.log($(new Person()));

// 7.传入DOM元素
// 会将传入的DOM元素存储到jQuery对象中返回
console.log($(document.createElement('div')));

// 8.传入基本数据类型
// 会将传入的基本数据类型存储到jQuery对象中返回
console.log($(123));
console.log($(true));

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

03-apply和call方法

<script>
/*
apply和call方法的作用:
专门用于修改方法内部的this

格式:
call(对象, 参数1, 参数2, ...);
apply(对象, [数组]);
*/
function test() {
console.log(this);
}
// window.test();
var obj = {"name": "lnj2"};
/*
1.通过window.test找到test方法
2.通过apply(obj)将找到的test方法内部的this修改为自定义的对象
*/
// window.test.apply(obj);
// window.test.call(obj);

function sum(a, b) {
console.log(this);
console.log(a + b);
}
// window.sum.call(obj, 1, 2);
/*
1.通过window.sum找到sum方法
2.通过apply(obj)将找到的sum方法内部的this修改为自定义的对象
3.将传入数组中的元素依次取出, 传递给形参
*/
// window.sum.apply(obj, [3, 5]);

// var arr = [];
// arr.push(1);
// console.log(arr);

// 真数组转换伪数组的一个过程
// var arr = [1, 3, 5, 7, 9];
// var obj = {};
/*
1.通过[].push找到数组中的push方法
2.通过apply(obj)将找到的push方法内部的this修改为自定义的对象
3.将传入数组中的元素依次取出, 传递给形参
*/
// [].push.apply(obj, arr);
// console.log(obj);
window.onload = function (ev) {
// 系统自带的伪数组
var res = document.querySelectorAll("div");
// 自定义的伪数组
var obj = {0:"lnj", 1:"33", length: 2};
// var arr = []; // 真数组
// [].push.apply(arr, obj);
// console.log(arr);

// 如果想将伪数组转换为真数组那么可以使用如下方法
var arr = [].slice.call(obj);
console.log(arr);
// var arr2 = [1, 3, 5, 7, 9];
// 如果slice方法什么参数都没有传递, 会将数组中的元素放到一个新的数组中原样返回
// var res2 = arr2.slice();
// var res2 = arr2.slice(2);
// var res2 = arr2.slice(2, 4);
// console.log(res2);
}
</script>

04-jQuery的extend(扩展)方法

<script>
function njQuery() {

}
/*
njQuery.extend = function (obj) {
// 此时此刻的this就是njQuery这个类
// console.log(this);
for(var key in obj){
// njQuery["isTest"] = function () {console.log("test");}
this[key] = obj[key];
}
}
njQuery.extend({
isTest: function () {
console.log("test");
}
});
njQuery.isTest();
*/
/*
njQuery.prototype.extend = function (obj) {
// 此时此刻的this是njQuery对象
// console.log(this);
for(var key in obj){
// q["isDemo"] = function () {console.log("demo");}
this[key] = obj[key];
}
}
var q = new njQuery();
q.extend({
isDemo: function () {
console.log("demo");
}
});
q.isDemo();
*/

njQuery.extend = njQuery.prototype.extend = function (obj) {
// console.log(this);
for(var key in obj){
this[key] = obj[key];
}
}
// njQuery.extend({});
var q = new njQuery();
q.extend({});
</script>

05-jQuery监听DOM加载

<script>
/*
onload事件会等到DOM元素加载完毕, 并且还会等到资源也加载完毕才会执行
DOMContentLoaded事件只会等到DOM元素加载完毕就会执行回调
*/
/*
window.onload = function (ev) {
// var res = document.querySelectorAll("div");
// console.log(res);
console.log("onload");
}
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");
}
});
*/
$(function () {
var res = document.querySelectorAll("div");
console.log(res);
});
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐