jQuery in Action读书笔记

jQuery是什么：

jQuery的核心功能就是通过某些简便的方法，将html中的某些元素读取出来，然后在其上执行某些操作，以及对Ajax进行封装以简化其步骤；
jQuery提供一些辅助函数，比如map, grep, each, load, makeArray, getScript等；

jQuery的Selector Wrapper

主要是封装了CSS的Selector功能，其思想也完全相同，只不过做了一些Wrap而已。比如：$("p a") 就对应CSS中的"p a" （p元素中的a），比如$(".classA") 就是所有class是ClassA的元素，$("#idA")就是ID是idA的元素。
另外，jQuery还做了一些简化，比如对于数组，在javascript中需要通过下标进行引用，而在jQuery中就可以不考虑这些，直接操作就可以，不用考虑是一个数组，还是一个元素。

除了封装CSS的Selector之外，jQuery还进行了扩展，提供了更加强大的Selector功能。比如：
选择body元素的一级子元素中所有div， 选择所有Table中的第一行元素， 选择所有奇数个p元素， 选择body的div类子元素中含有a的（$("body > div:has(a)")）

$: namespace

jQuery中用$代替了jQuery，这样的目的可以使代码更短，size更小。虽然看上去$.trim()比较weird，但只要用jQuery将$替换掉，变成jQuery.trim()就比较顺眼了。

document ready handler

CSS及Javascript一个很重要的设计是要将dom结构与行为分开，也就是将数据结构与逻辑分开。逻辑可以加载在合适的结构上。
但是，向对应的结构加载时，你需要首先确定的就是这个结构已经被Brower正确的加载并parse为Dom了。最初，通过window.onload = function()事件，可以达到这一目的。但不幸的是，这个方法不但要等所有结构都变为Dom,还要等所有的image等外部资源都加载完成才会执行对应的function，这肯定是不行的。
所以，jQuery提供了一个更加适用的方法：$(document).ready(function(){...}); 这个代码只需要等到所有的结构都被正确解析之后就会触发，而不用等待所有页面资源都加载完成。

上面的代码还可简化为：$(function(){...});

扩展jQuery

虽然jQuery已经提供了很强大的Selector及function，但是一个公用的框架不可能将一切你需要的功能为你封装好，你还需要定义你自己的Funciton. 幸好，jQuery提供了很方便的扩展功能。
$.fn.disable = function(){   //$.fn.disable 就是定义一个叫disable的函数。
 return this.each(function(){   //this就是将被执行disable的元素（组）
  ...
 });
}

与其他js框架共处

在Web应用的重构中，可能要用到一些遗留系统中的遗留代码，还希望能利用jQuery的强大功能，这个时候就需要注意jQuery与遗留代码的冲突问题。这方面主要要考虑两个方面：
1、其他代码中是否定义了一个全局变量jQuery
2、其他代码中是否对 $ 符号进行了重载，可以用jQuery.noConflict()方法将代码中的$ 转换为原来的含义。

另外一点，关于(function($){...})(jQuery); 形式的定义说明。
function($)中的$参数表明，所有传入的参数，不管是什么类型，都可以用$来引用。这和callback函数的参数意义相同；
后面的(jQuery)则限定了这个$只能代表jQuery对象。 因此，在function body中，所有的$就都是jQuery的引用了。
通过这种方式，就解决了，无论其他js框架（遗留代码）是否也使用了$、jQuery定义，在这段代码中，$惟一的含义就是jQuery.

用Ajax与Server通信

Ajax可能需要很多代码才能完成一个与服务器交互的请求，比如需要判断浏览器是否支持，xhr的状态等等。而用jQuery，只需要一行代码就够了。
$('#someContainer').load('/someServlet');
这个代码完成的功能就是：在id为someContainer中显示/someServlet 服务返回的内容。
这里需要说明的是：load如果不带参数，则会发出一个Get请求，如果带参数，则会发出一个Post请求。如果想带参数，又用Get,则可以将参数也组合到serverURL 字符串中。