只要懂的HTML和CSS就可以完成静态页面，很多项目中有多部分都是由静态构成，但是如果每个页面需要响应事件或者一些界面效果的时候就需要js来控制了，jQuery是js的一个封装的库，提供了非常便捷好用的js封装库，用专业的术语来说就是jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JS开发人员遍历HTML文档、操作DOM、处理时间、执行动画和开发Ajax的操作。其独特而又优雅的代码风格改变了JS程序员的设计思路和编写程序的方式。
首先我对JS的一些基本的用法和构建比较了解，但是没有系统的学习过，所以我通过《锋利的JQuery》开始了我的学习之旅。这本有个特点就是把jQuery和DOM进行对比讲解，如果比较了解DOM操作的人去看肯定是事半功倍，但是我不了解DOM操作 所以有些内容我就跳过了，目前我看了三章，主要最大收获有下面几点：
1.jQuery写法规范问题
之前在项目中我看见过如下类似代码：
$（".level1>a"）.click(function(){
$(this).addClass("current")
.next().show()
.parent().siblings().children("a").removeClass("current")
.next.hide();
return false；
})
我一开始认为是代码排版除了问题于是就进行了更改
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next.hide();
改成了一行。
而这种做法是不好的
这一句代码作用是当鼠标单击到a元素（它是class含有leve1的子元素）的时候，给其添加一个名为current的class，然后将紧邻其后面的元素显示出来，同时将它的父辈的同辈元素内部的子元素<a>都去掉一个名为current的class，并且将紧邻它们后面的元素都隐藏。
也就是说这一句代码里进行了多个操作，仅仅只是做到了行为和内容的分离，当别人阅读这句代码时就费劲了。这个时候就需要有层次结构和规范的书写再加上注释就大大增加了可读性和可维护性。
$(this).addClass("current") //给当前元素添加“current”样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除“current”格式
.next.hide(); //它们的下一个元素隐藏
return false；
这里就是第一个收获------jQuery有层次结构和规范的书写
（1）对于同一个对象不超过3个操作的，可以直接写成一行。
（2）对于同一个对象的较多操作，建议每行写一个操作
（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。
2.下拉框左右选择项的添加
实现如下功能：
（1）将选中的选项添加给对方
（2）将全部选项添加给对方
（3）双击某个选项将其添加给对方
$（'#add'）.click(function(){
var options = $('select option:selected');
options.appentTo("#select2");
} )//将选中的选项添加给对方
$(#add_all").click(function(){
var option = $('#select option');
option.appentTo('#select2');
})//将全部选项添加给对方
$('#select').dblclick(function(){
var options = $("option:select".this) ;
option.appentTo('#select2');
} )/双击某个选项将其添加给对方
3.其他一些简单的学习笔记
//选取#prev之后的所有的同辈div元素
$（"#prev~div"）.css("background","#bbffaa")
//同上
$("#prev").nextAll("div").css("background","#bbffaa")
//选取#prev所有同辈div元素，无论前后位置
$("#prev").siblings("div").css("background","#bbffaa");
改变高度：
$comment.height( $comment.height()+50);
改变高度（加个动画）:
$(comment).animate({height:"+=50"}.400);
选择name为item的checkbox
$（‘[name-itmes]:checkbox’）.attr('check'，true);
全选时，下面的复选框全部被选择
$("#chickall").click(function(){
$('[name=items]:checkbox').attr("checked",this.checked);
}}
