jQuery笔记: 基本概念与jQuery核心

@

目录

• 为什么要使用jQuery？
• 如何使用jQuery？
• jQuery与js加载模式不同
• jQuery入口函数的四种写法
• jQuery的访问符冲突问题

转载请注明出处

# 初识jQuery

为什么要使用jQuery？

1.什么是jquery？

jQuery是js的一个库，简化了js代码的书写（注：jQuery语句中用逗号分隔各个css，因为一条css对应一个对象属性，对象属性之间是用逗号分隔而非分号）

举例：

例1：简化了获取元素的语句 + 设置样式的书写变得更加直观好记

例2：jQuery解决了兼容性问题

注：因为jQuery是js的一个库，引入的时候就是一个js文件，所以，我们是可以用原生js代码来修改jQuery文件的？

---

如何使用jQuery？

1.下载jQuery库

压缩版本compressed：体积小，方便网络传输；但不易于阅读。多用于实际使用。

未压缩版本uncompressed： 体积大，便于阅读，多用于开发。

2.引入jQuery库

本地引入：同js一样，用script引入，服从目录语法

网络引入：示例

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

---

jQuery与js加载模式不同

1.入口函数的加载模式不同：

• 原生js的window.onload会等到页面元素及链接的资源都加载完毕才会执行
• jQuery的ready()等到页面元素加载完毕就执行，不会等待其他资源加载

2.重复为同一元素添加事件的不同

• 原生JS为同一元素添加多个事件，后添加的覆盖先添加的
• jQuery为同一元素添加多个事件，后者不会覆盖前者

---

jQuery入口函数的四种写法

1.\$ (document).ready(function(){......});

2.\$ (function(){......});

3.第一种中的\$ 换成jQuery

4.第二种里的\$ 换成jQuery

我们遵循write less，do more的原则，推荐使用第二种写法。

---

jQuery的访问符冲突问题

1.jQuery访问符冲突问题： jQuery框架与其他框架都使用了\$ 时，书写代码时，使用\$ 就会有冲突（后引进的框架覆盖先引进的）。

2.解决办法：

• 释放访问符\$ 的使用权，改为jQuery。例：
  
  jQuery.noConflict()；
  
  jQuery(function(){......});
  
  释放\$ 使用权之后，就不能用\$ 编写jQuery代码了，会无效。
  
  释放操作必须在用jQuery编写代码之前。

• 自定义新的访问符。例：
  
  var Q = jQuery.noConflict()；
  
  Q(function(){......});

jQuery核心函数和jQuery对象实质

1.jQuery核心方法是什么？

jQuery的核心方法就是jQuery()，或者说\$ ().

2.jQuery核心方法接收的参数有哪些情况？

• 回调函数：\$ (callback());
  
  执行回调函数,并返回一个jQuery对象
• 字符串选择器:\$ ('.center');
  
  返回一个jQuery对象,保存了找到的DOM元素
• 字符串代码片段:\$ ('< p >我是P< /p >');
  
  按照代码片段创建元素,并返回一个包含该元素的jQuery对象(注意:该元素并未添加至文档树,需要用额外代码来添加)
• DOM元素: \$ (document.getElementById('box'));
  
  返回一个jQuery对象,保存了该DOM元素

3.jQuery对象详解

• jQuery方法框架结构分析:
  
  框架:
  
  
  
  仔细看我们就可以发现,这个框架只不过是两个立即执行函数的嵌套:
  
  外层的:(function (window,undefined){})(window)
  
  内层的:var jQuery = (function (){})())
  
  而在内层的IIFE中:

  • 先定义了内层函数(闭包)jQuery
  • 接着令闭包jQuery的属性fn与原型prototype都指向一个新建的字面量对象,该字面量对象中定义了属性constructor,length等;也定义了许多函数,其中就包含了最核心的init函数.
  • 然后,将init函数的原型prototype指向init所在的字面量对象.
  • 最后将闭包jQuery返回给外层IIFE.
    
    下图为内层IIFE中定义的闭包jQuery的重要引用的分布:

在后面的分析我们会知道--jQuery对象的实质就是jQuery.fn.init的实例,因此结合上图,我们不难发现:

1.自定义的字面量对象就是init的原型对象

2.我们通过jQuery.fn.init.prototype或者jQuery.prototype均可访问和修改init的原型

分析完内层,我们接着分析框架中的外层IIFE:

(1) 将内层IIFE的返回值(内层的jQuery函数)赋给外层变量jQuery

(2) 定义全局变量jQuery,\$ ,并将上一步jQuery的值赋给它们(jQuery()与\$ ()的效果相同的原因)

• jQuery对象的实质
  
  jQuery对象就是jQuery方法的返回值,由上面的分析:
  
  由代码return new jQuery.fn.init(selector, context, rootjQuery);可知,jQuery方法的返回值,即jQuery对象就是jQuery.fn.init的实例.

3.jQuery对象是一个伪数组对象

伪数组对象:

• 含有属性length
• 另外含有length个属性,这些属性键名为0到length-1

4.使用jQuery与使用原生js有什么区别么?在jQuery中是否能使用原生js代码呢?

