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. HBase笔记--自定义filter

    自定义filter需要继承的类:FilterBase 类里面的方法调用顺序   方法名 作用 1 boolean filterRowKey(Cell cell) 根据row key过滤row.如果需要 ...

  2. hdu-3790最短路径问题

    Problem Description 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离及其花费,如果最短距离有多条路线,则输出花费最少的.   Inp ...

  3. jquery $.each()用法

    今天看到一个新的each玩法即each作为jquery的函数(平时用的大概都是用的each方法)使用: $.each([ 52, 97 ], function( index, value ) { al ...

  4. animate.min.css 动画样式移动端存在的问题

    使用animate.min.css可以使用很多动画效果,包括3D效果,现在也可以应用于HTML5手机移动端,使用切换效果的时候会导致页面出现卡顿现象,可以使用css3 transform 方法硬件加速 ...

  5. Python初体验_基础（一）

    一:变量 变量的赋值: name = "Meng" 上述代码声明了一个变量,变量名为name,变量name的值为:"Meng" 变量定义: 一个在内存存数据的容 ...

  6. android实现文本复制到剪切板功能(ClipboardManager)

    Android也有剪切板(ClipboardManager),可以复制一些有用的文本到剪贴板,以便用户可以粘贴的地方使用,下面是使用方法   注意:导包的时候 API 11之前: android.te ...

  7. Apache+Subversion+TortoiseSVN

    Key words: dav_svn, apache, subversion, tortoisesvn # install apache2 sudo apt-get install libapache ...

  8. Cocos2D-x权威指南: CCNode类方法：

    5.1.4 画图节点CCNode和图层CCLayer CCNode中提供的方法,在public块中的方法主要有下面几个部分: 1.针对节点显示的属性信息读写 2.针对节点变换的属性信息读写 3.针对子 ...

  9. SQL Profile 总结（一）

    一.前提概述 在介绍SQL Profile之前,不得不说的一个工具就是SQL Tuning Advisor:这个工具是从Oracle 10g開始引入,它的任务就是分析一个指定的SQL语句,并建议怎样使 ...

  10. mysql 建立加密连接

    加密连接可提高数据的安全性,但会降低性能.要进行加密连接,必须满足以下要求: user权限表里要有相关的SSL数据列.如果安装的MySQL服务器是4.0.0版的,user权限表已包含相关的SSL数据列 ...