700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Mr.J-- jQuery学习笔记(二十二)--入口函数

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

时间:2018-09-10 06:35:38

相关推荐

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对象中返回

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。