Write less, do more, I like jQuery.

jQuery是最常用的js库，整体来说非常轻量并易于扩展，对于移动应用可以使用其更轻量的孪生兄弟Zepto代替。其是由John Resig于2006创建的开源项目，极大的简化了javascript开发人员遍历HTML文档、操作DOM、处理事件、开发Ajax等操作，最有特色的形式是$(document).ready(function() {});其省略形式为：$(function() {});。

在使用jQuery时，需要注意jQuery对象和DOM对象的区别，通常对于jQuery对象，会在变量前加$，如var $variable=jQuery对象;。可以通过如下方式对两者进行转化。

jQuery对象转化为DOM对象: var $cr = $('#cr');var cr = $cr[0];

DOM对象转化为jQuery对象: var cr = document.getElementById('cr');var $cr = $(cr);

此外，在使用多个不同的javascript库时，有可能会出现库之间的冲突，可以通过如下方式解决。

jQuery.noConflict();

jQuery(function() {

jQuery('p').click(function() {

alert(jQuery(this).text());});});

//推荐下面的方式

var $j = jQuery.noConflict();

$j(function() {});

在介绍jQuery选择器之前，首先引入CSS选择器，如下表所示。

那么相应的jQuery也会提供对应的选择器，并增加部分自定义的选择器用于方便操作，主要包括基本选择器、层次选择器、过滤选择器、表单选择器等4类选择器。

Tip：html元素的id包含#，（，]等特殊字符时，需要通过//进行转义，例如：<div id='id[1]'></div>， $('#id\\[1\\]') //转义特殊字符

DOM(Document Object Modal)文档对象模型是一种与浏览器、平台、语言无关的接口，通过该接口可以轻松的访问浏览器中所有标准组件。一般来说，DOM操作可以分为3类：DOM Core，包含getElementById(),getAttribute()等方法；HTML_DOM，例如document.forms,element.src;CSS_DOM,例如element.style.color，对于jQuery来说，将会用更简洁的方式实现这部分功能，如下表所示。

在jQuery中，对Ajax方法进行了封装，如下表所示。

具体示例如下所示，这儿示例是form提交，而不是json提交，需要注意（通常调用接口，使用json提交；而页面的ajax请求，推荐使用form提交，会比较简单）。

 <script type="text/javascript">

     $(function() {

         $("#clear").click(function() {

             $('#request').text("");

             $('#response').text("");

         });

         $("#submit").click(function() {

             $.ajax({

                 url : 'submit',

                 type : 'POST',

                 data : $('form').serializeArray(),

                 /*                 contentType : 'application/x-www-form-urlencoded', */

                 dateType : 'json',

                 success : function(data) {

                     if (data) {

                         $('#request').text(data.requestXML);

                         $('#response').text(data.responseXML);

                     }

                 }

             });

         });

     });

 </script>

fiddler截图如下，比如对于java spring-mvc，该form报文可以直接序列化为对象，无需添加@RequestBody注解。

之前就介绍的$(document).ready()相信大家都不会陌生，其与window.onload实际上有一些区别的，前者是当DOM加载完成后触发，而后者则是页面中的所有元素(包括所有关联元素)加载完成后执行。在jQuery中，通常事件绑定是通过bind(type[,data],fn)方法实现的，其第一个参数为事件类型，非常丰富，包括blur,focus,load,resize,unload,click,dblclick,mousedown/up/move/over/out/enter/leave,change,select,submit,keypress/down/up等。

还可以通过.unbind解绑事件，.trigger(eventType)来模拟触发事件（包含默认行为），.triggerHandler()触发事件且不执行默认行为。此外，jQuery提供了合成事件，比如.hover(enter,leave),toggle(fn1,fn2)。

对于jQuery中的事件来说，其均使用事件冒泡机制，而不支持时间捕获机制(可以用原生js)。事件冒泡就是当页面上有个元素时，其中一个嵌套在另一个中，如果均绑定了click事件，那么触发内层元素的click事件时，会同时触发外部的click事件。这样的机制在有时是需要的，但有时却不是期望的，那么就绪要通过event.stopPropagation()方法来禁止事件的冒泡了，

此外，在jQuery中，可以通过event.preventDefault()方法来阻止元素的默认行为，常用与a链接元素和submit表单提交行为。需要注意的，jQuery实际上对event进行了封装，以屏蔽不同浏览器的差异，event.target用于获取触发事件的元素，.relatedTarget获取相关元素(mouseover,mouseout)，.pageX/pageY获取页面坐标，.which获取鼠标左中右键(值为1,2,3),.metaKey获取Ctrl键，.originalEvent获取原始事件对象。

接下来，将介绍jQuery库非常吸引人的动画操作，如下表所示。

jQuery插件非常多，但最常用的要数验证插件了，最后通过一个示例来了解validation插件。

$('#commentForm').validate({

rules: {

username: { required: true, minlength: 2 },

email: { require: true, email: true },

url: 'url',

comment: 'required'};});

更加详细的内容请，参见中文文档，http://www.runoob.com/jquery/jquery-plugin-validate.html

参考资料：

1. 单东林. 锋利的jQuery（第2版）[M]. 北京:人民邮电出版社, 2012.