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 字符串中。