初学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
//    }
    );

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

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