jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的.
从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库.
jQuery改变javascript编码方式!
那么它是如何实现它的声明的呢?这里,用以下的一段简短的使用流程:
1)查找(创建)jQuery对象:$(”selector”);
2)调用jQuery对象的方法完成我们需要完成的工作:$(”selector”).doOurWork();
ok,jQuery就是以这种可以说是最简单的编码逻辑来改变javascript编码方式的.这两个步骤是jQuery的编码逻辑核心!
要实现这种简洁编码方式,创建jQuery对象这一环节至关重要.因此,jQuery的dom元素查找能力相当强悍.此外,jQuery对象的方法肯定是有限的,有限的方法满足不了日益增长各有所需的要求,所以,必须提供jQuery对象方法的扩展能力.
强悍的dom元素查找能力,以及随心所欲的方法扩展,这两点正是jQuery的核心所在!
来一个简单的示例,来说明jQuery是如何工作的:

 < !DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

 <html xmlns=”http://www.w3.org/1999/xhtml” >

 <head>

     <title>无标题页</title>

 </head>

 <body id=”bd”>

 <a href=”http://www.baidu.com”>baidu</a>

 </body>

 </html>

 <script type=”text/javascript” src=”../Script/jquery.js”></script>

 <script type=”text/javascript” >

 $(function(){

     $(“a“).click(function(e){//1)查找$(”a”);2)jQuery对象事件click;3)jQuery对象方法hide

         $(this).hide(“slow“);

         return false;

     });

 });

 </script>

jQuery中有一个\”配置”的思想,这一点使得对象的属性/事件等设置变得容易理解且十分简便,如下一个拖拽组件的初始化:

 $(document).ready(

     function()

     {

         $(’#drag1′).Draggable({

             handle: “ax“,               //属性设置

             onStart: function(el,x,y){  //事件监听器设置

             }

         });

     }

 );

可以看到,$(”#drag1″)是查找并创建一个jquery对象,然后调用Draggable方法进行拖拽初始化,在此方法调用时,传递一个\”配置”对象,进行拖拽操作的初始化配置.
这一”配置”的思想,极大简化了一些编码步骤,并相当直观和易懂.

以下我进行三个问答:
1) 问:为什么$(selector)之后,返回的是jQuery对象?
答:从jQuery的源代码中,我们可以知道:var $ = jQuery.因此当我们$(selector)操作时,其实就是jQuery(selector),创建的是一个jQuery对象.当然正确的写法应该是这样的:var jq = new $(selector);而jQuery使用了一个小技巧在外部避免了new,在jquery方法内部:if ( window == this ) return new jQuery(selector);
2) 问:为什么创建一个jQuery对象之后,我们可以这样写$(selector).each(function(index){…});进行遍历操作呢?
答:其实jQuery(selector)方法调用时,在jQuery(selector)方法内部,最后返回的是一个数组:return this.setArray(a);而each方法体内部是一个for循环,在循环体内是这样调用的:method.call(this[i],i).
3) 问:为什么jQuery能做到jQuery对象属性/方法/事件的插件式扩展?
答:如果您有一些javasciprt的面向对象方面的知识,就会知道,jQuery.prototype原型对象上的扩展属性/方法和事件,将会给jQuery的对象\”扩展”.基于这一点,jQuery是这样写的:jQuery.fn = jQuery.prototype.所以,当我们扩展一个插件功能时,如下:

 jQuery.fn.check = function() {

   return this.each(function() {

     this.checked = true;

   });

 };

其实就是:

 jQuery.prototype.check = function() {

   return this.each(function() {

     this.checked = true;

   });

 };

综上所述,jQuery给我们带来了一个简洁方便的编码模型(1>创建jQuery对象;2>直接使用jQuery对象的属性/方法/事件),一个强悍的dom元素查找器($),插件式编程接口(jQuery.fn),以及插件初始化的”配置”对象思想.

附:实现自己的jQuery

 < !DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

 <html xmlns=”http://www.w3.org/1999/xhtml”>

 <head>

     <title>Untitled Page</title>

 </head>

 <body>

 <div id=”d”>divvv</div>

 <div id=”fsd”>fdsf</div>

 </body>

 </html>

 <script type=”text/javascript”>

 //实现自己的MyQuery框架

 var MyQuery = function(selector){

     if ( window == this ) return new MyQuery(selector);

     //这里只实现dom类型的简单查找,嘿嘿

     var doms = document.getElementsByTagName(selector);

     var arr = [];

     for(var i=0; i<doms .length; i++){

         arr.push(doms.item(i));

     }

     return this.setArray(arr);

 }

 MyQuery.prototype.setArray = function( arr ) {

         this.length = 0;

         [].push.apply( this, arr );

         return this;

 }

 MyQuery.fn = MyQuery.prototype;

 var $ = MyQuery;

 //插件扩展1)each

 MyQuery.fn.each = function(method){

     for(var i=0,l=this.length; i<l; i++){

         method.call(this[i],i);

     }

 }

 //插件扩展2)show

 MyQuery.fn.show = function(){

     this.each(function(i){

         alert(i+“:“+this.id+“:“+this.innerHTML);

     });

 }

 //debugger

 $(“div“).show();

 </script></doms></script>

