CSS将样式从结构中分离出来，类似的，javaScript可将行为从结构中分离出来。

<button type="button" onclick="document.getElementById('xyz'.style.color)='red'';"></button>

改为：

<script type="text/javascript">

window.onload=function(){

document.getElementById('testButton').onclick=makeItRed;

};

function makeItRed(){

document.getElementById('xyz'.style.color)='red'';

}

</script>

虽然代码变多了，但是这种分离是应该被支持的。将行为从结构中分离，这被称为“不唐突的JavaScript”。

jQuery旨在关注使不唐突的JavaScript技巧称为简单的事情，减少代码而实现更多的功能

jQuery包装器

$()是jQuery()函数的别名，可返回特别的JavaScript对象，包含于选择器相匹配的DOM元素的数组。这种结构被称为包装器。

jQuery具有可链接性，常常出现很长的函数链，这样可以持续减少为获得所求结果的代码行数。

       eg.  $("div.notLongForThisWorld").fadeOut().addClass("reMoved"); //前半部分是使元素淡出，后半部分是添加新的CSS类到每个元素。

jQuery支持很多选择器，除了CSS的，还支持自定义选择器

示例：

$("p:even")    选择所有偶数的<p>元素
$("tr:nth-child(1)")    选择每个表格的第一行
$("body > div")    选择作为body的直接子节点的div
$("a[href$=pdf]")    选择器选择指向pdf文件的链接
$("body>div:has(a)")    选择作为body直接子节点，包含链接a的div

实用工具

除了包装元素便于操作外，jQuery还有使用工具函数以提供服务

$.trim(someString);    //删除字符串前后空格的实用工具函数

文档就绪处理程序

将window.onload=function(){

$("table tr:nth:child(even).addClass("even")");

}替换为$(document).ready( function(){

$("table tr:nth:child(even).addClass("even")");

});

        好处在于前者要等所有的DOM加载完之后才执行脚本，如果图像或其他资源加载要好一段时间的话，能明显看到有延迟；但是后者是当文档为准备操作最好准备的时候就执行，会比较快。

创建DOM元素

用$()可即时创建相应的DOM元素        eg $("<p> Hi There!</p>")

创建好的元素可以被操作，比如插入到网页特定位置    eg $("<p> Hi There!</p>").insertAfter("#followMe");

jQUery函数可以执行的任务：

1.选择和包装DOM元素以便操作；

2.充当全局实用工具函数的命名空间；

3.根据HTML标记创建DOM元素；

4.建立代码，当DOM元素为操作准备好时立即执行

源码下载地址：http://www.manning.com/bibeault/

经测在chrome下不能运行，在ie9中可以看效果