初识jQuery

初识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标识符命名规范

原文地址:https://www.cnblogs.com/chuanzi/p/9452177.html