jQuery工作原理解析以及源代码示例的更多相关文章

  1. jdk线程池ThreadPoolExecutor工作原理解析（自己动手实现线程池）（一）

    jdk线程池ThreadPoolExecutor工作原理解析(自己动手实现线程池)(一) 线程池介绍 在日常开发中经常会遇到需要使用其它线程将大量任务异步处理的场景(异步化以及提升系统的吞吐量),而在 ...

  2. Web网站工作原理解析

    Web的工作原理   Web采用的是客户机--服务器架构(Client--Server model),如下图所示,其中客户端(Client)可以通过网络连接访问另一台计算机的资源或服务,而提供资源或服 ...

  3. Servlet 工作原理解析

    转自:http://www.ibm.com/developerworks/cn/java/j-lo-servlet/ Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 J ...

  4. [转]Servlet 工作原理解析

    Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 Java Web 技术的核心基础.因而掌握 Servlet 的工作原理是成为一名合格的 Java Web 技术开发人员的 ...

  5. USB Type-C工作原理解析

    自从苹果发布了新MacBook,USB Type-C接口就成为了热议对象.我来从硬件角度解析下这个USB Type-C,以便大家更好的了解USB Type-C的工作原理. 特色 尺寸小,支持正反插,速 ...

  6. Servlet 工作原理解析--转载

    原文:http://www.ibm.com/developerworks/cn/java/j-lo-servlet/index.html?ca=drs- Web 技术成为当今主流的互联网 Web 应用 ...

  7. 【Java】Servlet 工作原理解析

    Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 Java Web 技术的核心基础.因而掌握 Servlet 的工作原理是成为一名合格的 Java Web 技术开发人员的 ...

  8. servlet入门学习之工作原理解析

    从 Servlet 容器说起 要介绍 Servlet 必须要先把 Servlet 容器说清楚,Servlet 与 Servlet 容器的关系有点像枪和子弹的关系,枪是为子弹而生,而子弹又让枪有了杀伤力 ...

  9. Sevrlet 工作原理解析-转

    从 Servlet 容器说起 要介绍 Servlet 必须要先把 Servlet 容器说清楚,Servlet 与 Servlet 容器的关系有点像枪和子弹的关系,枪是为子弹而生,而子弹又让枪有了杀伤力 ...

随机推荐

  1. JS--图片轮播效果

    搞了很长时间才弄清楚图片轮播效果的原理,理解各个事件发生的原因,浪费了这么长的时间,只怪自己的知识太过于薄弱.现将代码写下,供大家参看,如有不妥之处还望指出,大家一起学习. 功能: 1.点击左右两边的 ...

  2. 路由器WDS桥接教程

    因为有吧友买了此款路由又不会桥接,因此做这个教程.老鸟自动路过,废话不多说,下面开始讲解. 1.wifi密码破解和路由器用户名和密码部分请自行解决,我只讲桥接部分.首先,在浏览器里输入192.168. ...

  3. poj 3232 Accelerator

    http://poj.org/problem?id=3232 题意:有一个含有n辆车的车队,当前距离终点的距离已知,有m个加速器,每个加速器在一个时刻只能给一辆车用,一旦使用就会使得其速度由1变成k, ...

  4. http状态码有那些？分别代表是什么意思

    http状态码有那些?分别代表是什么意思? 简单版 [ 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 ...

  5. U-Boot启动过程完全分析

    U-Boot启动过程完全分析 1.1       U-Boot工作过程 U-Boot启动内核的过程可以分为两个阶段,两个阶段的功能如下: (1)第一阶段的功能 硬件设备初始化 加载U-Boot第二阶段 ...

  6. Linux企业级项目实践之网络爬虫（28）——爬虫socket处理

    Socket是进程之间交换数据的机制.这些进程即可以是同一台机器上的,也可以是通过网络连接起来的不同机器.一旦一个Socket连接建立,那么数据就能够双向传输,直到其中一端关闭连接. 通常,请求数据的 ...

  7. linux内核链表的移植与使用

    一.  Linux内核链表为双向循环链表,和数据结构中所学链表类似,具体不再细讲.由于在内核中所实现的函数十分经典,所以移植出来方便后期应用程序中的使用. /********************* ...

  8. HDU_1238——最大子串搜索

    Problem Description You are given a number of case-sensitive strings of alphabetic characters, find ...

  9. Windows 注册表操作

    经常操作注册表,然后得到一份操作注册表函数实现.这里备份下. #ifndef _REGEDIT_H #define _REGEDIT_H int RegRead_S (struct HKEY__*Re ...

  10. Linux grep 命令中的正则表达式详解

    在 Linux .类 Unix 系统中我该如何使用 Grep 命令的正则表达式呢? Linux 附带有 GNU grep 命令工具,它支持扩展正则表达式(extended regular expres ...