JQuery快速入门与实用技巧

# 一,JQuery文件的导入:  
#     使用的时候可不能忘记我们需要JQuery的内核包:jquery-1.XXX.XX.js  
#     不要忘记在要是用的页面中导入该函数库,导入方法如下:  
#     <script type="text/javascript" src="[这里是JQuery.js文件的位置]"></script>  
#     <script type="text/javascript">  
#         //这个里面写JS代码和JQuery代码   
#     </script>  
#     这里附上一句JQuery的宗旨:Write less but do more!  
# 二,JQuery基本的使用:  
#     a)在使用之前我们要知道JQuery中开都都是以"{1}quot;开头的,这个和EL表达式有点像!  
#     b)JQuery中的各种函数的使用  
#         1.$(document).ready(function(){  
#                 //JQuery代码   
#             });  
#             这个代码的缩写是:  
#             $(function(){  
#                 //JQuery代码   
#             });  
#             以上这两个函数的功能与JS中的document.onload();功能类似,但是又不完全相同!  
#             不同点:JS中的onload是在整个网页内容全部加载完毕后才执行,而Jquery则是在DOM结构绘制完毕后即可执行  
#             还有值得注意的是,JQuery中的事件名与JS中基本一致,但是要去掉JS事件名中开头的"on",  
#             JS                      JQuery  
#             onclick               click  
#             onblur                blur  
#             onmouseover     mouseover  
#             onmouseout       mouseout  
#             on....                   ....  
#         2.假如我们就以一个id为theBtn的按钮和一个样式为theStyle的元素来进行讲解吧!  
#             $(function(){  
#                 //当那个按钮按下时就会执行一个函数   

#                 $("#theBtn").click(function(){  
#                     //这里我们可以对这个DIV进行各种动画效果测试,详情见参考手册   
#                     //--------------------------------------------------   
#                     //表示立即隐藏   
#                     $(".theStyle").hide();  
#                     //在500毫秒之内隐藏   
#                     $(".theStyle").hide(500);  
#                     $(".theStyle").show([这里也可以有整形参数哦,功能同上]);  
#                     //这里还有一个很不错的方法toggle(),就是判断状态并进行相反的状态,显示->不显示->显示->....   
#                     $(".theStyle").toggle([毫秒数(可以要可以不要)]);  
#                     //--------------------------------------------------   
#                     //表示该元素在500毫秒之内会吧长度调整到500px   
#                     $(".theStyle").animate({width:"500px"},500);  
#                     //同时这个也支持方法链   
#                     $(".theStyle").animate({width:"500px"},500).animate({height:"500px"},500).animate(...);  
#                     //个人觉得为了代码的可读性和美观,可以写成这种:   
#                     $(".theStyle")  
#                     .animate({width:"500px"},500)  
#                     .animate({height:"500px",500})  
#                     .animate({paddingLeft:"50px"},500)  
#                     .animate(...);  
#                     ;  
#                     //--------------------------------------------------   
#                     //当然这里在列出常用的几种:   
#                     $(".theStyle")  
#                     //改变样式相当于JS中的XXX.style="";   
#                     .css("border","solid 1px lightBlue")  
#                     .css("color","red")  
#                     .css(....)  
#                     ;