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对象的实质就是jquery.fn.init的实例,因此结合上图,我们不难发现:
1.自定义的字面量对象就是init的原型对象
2.我们通过jquery.fn.init或者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() {
//实现代码
}
- jquery.extend(object):扩展jquery构造函数本身,添所谓'静态方法'(直接用构造函数名调用)
- 两个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)方法
源码定义: .each(obj,fn)方法是直接定义在jquery原型上的
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