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
jQuery笔记: 基本概念与jQuery核心的更多相关文章
- 【二】jquery之基础概念与jquery对象与dom对象的区别及混合使用
一:jquery基本概念 1.jquery是一个javascript框架,它是一个轻量级的js库 2.当下流行的js库有: jquery MooTools Prototype 3.$(ducoment ...
- jQuery笔记(一)jQuery选择器
一.前言 编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含tes ...
- jQuery笔记(二)jQuery中DOM操作
前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...
- jQuery笔记(六)jQuery之Ajax
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
- jQuery笔记(五)jQuery表单验证
前言 上次我们说完jQuery中的动画之后,我们再来看一种jQuery在Web网页应用最为广泛的一种形式,这就是jQuery对表单的操作,通过jQuery对表单的操作,可以有效的提高用户体验.在此之前 ...
- jQuery笔记(四)jQuery中的动画
jQuery最吸引人的地方莫过于能做出绚丽的动画了,也是能极大提高用户体验的地方,这次我们就来一探jQuery中的动画! 一. show()方法和hide()方法 show()方法与hide()方法是 ...
- jQuery笔记(三)jQuery中的事件
; padding:0;} body { font-size:13px; line-height:130%; padding:60px;} #panel { width:300px; border:1 ...
- Jquery笔记之第二天
Jquery笔记之第二天 jQuery - 获取内容和属性 获得内容 - text().html() 以及 val() <script> $(document).ready(functio ...
- jQuery学习笔记之概念(1)
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
随机推荐
- Monte Calro Tree Search (MCTS)
https://blog.csdn.net/natsu1211/article/details/50986810, 感谢分享! Intro最近阿法狗和李师师的人机大战着实火了一把,还顺带捧红了柯杰,古 ...
- Azure 中部署WordPress的方法
一.Azure 中创建WordPress虚拟机(1).登陆Azure:打开Azure 官网,点击右侧上方的登陆Azure门户,输入Azure帐号与密码,点击 登陆 . (2).创建Wordpress虚 ...
- SQL Server ->> 获取服务器名字和SQL SERVER实例名的几种函数
SELECT @@SERVERNAME as [@@SERVERNAME], SERVERPROPERTY('MachineName') MachineName, SERVERPROPERTY('In ...
- C# winfrom Datagridview控件下拉菜单
拖拽一个datagridview放在界面,编辑列把下来菜单那列ColumnType设置成DataGridViewComboBoxColumn 然后在数据一栏的Items可以写下来菜单的内容也可以后台代 ...
- winfrom 实现窗体圆角
在窗体中加入一下代码 #region 窗体圆角的实现 private void ComFrmBase_Resize(object sender, EventArgs e) { if (this.Win ...
- 二、python小功能记录——监听鼠标事件
1.原文链接 #-*- coding:utf-8 -*- from pynput.mouse import Button, Controller ## ======================== ...
- vSan中见证组件witness详解
witness在vSan中作为见证组件其作用类似于WinServer中的仲裁磁盘,当Cluster中某一节点发生故障时,来判断该节点上的对象在哪一个新的节点上继续承载.此处需要强调的是,witness ...
- docker容器修改hosts文件,重启失效问题解决
docker容器修改hosts文件 搜了一大批资料,有说需要在docker run --hosts...改:dockerfile改:有点麻烦,下面方案比较好: 参照docker吧(https://ti ...
- php性能调优
第一章 针对系统调用过多的优化 我这次的优化针对syscall调用过多的问题,所以使用strace跟踪apache进行分析. 1. apache2ctl -X & 使用-X(debug)参 ...
- ZT 线程的分离状态 2012-08-16 17:00:59
线程的分离状态 2012-08-16 17:00:59 分类: LINUX 其实在写上一篇日志的时候,由于我把创建线程的返回值的判断条件写错了,程序每次运行的时候都是显示创建线程失败,我就百度了一下, ...