首頁 > 其他

jQuery系列筆記 1

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天開始學jQuery，感覺不錯，下面是一個簡單的例子，運行時把 jquery-1.3.1.js 檔案和網頁放在同一目錄下。

*******************全部代碼**************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>

    <script src="jquery-1.3.1.js" type="text/javascript"></script>

    <style type="text/css">
        #menu
        {
            width: 100px;
             border-collapse:collapse;
            border-color: Blue;
        }
        .has_children
        {
            background: #555;
            color: Black;
            cursor: pointer;
        }
        .hightlight
        {
            color: Red;
            background: green;
        }
        div
        {
            padding: 2px;
            margin: 10px 0;
        }
        div li
        {
            list-style-type: none;
            background: #555;
            color: #fff;
            cursor: pointer;
        }
    </style>

</head>
<body>
    <div id="menu" style="border-width: thin; border-color: #008000">
        <div class="has_children">
            <span>導航一</span>
            <li>修改密碼</li>
            <li>管理學生</li>
            <li>管理教師</li>
            <li>管理班級</li>
            <li>發送資訊</li>
        </div>
        <div class="has_children">
            <span>導航二</span>
            <li>查看日誌</li>
            <li>收件匣</li>
            <li>已發送</li>
            <li>寫 信</li>
        </div>
        <div class="has_children">
            <span>導航三</span>
            <li>隨便寫的1</li>
            <li>隨便寫的2</li>
            <li>隨便寫的3</li>
            <li>........</li>
        </div>
    </div>
        <script type="text/javascript">
            $(".has_children").children("li").hide();
            $(".has_children").click(function() {
                $(this).addClass("hightlight")
        .children("li").show().end()
        .siblings().removeClass("hightlight")
        .children("li").hide();
            });
    </script>
</body>
</html>

***************************************************      

**********************jQuery代碼*********************

  <script type="text/javascript">
            $(".has_children").children("li").hide();   <---------1
            $(".has_children").click(function() {　　 <---------2
                $(this).addClass("hightlight")　　　   <--------- 3
        .children("li").show().end()　　　　　　　　 <---------4
        .siblings().removeClass("hightlight")　　　　<---------5
        .children("li").hide();　　　　　　　　　　　　<---------6
            });　　　　　　　　　　　　　　　　　　　<---------7
    </script>

****************************************************

上面是一段jQuery代碼，把它作為我的入門代碼，現在解釋一下每行的意義：

1:所有class 為has_children的標籤中的 li 都設定為隱藏。

2：所有has_children標籤的click事件都觸發後面緊跟的function函數。

3：function函數體的一部分,為當前的標籤增加hightlight類。

4：將當前所有的 li 標籤都顯示出來。

5：將所有 has_children 的兄弟標籤都移除 hightlight 類。

6：將 has_children 的兄弟標籤的 li 標籤隱藏。

7：function 結束。

 

這樣，一個簡單的導航就成型了，呵呵！最終運行效果如：

      

 

@：每天寫一點，積少成多，水滴石穿！

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More