jQuery的：發現（）
jQuery是一個偉大的JavaScript框架。 如果你還沒有機會與他一起工作，我希望下面的出版物，將鼓勵你採取這種特殊的解決方案的優勢。 因為它的特點是速度快，優化代碼，以容納他在許多瀏覽器，這可能是最有趣的 - 易於構建複雜的解決方案。
在今天的文章將集中於一個非常有用的方法find（）方法。
如果你還沒有處理這個框架，我促請你熟悉自己選擇的基本知識，使用 對selectorów官方的API ，或準備與Medonia由Bartosz jQuery的基礎課程 。 這方面的知識，將極大地促進理解本文提出的解決方案。
最好的，讓我們這種方法的一些具體的例子。 在大多數頁面，菜單導航的基本要素之一。 我們將努力創造自己的動畫菜單下使用任何支持JavaScript的瀏覽器組件和操作系統的最低數量。
第一 元素的製備
讓我們開始創建一個空的HTML文檔：
DOCTYPE HTML PUBLIC“ - / / W3C / / DTD XHTML 1.0過渡/ / EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" <TITLE>菜單</ TITLE> </ HEAD> <BODY> </ BODY> </ HTML>
然後抓住jQuery的最新版本的 該項目的官方網站 （生產），並把它複製到我們的HTML文件的文件夾。
在這份文件中，可以使用一些樣本內容，我們的菜單。 用於本div和span標籤。 當然，我們的菜單上的項目，應該是鏈接，因此放置在一個塊。 整個塊內的DIV ID =菜單。 新增使用jQuery腳本標記的文件。 整個看起來應該像這樣：
<div id="menu"> <DIV> href的＃1菜單</ A> <SPAN> HREF＃1.1菜單</ A> HREF＃1.2菜單</ A> HREF＃1.3菜單</ A> </ SPAN> </ DIV> <DIV> HREF＃2菜單</ A> <SPAN> HREF＃2.1菜單</ A> HREF＃2.2菜單</ A> HREF＃2.3菜單</ A> HREF＃2.4菜單</ A> HREF＃2.5菜單</ A> </ SPAN> </ DIV> <DIV> HREF＃3菜單</ A> <SPAN> HREF＃3.1菜單</ A> HREF＃3.2菜單</ A> HREF＃3.3菜單</ A> HREF＃3.4菜單</ A> </ SPAN> </ DIV> <DIV> HREF＃4菜單</ A> <SPAN> HREF＃4.1菜單</ A> HREF＃4.2菜單</ A> </ SPAN> </ DIV> </ DIV> < - ！完菜單 - > 還有一些示例內容。 還有一些示例內容。 還有一些示例內容。 還有一些示例內容。 還有一些示例內容。 還有一些示例內容。 還有一些示例內容。 還有一些示例內容。 還有一些示例內容。 還有一些示例內容。 <script type="text/javascript" src="jquery.js"> </ SCRIPT>
專門把菜單上的許多項目，以顯示如何輕鬆將提出上訴，其中不少來自jQuery的，這取決於塊，我們移動鼠標。
第二 定義菜單的外觀（CSS）
在本節中，我們定義了用於在HTML文件中，代碼塊的樣子。 我準備自己的風格，位於頭部分，下面的代碼：
<style type="text/css"> <！ - * {保證金：0px，填充：0px;} {文字裝飾：無;字體：格魯吉亞20像素，“宋體”，時報，襯線;} HTML，身體{保證金：10px;} 菜單＃{利用TOP：0px;浮動：左;寬度：100％;} 分區菜單{位置：親屬;浮動：左;} ＃菜單：活躍，DIV＃菜單：鏈接，DIV＃菜單股息：{顯示：塊;位置：相對垂直對齊：中部;背景：＃CCC;顏色：＃FFF;填充：5PX 10px;寬度為150px;} 節＃菜單答：懸停{背景：＃999;} 節＃菜單跨度{顯示：無;的位置是：絕對的，最高：100％;左：0;浮動：無;} 節的div＃菜單：活躍，菜單div DIV：鏈接的div＃菜單跨度：{位置：親屬;顯示：塊;浮動：左;頂部：0px;背景：＃DDD;顏色：＃FFF;填充：5PX 10px;寬度為150px;} 節的div＃菜單懸停{背景：＃999;} - > </ STYLE>
在我們的例子中，我們創建兩個級別的只有簡單的菜單，但有沒有對它們進行修改和適應任意數量的水平的方式。
如果我們在這一點上，你也應該參考的框架創建css'owego菜單 。
第三 該方案的釘子 - 找到。
通過這些措施，我們正準備實施一個完整的頁面中的JavaScript代碼。 我們也知道，正如前面提到的，說的選擇。 在我們的例子，這個例子很簡單，因為只有四個主菜單，但不難想像，有可能是更多，每個人都可以有多個分支。 此資格的循環方法，也排除了蠻力，審議了所有的情況下單獨。 但是，找到方法，問題歸結到一個非常明確的代碼行的執行我們的整個工作。 好，我們的JavaScript代碼$（文件）。就緒，以確保我們把它當頁面加載時，所有的外部腳本，樣式和其他文件。
<script type="text/javascript"> <！ - / / <！[CDATA [[ $（文件）。就緒（函數（）{ $（“＃節”菜單“）懸停（ 函數（）{ 元（本）（“跨”）{不透明：0.98}）CSS（毫秒數值（如“快速”）; } 函數（）{ $（本）（“跨”）的毫秒數值（“快”）。; } ）; }）; / /]]> - > </ SCRIPT>
我上面的代碼，建議把腳本標記，我們稱之為jQuery的底部。
在主要的選擇，請參閱“菜單”，裡面全是一個div的id標籤。 方法。懸停（），是指發生入侵鼠標，選定項目，並作為參數，需要一個或兩個，在此事件開始執行的功能。 第二個特點是可選的，是當鼠標離開的元素領域。 試圖引入的代碼，使這兩個功能是透明的讀者，但我建議盡量減少在現有項目中的代碼。
現在讓我們來分析函數內部的代碼。 再次，在這裡我們使用的選擇，這個時候，我們是指我們生活在其中的主體。每個返回一個jQuery選擇器，可以解決這一條款。 但是，如果你想裡面的元素，請參閱該項目內的項目，使用的查找方法，查找並返回所有匹配的元素。 牢記這一點，因為如果你想是指一個特定的項目，你會使用這樣的類和後提出上訴。（“。ClassNazwa”）。 當然，裡面的發現，我們也可能是指一個比較複雜的結構元素，以及jQuery選擇器。
第一個功能，你可以看到，修改，找到方法返回一個對象，並改變其透明度，然後使用該方法的毫秒數值（），應啟動在這種情況下，動畫，，它是動畫，“降”的底部，決定設置顯示參數沒有設置元素（元素是無形的，所以滑動唯一能做的就是來證明這一點）。
在第二個特點，一切看起來都非常相似，除非我們不再需要修改不透明度，因為它已經改變。 我們做了jQuery，包括 因為在CSS中，不會有可能，在這樣一種方式，以實現完全符合W3C驗證，正確地顯示在所有現代瀏覽器支持JavaScript和透明度。
4 總結
這篇文章的目的，是學習如何創建動畫菜單，但是，結識許多有趣的問題，有關的方法找到（），以及jQuery的。 機遇是巨大的，我希望看完這篇文章後，它會獲得一些愛好者。
雖然我們的工作效果，我們可以看到示範 。
很不錯的文章 - 非常有用的方法介紹jQuery和相當實用的例子。 所有明確和愉快的，我等待著未來的藝術家