初识jQuery

Posted 2020-12-29 chuanzi

初识jQuery

1、jQuery本质

(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 ); 1.1.jQuery的本质是一个闭包 jQuery为什么要使用闭包来实现?为了避免多个框架的冲突 1.2、jQuery采用了面向对象的方法，jQuery是原始类名，$符号和jQuery等价 1.3.jQuery如何让外界访问内部定义的局部变量：window.xxx = xxx; 1.4.jQuery为什么要给自己传递一个window参数? 为了方便后期压缩代码，提升查找的效率 1.5.jQuery为什么要给自己接收一个undefined参数? 为了方便后期压缩代码 IE9以下的浏览器undefined可以被修改, 为了保证内部使用的undefined不被修改, 所以需要接收一个正确的undefined

2、jQuery构造方法

jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } 传参处理： 2.1、不传参或传递空字符串、null、undefined、NaN、0、false时，返回一个空的jQuery对象 2.2、$(callback)：如果传入的参数是一个函数，则在document上绑定一个ready事件监听函数，当DOM结构加载完成时执行。ready事件触发要早于load事件，ready事件并不是浏览器的原生事件。该函数称为jQuery的入口函数 2.3、$(selectorStr [,context])，接收一个字符串选择器，返回一个jQuery对象，没匹配到则返回一个空jQuery对象。 这里的context选择器称为"上下文"，其格式有以下几种： 写法例如: $(‘p‘,‘#p_wrap‘) //在遍历时缩小范围id $(‘p‘,‘div‘) //DOM元素 $(‘p‘, $(‘div‘)) //jQuery对象 $(‘domElement‘, this) //用于当前指定的DOM元素范围内 2.4、$(html [,ownerDocument])，$(html, props) 如果传入的是html代码片段，就会用这些代码创建新的DOM元素， 然后创建并返回一个包含这个元素引用的jQuery对象。 如果html代码是一个单独的标签，jQuery源码的实现是使用浏览器原生方法 document.creatElement()创建一个DOM元素； 如果是比较复杂的html片段，jQuery源码实现使用浏览器的innerHtml机制创建DOM元素， 这个过程由两个方法完成的。 若html代码是一个单独标签，第二个参数可以是props,props是一个包含了属性、事件的普通对象。 在调用document.createElement()创建DOM元素后，props会被传给jQuery方法.attr(), 然后由attr()负责把参数props中的属性、事件设置到新创建的元素上。 2.5、$(element)，$(elementArray)，如果传入一个DOM元素或DOM元素数组，则把DOM元素封装到jQuery对象中并返回。 2.6、$(object),传入一个普通的javascript对象，则把该对象封装到jQuery对象中并返回。 2.7、$(jQuery object)如果传入一个jQuery对象，则创建该jQuery对象的一个副本并返回(相当于克隆,深拷贝？)。 2.8、传入一个基本数据类型，会将传入的基本数据类型存储到jQuery对象中返回

3、jQuery入口函数

3.1、4种等效写法 $(function(){}); jQuery(function(){}); $(document).ready(function(){}); jQuery(document).ready(function (){}); 3.2、jQuery入口函数 vs window.onload 执行顺序：jQuery入口函数在window.onload之前执行 window.onload会等到DOM元素加载完毕,并且图片也加载完毕才会执行 jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行 故通过jQuery入口函数不可以拿到图片元素的宽高 覆盖问题： window.onload如果多次赋值,则后面编写的会覆盖前面编写的 jQuery中编写多个入口函数,后面的不会覆盖前面的

4、$符号使用冲突问题

4.1、释放$的使用权：直接调用jQuery.noConflict()方法 注意点: 释放操作必须在编写其它jQuery代码之前编写，释放之后就不能再使用$,改为使用jQuery 4.2、自定义一个访问符号：var jq=jQuery.noConflict() 注意，这个自定义的符号也要遵循js标识符命名规范