jQuery 技术梳理

来源：互联网发布：js将数据导出成excel 编辑：程序博客网时间：2024/05/22 05:00

最近无论是微信的技术平台开发，还是百度的轻应用技术框架Clouda，都围绕一个核心JavaScript的技术，之前对JavaScript的理解比较浅，知道一些大概，现在到了深入熟悉的阶段了，关于javaScript，本博客有几篇总结： JavaScript 与 jQuery AJAX，JavaScript 面向对象，JavaScript闭包定义及原理，JavaScript的事件模型基本上涉及了JavaScript中的重点和难点，以后还要继续深入学习，对以上几个概念，但是关于jQuery似是而非的懂，今天有必要深入了解并梳理一下关于jQuery的技术细节了。JavaScript的世界

JS是一种解释性语言，解释性语言一般应用于特殊的domain, 对于JS来说，就是浏览器，但是recent advancements have brought JavaScript to the server-side (via Node.js) so it can now be used in place of languages like PHP, Ruby, or ASP. 而jQuery will focus exclusively on JavaScript running in the browser.

近期CSDN上，JavaScript的技术进展精编：五个必须知道的JavaScript web Debug调试技术，JavaScript的位操作符应用，JavaScript编写的55Kb的MMOPRG游戏， IE11支持JavaScript新型API，Web应用国际化更便捷。

jQuery官方定义：

jQuery is a fast, small, and feature-richJavaScript library. It makes things likeHTML document traversal and m， anipulation, event handling, animation, andAjaxmuch simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

主要特点：

Lightweight Footprint：Only 32kB minified and gzipped. Can also be included as an AMD module
CSS3 Compliant： Supports CSS3 selectors to find elements as well as in style property manipulation
Cross-Browser： IE, Firefox, Safari, Opera, Chrome, and more

jQuery官方上的文档： jQuery的核心API文档 jQuery的基本入门

jQuery能够使用户的html页面保持代码和html内容分离，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

我的问题：众所周知JS的核心和难点是事件处理机制，闭包的原理

但jQuery的原理，核心是什么？jQuery与Ajax的关系

突然想起微博的中的长轮询机制，这篇文章中有介绍 Comet：基于 HTTP 长连接的“服务器推”技术

很多应用譬如监控、即时通信、即时报价系统都需要将后台发生的变化实时传送到客户端而无须客户端不停地刷新、发送请求。这就是在技术实现上常用的“服务器推”方案，服务器推的技术有三种实现方式如下：

（1）基于客户端Socket的服务推技术-Flash XMLSocket 《= 客户接受web应用只有在安装了Flash播放器才能运行，实现方法是JS调用Flash XML Socket接口与服务端Socket进行通信，并且JS将服务端返回的XML消息展示在HMTL页面上，有一个专门的项目： AFLAX（Asynchronous Flash and XML）项目提供的 Socket Demo 以及 SocketJS，提供了较全的支持！此方案的缺点是：客户端必须安装Flash播放器； Socket不像HTTP一样，有可能被防火墙阻断

（2）Web客户端上如果是Java Applet小程序，可以通过Java.net.Socket类直接与服务器端建立‘推’方案，但是这种方案，无法调用JS去更新HTML。

（3）基于 HTTP 长连接、无须在浏览器端安装插件的“服务器推”技术 -- “Comet”，基于AJAX 技术的普及，以及把 IFrame 嵌在“htmlfile“的 ActiveX 组件中可以解决 IE 的加载显示问题，它有两种实现模型：

1. 基于Ajax的Long-polling 长轮询方式：JS调用AJAX的 XMLHttpRequest 对象发出异步HTTP 请求，服务器端会阻塞请求直到有数据传递或超时才返回，JS响应处理函数根据服务器返回的信息对 HTML 页面的显示进行更新。一些应用及示例如 “Meebo”, “Pushlet Chat” 都采用了这种长轮询的方式。相对于“轮询”（poll），这种长轮询方式也可以称为“拉”（pull）。因为这种方案基于 AJAX，具有以下一些优点：请求异步发出；无须安装插件；IE、Mozilla FireFox 都支持 AJAX。
2.基于iframe及htmlfile的流（Streaming）方式：iframe 是很早就存在的一种 HTML 标记，通过在 HTML 页面里嵌入一个隐蔵帧，然后将这个隐蔵帧的 SRC 属性设为对一个长连接的请求，服务器端就能源源不断地往客户端输入数据，iframe 服务器端并不返回直接显示在页面的数据，而是返回对客户端 Javascript 函数的调用，如“<script type="text/javascript">js_func(“data from server ”)</script>”。服务器端将返回的数据作为客户端 JavaScript 函数的参数传递；客户端浏览器的 Javascript 引擎在收到服务器返回的 JavaScript 调用时就会去执行代码。

Pushlet 是一个开源的 Comet 框架，在设计上有很多值得借鉴的地方，对于开发轻量级的 Comet 应用很有参考价值。更多信息可以参考上面的连接。

无论是对JS还是对jQuery, 有一些用于调试的开发者工具，都非常棒：

Commonly referred to as "developer tools," many browsers ship with built-in features that provide better insight into JavaScript and jQuery while they run in the browser. Although they aren't required, you may find developer tools helpful when it comes to debugging errors in your code. Check out these browsers' developer tools:

Apple Safari
Google Chrome Developer Tools
Microsoft Internet Explorer
Mozilla Firefox Web Development Tools
Opera Dragonfly

如何使用jQuery:

是一个单独的javascript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。有Media Temple、Google、Microsoft等多家公司给jQuery提供CDN服务，比较常用的引用地址如下

BTW： CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

jQuery学习要点

(1)To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:$(document).ready(function(){ //code });

(2)For click and most other events, you can prevent the default behavior by calling event.preventDefault() in the event handler

(3) Adding or Removing a HTML Class such as $('a').addClass('test') , $('a').removeClass('test')

(4) CallBacks and Functions, JavaScript enables you to freely pass functions around to be executed at a later time. A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. Callbacks are special because they patiently wait to execute until their parent finishes. Meanwhile, the browser can be executing other functions or doing all sorts of other work.

if a callback has no arguments, you can pass it lik this: $.get('myhtmlPage.html', myCallBack);
of the callback has two arguments, $.get('myHtmlPage.html', function(){ myCallBack(param1, param2); });

(5) If the code will interact with the elements on the page, you have to make sure those elements exist at the time the script is executed.

(6) //single line comment, /* multi-line comments */, whitespace is also ignored