转自:http://java.chinaitlab.com/advance/790305.html
这是一些分析jQuery框架的文字
针对jQuery 1.3.2版本
面向的读者应具备以下要求
1.非常熟悉HTML
2.非常熟悉javascript语法知识
3.熟悉javascript面向对象方面的知识
4.熟练使用jQuery框架
言归正传!
jQuery对象的初始化是写在匿名函数里的
就像这样:
(function(){alert("jQuery框架分析")})();
第一个括号是声明了一个函数,第二个括号是执行这个函数。也就是说,jQuery框架在页面载入的时候已经做了一些事情(这个个匿名函数已经被执行了)。做的这些事情使我们可以通过$("#yourId")或$(".yourClass")等方式获取页面元素,并把获取到的元素包装成jQuery对象。
匿名函数是怎么实现这些功能的呢?
首先框架定义了两个核心对象
jQuery = window.jQuery = window.$ = function( selector, context ) {}
一个是jQuery, 一个是$, 这两个对象都指向一个函数
这个函数是我们使用$()或jQuery()方法时的入口,这个方法返回一个jQuery.fn.init( selector, context );的实例,其实这个实例是一个jQuery对象。
jQuery对象是一个什么样的对象呢?
jQuery对象其实是一个javascript的数组, 这个数组对象包含125个方法和4个属性
4个属性分别是
jQuery 当前的jQuery框架版本号
length 指示该数组对象的元素个数
context 一般情况下都是指向HtmlDocument对象
selector 传递进来的选择器内容 如:#yourId或。yourClass等
如果你通过$("#yourId")方法获取jQuery对象,并且你的页面中只有一个id为yourId的元素那么$("#yourId")[0]就是HtmlElement元素与document.getElementById("yourId")获取的元素是一样的
jQuery对象是怎么构造出来的呢?
这个对象就是刚才我们提到的
jQuery = window.jQuery = window.$ = function( selector, context ) {}
框架不只为此对象定义了一个方法,还定义了它的原型(prototype)
jQueryjQuery.fn = jQuery.prototype = {//此处为json对象}
原型的定义是通过json对象定义的
如
{
init: function( selector, context ) {//方法体},
jQuery: "1.3.2",//属性
size: function() {//方法体},
//……
}
前面提到的125个方法4个属性有一部分在这个json对象中完成定义的 这个json对象中第一个方法就是init方法也就是入口方法中的jQuery.fn.init( selector, context );此方法与一个正则表达式对象配合来构造jQuery对象
这个正则表达式为:
quickExpr = /^[^<]*(<(。|\s)+>)[^>]*$|^#([\w-]+)$/
下面我们说一下init方法的实现逻辑
此方法有两个参数
一个是selector(选择器)
一个是context(上下文)
selector就是我们用$("#yourId")或jQuery(".yourClass")传递进来的变量
这个参数不一定是字符串,也可能是其他形式的变量
等会儿我们就会介绍到
context参数我们在使用jQuery的时候很少用到,暂且不表
注意这两个参数都在返回的jQuery对象中体现出来了(以两个同名的属性展示)
下面看一下这个方法体内部的实现逻辑
//如果没有选择器或者选择器为空的话,就把document对象赋值给他
selector = selector || document;
//如果selector参数是dom元素,直接返回jQuery对象
//也就是说你可以$(document.getElementById("allen"))把你的元素封装成jQuery对象
if ( selector.nodeType ) {
this[0] = selector;
this.length = 1;
this.context = selector;
return this;
}
//typeof 取对象的类型,用三个等号效率较高, 不需要类型转换,两个等号默认有类型转换
if ( typeof selector === "string" ) {
//这里用到了我们前面提到的正则表达式quickExpr
//match其实是一个数组
//第0个元素是与正则表达式相匹配的文本
//第1个元素是与正则表达式的第1个子表达式相匹配的文本(如果有的话)
//第2个元素是第2个子表达式相匹配的文本(如果有的话)
//第3个元素是第3个子表达式相匹配的文本(如果有的话)这里就是元素的ID,不包含#
var match = quickExpr.exec( selector );
//正则表达式匹配到了内容 并且 match[1]不为空 或者 context为空
//match[1]不为空的时候selector是HTML字符串,也就是你可以用$("xland")把对象包装成jQuery对象
//context为空的时候selector是页面元素ID
if ( match && (match[1] || !context) ) {
//选择器为html字符串 此情况暂且不表
if ( match[1] ){
selector = jQuery.clean( [ match[1] ], context );
} else {//选择器为ID
//得到元素
var elem = document.getElementById( match[3] );
//如果得到了这个元素但是元素的ID属性不是 match[3],跳入分支。分支里面的东西做了什么工作,暂且不表
if ( elem && elem.id != match[3] ){
return jQuery().find( selector );
}
//把得到的页面元素封装成jQuery对象
//如果elem为空,就传入一个空数组,框架怎么处理此空数组,暂且不表
//如果不为空就跳入我们前面说的if ( selector.nodeType )分支,构造出jQuery对象来
var ret = jQuery( elem || [] );
//设置jQuery对象的context属性
ret.context = document;
//设置jQuery对象的selector属性
ret.selector = selector;
//返回这个对象给调用者
return ret;
}
}
}
至此
var obj = $(“#yourId”);
构造jQuery对象的初步工作就做完了
分享到:
相关推荐
jquery 源码框架解析
基于SSH jQuery框架的餐饮Web App的设计与实现.pdf
这个24小时订单分析和公司做的项目很贴近,如果有兴趣的可以下载看一下,真的很有帮助,EasyUI框架也是当下用的还算多的一个前端框架,有兴趣的可以先找我要效果图,先看看是否有必要。jQuery 最大的优势,就是特别...
Jquery是继prototype之后又一个优秀的Javascrīpt框架
在此基础上,本文对SSH框架和jQuery技术在Java-Web开发中的应用进行了探讨。同时,本文结合时代技术发展的特点,对基于SSH框架的Java-Web数据库配置设计方法进行了研究,并对基于jQuery技术的Java-Web功能优化设计方法...
jQuery源码分析 前言 有时候我在想jQuery为什么可以直接$操作,可以拥有比原生js更便利的DOM操作,而且只要你想就可以直接链式操作下去 核心框架 揭开一万多行代码的jQuery核心代码: (function(window, undefined)...
其中重点详细的介绍了jQuery2.0的新特征以及operamasks前端UI框架。从系统数据库分析到系统角色权限,从功能到业务流程。介绍整个OA办公系统的开发过程及开发中碰到的基础问题进行深入讲解。对代码重构及代码优化...
框架:flask+ html + css + jquery + python + TD-IDF,IDA,NLP算法 +mysql MySQL数据量重置id 爬虫三个模块 三条线的爬虫 贴吧 微博 新闻 模块介绍 教师 登录模块 系统首页模块 用户管理模块 子模块用户列表 ...
文中针对医院HIS系统的前端页面需求改变,提出采用一种基于jQuery框架的医院系统前端页面特效设计方法。通过对前端页面开发的需求分析,并借助jQuery代码,实现HIS系统前端页面的交互和良好视觉效果,以此为广大的...
醉心于对JavaScript、jQuery和Ajax等Web开发技术的研究与实践,并长期专注于HTML页面的优化与用户体验的研究,在页面框架搭建、数据流向分析、页面静态优化方面拥有丰富的实践经验。此外,他还是微软技术方面的专家...
《精通JavaScript+jQuery》从JavaScript的基础知识开始,围绕标准Web的各项技术予以展开,通过大量实例对JavaScript、CSS、DOM、Ajax等Web关键技术进行深入浅出的分析。主要内容包括JavaScript的概念和基本语法、CSS...
框架html + css + jquery+ python 3.9 + cv + cnn + flask + mysql set global sql_safe_updates=0; 用户类型 管理员 admin 123456 模块介绍 管理员 登录模块 系统首页 个股检索 (加载所有股票代码和股票名称...
本套Java视频教程循序渐进地对jQuery的各种选择器、函数和方法调用进行了详细的讲解,更结合了大量的案例进行分析。001_动力节点_jQuery视频 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
前端框架:html + css + jquery + echart 后端框架:flask + python + mysql 用户介绍 学生 qqq 123456 教师 ttt 123456 模块介绍 学生主要编辑个人信息和编辑成果申报,其他活动,实习情况,未来跟踪填写,...
Python高校舆情分析监控...框架:flask+ html + css + jquery + python + TD-IDF,IDA,NLP算法 +mysql MySQL数据量重置id truncate table tablename python3.9 高校舆情分析监控系统 爬虫三个模块 贴吧 微博 新闻
Python高校舆情分析监控系统 框架:flask+ html + css + jquery + python + TD-IDF,IDA,NLP算法 +mysql MySQL数据量重置id truncate table tablename python3.9 高校舆情分析监控系统 爬虫三个模块 贴吧 微博
框架:flask+ html + css + jquery + python + 预测 +mysql MySQL数据量重置id truncate table admin 预测方式:回归 年龄,住址,学历 预测犯罪手法 角色管理员(公安内部人员) admin 123456 模块介绍 管理员 ...
第1章介绍了jQuery Mobile的功能特点、获取方法,以及与其他移动开发框架的对比;第2~5章分别讲解了jQuery Mobile的页面与对话框、工具栏与格式化内容、页面常用组件、主题等基础知识;第6章和第7章分别详细介绍了...
成绩分析系统通过成绩分析功能模块对学生成绩进行统计和分析,并将分析结果以直观、形象的图表、表格形式显示,采用微型计算机对学生成绩进行分析管理,确保系统能进一步提高办学效益和现代化水平,帮助学校广大教师...