初学jQuery的一些心得

前不久努力学习MVC,虽然MVC在VIEW层上功能比较强大,尤其MVC3新的视图引擎在构建视图时更加容易,但是这些通过视图引擎构建的视图硬邦邦的,在时代的今天如果没有一些动画或者特效,根本没法混,所以我学了一下jQuery，我看得是《jQuery JavaScript与css开发入门经典》这本书，这书作者的文字还算比较幽默，里面讲到的实例作者都一一进行了详细的说明，对于初学者不错，对于已经了解一些相关知识的人来说这本书有点太啰嗦了。

本人对jQuery的感觉就是方便，这些功能如果用JS徒手来完成，挖，真是个悲剧了。

我用一个下午完成了一个选择并拖动，一个桌面模拟，演示网站：www.chaoran44.com

回过头看看代码，发现根本没几个，用么那么长时间完成个人总结结果就是：一半以上的时间消耗在寻找不能执行的原因，而最终的原因不是大小写错了，就是拼写错了。JS编辑时没有代码提示功能，也没有语法检查功能，大家靠什么办法来避免自己拼写错误的问题啊?

接下来介绍：选择及拖动，效果及代码如下

  
  

   
   <
   
   h3
   
   >
   
   
 拖动演示
   
   </
   
   h3
   
   >
   
   

   
   <
   
   ul 
   
   id
   
   ="ulSelect"
   
   >
   
   
 
   
   <
   
   li
   
   >
   
   AAAAA
   
   </
   
   li
   
   >
   
   
 
   
   <
   
   li
   
   >
   
   BBBBB
   
   </
   
   li
   
   >
   
   
 
   
   <
   
   li
   
   >
   
   CCCCC
   
   </
   
   li
   
   >
   
   
 
   
   <
   
   li
   
   >
   
   DDDDD
   
   </
   
   li
   
   >
   
   
 
   
   <
   
   li
   
   >
   
   EEEEE
   
   </
   
   li
   
   >
   
   

   
   </
   
   ul
   
   >
  
  

  
  

   
    
   
   //
   
   拖动排序,点击改色
   
   

   
    $(
   
   '
   
   ul#ulSelect
   
   '
   
   ).sortable();
 $(
   
   '
   
   ul#ulSelect li
   
   '
   
   )
 .click(
   
   function
   
    ($e)
 {
 $e.preventDefault();
 $(
   
   this
   
   ).addClass(
   
   '
   
   liSelected
   
   '
   
   );

 $(
   
   this
   
   ).siblings().not(
   
   this
   
   ).removeClass(
   
   '
   
   liSelected
   
   '
   
   );
 });
  
  

桌面模拟采用了jQuery的AJAX支持，双击图标弹出的对话框内容从服务器返回，有着这个构建类似桌面程序简单了很多。他的代码及演示如下

  
  

   
   <
   
   h3
   
   >
   
   
 桌面模拟
   
   </
   
   h3
   
   >
   
   

   
   <
   
   div
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ="divDesktop"
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ="divDesk"
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ='Xbox' 
   
   class
   
   ="divFolder"
   
   >
   
   
 
   
   <
   
   div 
   
   class
   
   ="divIcon"
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div
   
   >
   
   
 Xbox
   
   </
   
   div
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ='PS3' 
   
   class
   
   ="divFolder"
   
   >
   
   
 
   
   <
   
   div 
   
   class
   
   ="divIcon"
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div
   
   >
   
   
 PS3
   
   </
   
   div
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ='WII' 
   
   class
   
   ="divFolder"
   
   >
   
   
 
   
   <
   
   div 
   
   class
   
   ="divIcon"
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div
   
   >
   
   
 WII
   
   </
   
   div
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ='PSP' 
   
   class
   
   ="divFolder"
   
   >
   
   
 
   
   <
   
   div 
   
   class
   
   ="divIcon"
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div
   
   >
   
   
 PSP
   
   </
   
   div
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ='3DS' 
   
   class
   
   ="divFolder"
   
   >
   
   
 
   
   <
   
   div 
   
   class
   
   ="divIcon"
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   <
   
   div
   
   >
   
   
 3DS
   
   </
   
   div
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   
@* 
   
   <
   
   div 
   
   id
   
   ='divTask'
   
   >
   
   
 
   
   <
   
   div 
   
   id
   
   ='dibStart'
   
   >
   
   
 开始
   
   </
   
   div
   
   >
   
   
 
   
   </
   
   div
   
   >
   
   *@

   
   </
   
   div
   
   >
  
  

  
  

   
   //
   
   桌面模拟
   
   

   
    $(
   
   '
   
   div.divFolder
   
   '
   
   )
 .mousedown(
   
   function
   
    ()
 {
 $(
   
   '
   
   div.divFolder
   
   '
   
   ).not(
   
   this
   
   )
 .removeClass(
   
   '
   
   divFolderSelected
   
   '
   
   );
 $(
   
   this
   
   ).addClass(
   
   '
   
   divFolderSelected
   
   '
   
   );
 })
 .dblclick(
   
   function
   
    ()
 {
 
   
   var
   
    div 
   
   =
   
    $(
   
   '
   
   div#divTemplate
   
   '
   
   ).clone();
 div.removeAttr(
   
   '
   
   id
   
   '
   
   );
 
   
   var
   
    titleID 
   
   =
   
    $(
   
   this
   
   ).attr(
   
   '
   
   id
   
   '
   
   );
 div.dialog({
 show: 
   
   '
   
   drop
   
   '
   
   ,
 hide: 
   
   '
   
   drop
   
   '
   
   ,
 title: titleID
 });
 div.load(
   
   '
   
   /Jstry/GetPalyHostInfo
   
   '
   
   ,
 {
 hostName: titleID
 });

 })
 .draggable(

   
   //
   
    {
   
   
//
   
    helper: 'clone',
   
   
//
   
    opacity: 0.5
   
   
//
   
    }
   
   

   
    );
  
  

源代码下载：http://files.cnblogs.com/CR-Soft/CRSearch%e5%89%af%e6%9c%ac.rar

PS：项目是从MVC2迁移到MVC3中的所以有些凌乱