過去一段時間零零散散的自學了一點點jquery的相關用法，基本上屬於用到哪個了，就去查然后就學一點，沒有系統的學過，深入的用法也不是特別了解，畢竟javascript基礎就比較薄弱。經過一段時間的零敲碎打的學習，我決定使用jquery做一些東西，算是對以前學到的東西做一次總結。
我選擇了仿寫Windows7的桌面和任務欄效果，一個是我比較喜歡Windows7的半透明效果，第二個是這個有比較大的發揮空間。再次貼出來算是做一個筆記和總結，也把一些心得分享給學習路上的朋友們。編碼是本人是業余愛好，當然寫這個東西也純屬個人娛樂，寫的代碼比較隨意，沒有過於關注性能上的問題，如有指教之處，還望不吝相告！
已實現功能：
- 桌面圖標的排列
- 桌面圖標hover效果
- 任務欄定位和半透明效果
- 時間面板
- 任務窗口的拖拽
- 任務窗口的最小化
- 任務窗口的最大化和還原
- 任務窗口的關閉
- 任務欄點擊切換任務窗口
先來看幾張效果圖：
由於用的是HTML5+CSS3，所以有些代碼可能低版本瀏覽器支持的不好，所以盡量使用谷歌內核或者IE9及以上版本瀏覽器。全屏效果體驗更好！
桌面窗口及任務欄 圖片地址：https://images0.cnblogs.com/i/326283/201404/062025463446507.jpg
同一個窗口可以同時打開多個 圖片地址：https://images0.cnblogs.com/i/326283/201404/062029449694173.jpg
任務窗口最大化 圖片地址：https://images0.cnblogs.com/i/326283/201404/062036302979642.jpg
鼠標的懸停效果 圖片地址：https://images0.cnblogs.com/i/326283/201404/062032093138106.jpg
任務欄懸停效果 圖片地址：https://images0.cnblogs.com/i/326283/201404/062033426883280.jpg
基本上暫時只實現了上述的功能。下面我來寫幾個我認為jquery中比較有亮點的地方。
【無比強大的標簽選擇器】
$(".icons>ul>li")
一句話就選擇了所有class="icons"下的ul 下的 li，然后我們可以對它們進行批量操作。
【輕松更改元素的CSS】
$("#"+formid).css("top","50px");
formid為變量，代表已經獲取到的一個元素的id，整句話的意思就是更改id為 formid值 的元素 的上距為50px
當然還有另外一種方式就是通過變更css名來進行更改css
$(".cbarbg").eq(num).addClass("cbarbg2"); //增加css名
$(".cbarbg").eq(num).removeClass("cbarbg2"); //移除css名
【很實用的索引值】
當你獲取到$(".icons>ul>li")的時候實際上是 獲得的一個元素數組，你得到的是一組符合條件的li元素，那么具體怎么定為到每一個元素呢？就是通過索引的方式
例如：var num=$(".icons>ul>li").index(this);
這句話是寫在一個 點擊觸發的事件中的，那么this就代表當前所點擊的元素（是其中的一個li），那么通過這種方式 就可以得到當前被點擊的元素 處於 元素數組中的索引值，或者是數組的下標。
通過下標可以實現很多操作，例如：$(".icons>ul>li>.iconbg").eq(num).show();
由於.iconbg與li是對應存在的，一個li對應一個.iconbg，因此num為li的索引，同樣也是.iconbg的索引，通過這種方式就實現了針對li對應元素的操作。
【自定義屬性 這是個好東西】
屬性我們都知道，例如img標簽中有很多屬性 src、alt、等等，這些都屬於系統上的屬性，是已經規定好的，那么我們如果想在Img中存放一些其他的屬性，就需要通過自定義屬性來操作了，通過jquery可以很輕松的獲取。
自定義屬性都是data-開頭，例如：<span data-link="http://www.baidu.com">計算機</span>
這是一個桌面圖標的標簽，其中data-link的值就是一個自定義屬性，他存放的是當他被點擊的時候 打開的窗口中的iframe所鏈接的網頁。
那么通過jquery可以這樣來獲取：var dataid=$(".icons>ul>li>a>img").eq(num).attr("data-id");
這句話是寫在點擊事件中的，num為當前被點擊元素的索引，整句話的意思就是獲取當前被點擊元素的自定義屬性 data-id 的值。
【添加元素十分方便】
打開窗口，關閉窗口，元素的添加和移除都是少不了的操作，jquery實現起來很輕松。
$(".footBar").before("<div class=\"footBarbg\"></div>"); //在.footbar元素之前添加
$(".footBar").append("<div class=\"timebar\"></div>"); //在.footbar中添加
移除也很方便使用remove方法，當然還有其他的添加和移除方法，詳細操作有興趣的朋友可以查詢手冊。
【很犀利的控制顯示與隱藏】
最小化操作是需要隱藏窗口的，使用jquery不需要費多大事。
$("#"+formid).hide(500); //隱藏元素 500是延遲時間
$("#"+formid).fadeOut(500,function(){$("#"+formid).remove();}); //淡出隱藏 延遲500
注意這里想要實現的是 元素隱藏后 移除，所以移除操作必須寫在 隱藏操作的回調函數中，如果寫在隱藏方法的外面，則500的延遲尚未執行完畢，移除操作就已經執行完畢，則延遲隱藏效果就會失效，而寫在回調函數中，移除操作只有等待隱藏操作執行完畢回調時才會執行。
基本上目前學到的也就是這些了，效果比較簡單，還有很多效果沒有做
例如：開始菜單（一層一層的那種），鼠標框選圖標，工作窗口的自由拉伸，任務欄順序的更改，右鍵菜單等等的，繼續學習，進一步完善。
代碼下載：http://files.cnblogs.com/files/webconfig/WinFormJquery.zip
本文出自博客園：D調的碼農
轉載請注明出處：http://www.cnblogs.com/webconfig/p/3649323.html