• 首先,从概念上,我们知道jQuery是js的一个库,我们下载和引入的jQuery文件后缀都是".js".因此,概念上来说,jQuery本质就是js.
• 其次,jQuery从定义框架来看,他就是jQuery构造函数 + 自定义原型对象 + 自定义原型对象.init 这三个主要部分构成.
• 其三,jQuery方法的定义中,闭包jQuery的原型从Function(){}改为了自定义对象,那么其原型链上就不再包含call函数.因此,不能通过其他对象调用jQuery的构造函数.也就是说:jQuery.call(obj,...)是错误的.
  
  [jQuery对象原型链如下]:jQuery.fn.init实例-->jQuery.fn/jQuery.prototype-->Object.prototype

jQuery重要方法--参考资料

1.静态jQuery.ready方法与实例.ready()方法

• jQuery的两个插件扩展方法

  • jQuery.extend(object):扩展jQuery构造函数本身,添所谓'静态方法'(直接用构造函数名调用)
  • jQuery.fn.extend(object):扩展jQuery原型对象,添加所谓'实例方法'(按习惯,用实例对象调用)
  • 这两个方法其实是同一个函数,只是this的值不同,导致了效果的不同.
    
    这两个方法定义时,是这么一种形式:
    
    jQuery.extend = jQuery.fn.extend = function() {

//实现代码

}



• 两个ready方法

  • '静态'jQuery.ready的定义:
    
    源码中的定义形式:
    
    

jQuery.extend({

ready:function (){}

});


    
    说明:
    
    (1).此方法返回一个类promise对象,当DOM加载就绪时,该对象变得可以解析.(即:当DOM加载就绪时,可以用该对象访问其属性,调用其方法等等)
    
    (2).该方法的返回值会被jQuery.when,Promise.resolve()以及 .ready()方法中使用

  • 实例方法--.ready()
    
    源码定义如下:
    
    

jQuery.fn.ready = function( fn ) {

jQuery.ready.promise().done( fn );//当DOM加载就绪时,调用promise()方法并执行fn函数

return this;

};


    
    说明: .ready(fn) 函数--当DOM加载就绪时执行fn函数

  • jQuery.holdReady(hold)方法
    
    说明:通过hold(取值:true/false)来延迟/取消延迟jQuery的ready事件.

2.'静态'类型检测方法

• jQuery.isFunction(obj)
• jQuery.isArray(obj)
• jQuery.isWindow(obj)
• jQuery.isNumeric(obj)
• jQuery.isEmptyObject(obj)
• jQuery.isPlainObject(obj)

3.'静态'jQuery.each(obj,fn)方法

源码定义: 静态jQuery.each是用jQuery.extend()定义在jQuery对象本身上的

(对应的实例.each方法定义在原型上,实质是将静态jQuery.each方法的this换了一下)



each: function( obj, callback ) {

var length, i = 0;

if ( isArrayLike( obj ) ) { //针对类数组

length = obj.length;

for ( ; i < length; i++ ) {

if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {

break; //当回调函数返回false时,跳出整个循环

}

}

} else {

for ( i in obj ) { //针对enumerable不为false的一般对象

if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {

break; //当回调函数返回false时,跳出整个循环

}

}

}

return obj;

}



源码分析:

(1) 针对类数组对象,对每一个数字键值i,执行obj[i].callback(i,obj[i]).如果遇到某一项返回值为false,跳出循环,终止遍历

(2) 针对一般对象,使用in操作符,对于每一个可遍历键值i,执行obj[i].callback(i,obj[i]).如果遇到某一项返回值为false,跳出循环,终止遍历

总结:

(1) 类数组不遍历非数字键值属性

(2) 一般对象不遍历enumerable为false的属性

(3) 一旦遍历过程中某一次函数调用返回值为false,终止遍历

(4) 整个.each的返回值为被遍历的对象

4.'静态' jQuery.map(elems,callback,arg)方法

源码定义:

// arg is for internal usage only
map: function( elems, callback, arg ) {
	var length, value,
		i = 0,
		ret = [];

	// Go through the array, translating each of the items to their new values
	if ( isArrayLike( elems ) ) {  //针对类数组
		length = elems.length;
		for ( ; i < length; i++ ) {
			value = callback( elems[ i ], i, arg );

			if ( value != null ) {
				ret.push( value );
			}  //将value中的值添加到数组末尾,并返回新的数组的长度
		}

	// Go through every key on the object,
	} else {
		for ( i in elems ) {  //针对enumerable非false的一般对象
			value = callback( elems[ i ], i, arg );

			if ( value != null ) {
				ret.push( value );
			} //将value中的值添加到数组末尾,并返回新的数组长度
		}
	}

	// Flatten any nested arrays
	return concat.apply( [], ret );
}  //Array.prototype.concat(合并数组,返回新数组) + Object.prototype.apply

源码分析:

(1) 针对类数组对象,对每一个数字键值 i ,调用callback( elems[ i ], i, arg ),并将其中非null的返回值添加到数组ret中

(2) 针对一般对象,对每一个属性名 i ,调用callback( elems[ i ], i, arg ),并将其中非null的返回值添加到数组ret中

总结:

(1) 类数组不遍历非数字键值属性

(2) 一般对象不遍历enumerable为false的属性

(3) 遍历过程中,某一次函数调用返回值为null时,结果不计入ret中(我们可以灵活控制callback方法的返回值来达到我们想要的效果)

(4) 整个jQuery.map的返回值为被遍历的对象被处理后所得到的数组ret