【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>
相关文章推荐
- 给定一个字符串,里面用空格分开为多个(>=6)部分组合,如:01 02 03 04 05 06 07 …… 写一个函数返回任意6个组合的字符串: 输出格式实例: 01 02 03 04 05 06 0
- JQuery计算当前Dom结构在浏览器窗口中被显示方法(懒加载原理)
- 01-Scrum 概述 ,02-橄榄球 VS 软件,03-Scrum敏捷方法一分钟扫盲 ,04-Scrum敏捷方法中的工作产品 ,05-Scrum敏捷方法中的角色,06-Scrum过程-创建和维护产品
- jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
- 小写数字转换成大写数字 view source print? 01 #include 02 void main() 03 { 04 double x,y; 05 char *ch[]={"零","壹","贰","叁","肆","伍","陆","柒","捌"
- 3 视频里weekend05、06、07的可靠性 + HA原理、分析、机制 + weekend01、02、03、04、05、06、07的分布式集群搭建
- 难点总结:Jquery动态加载数据库中的数据(解答人:郭哲 方式:讲述jquery原理及一些函数的使用方法,学会看帮助文档)
- jQuery 原理的模拟代码 -4 重要的扩展函数 extend
- shell 如何生成一个序列 01 02 03 04 05
- jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
- 深入理解函数内部原理(六)——函数的内部方法call、apply、bind
- 04.多线程--05.【多线程银行客户存钱案例设计】【同步函数基本用法和原理】
- JQuery模拟三------利用extend函数扩展jQuery自身的方法和浏览器判断
- jQuery的两个扩展插件方法$.extend()与$.fn.extend()
- 模仿JQuery.extend函数扩展自己对象的js代码
- 01-03-02-2【Nhibernate (版本3.3.1.4000) 出入江湖】CRUP操作-Save方法的一些问题
- JavaScript中的函数:函数的apply、call方法和length属性
- 04-01递归原理分析_分析方法调用
- JQuery DOM元素方法跟JQuery 核心函数跟JQuery 事件方法
- 模仿JQuery.extend函数扩展自己对象的js代码