close

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Insert title here</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

 <style>

        .s1{

            color: orange;

                text-decoration: underline;

                border: 1px red solid;

                width: 600px;

                text-align: center;

                background-color:green;

        }

         .s2{

            color: green;

                text-decoration: none;

                border: 3px red double;

                width: 600px;

                text-align: center;

                background-color:red;

        }

      

    </style>

 

</head>

<body>

    <div class="container">

       <nav class="navbar navbar-default">

           <div class="container-fluid">

              <!-- Brand and toggle get grouped for better mobile display -->

              <div class="navbar-header">

                  <button type="button" class="navbar-toggle collapsed"

                     data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"

                     aria-expanded="false">

                     <span class="sr-only">Toggle navigation</span> <span

                         class="icon-bar"></span> <span class="icon-bar"></span> <span

                         class="icon-bar"></span>

                  </button>

                  <a class="navbar-brand" href="#">jQuery Site</a>

              </div>

 

          

           </div>

           <!-- /.container-fluid -->

       </nav>

    </div>

    <div class="container">

       <div class="row">

           <div class="col-md-3">

              <div class="list-group">

  <a href="jQueryFirst.html" class="list-group-item">jQueryFirst</a>

  <a href="WritingStyle.html" class="list-group-item">jQueryWritingStyle</a>

  <a href="jQuerySelectors.html" class="list-group-item">jQuerySelectors</a>

  <a href="jQueryDOM.html" class="list-group-item">jQueryDOM</a>

  <a href="jQueryCSS.html" class="list-group-item">jQueryCSS</a>

  <a href="jQueryEach.html" class="list-group-item">jQueryEach</a>

   <a href="resize.html" class="list-group-item" target="_blank">jQueryEvent</a>

  <a href="jQueryEvent.html" class="list-group-item">jQueryEventBinding</a>

  <a href="jQueryEffects.html" class="list-group-item">jQueryEffects</a>

  <a href="jQueryAjax.html" class="list-group-item">jQueryAjax</a>

  <a href="jQueryUI.html" class="list-group-item">jQueryUI</a>

  <a href="jQueryPlugin_DataTables.html" class="list-group-item">jQueryPlugin</a>

</div>

           </div>

           <div class="col-md-9">

           <div class="jumbotron">

           <div class="page-header">

              <h3>jQuery CSS</h3>

           </div>

           <!-- 每頁不同的內容從這裡開始 -->

 <input type="button" value="Toggle" id="buttonToggle" />

    <h1 id="myH">write less, do more</h1>

    <h1>write less, do more</h1>

    <h1>write less, do more</h1>

    <h1>write less, do more</h1>

    <h1>write less, do more</h1>

    <h1>write less, do more</h1>

 

           <!-- 每頁不同的內容到這裡結束 -->

       </div>

           </div>

       </div>

 

       <div class="row">

           <div class="col-md-4">

              <h2>jQuery</h2>

              <p>jQuery的語法設計使得許多操作變得容易，如操作文件（document）、選擇文件物件模型（DOM）元素、建立動畫效果、處理事件、以及開發Ajax程式。jQuery也提供了給開發人員在其上建立外掛模組的能力。這使開發人員可以對底層互動與動畫、高階效果和高階主題化的元件進行抽象化。模組化的方式使jQuery函式庫能夠建立功能強大的動態網頁以及網路應用程式。

</p><p>

                  <a class="btn btn-primary"

                     href="https://zh.wikipedia.org/wiki/JQuery" role="button">詳細資料

                     &raquo;</a>

              </p>

           </div>

           <div class="col-md-4">

              <h2>jQueryUI</h2>

              <p>jQuery UI是一套JavaScript 函式庫，提供抽象化、可自訂主題的GUI控制項與動畫效果。基於jQuery JavaScript函式庫，可用來建構互動式的網際網路應用程式。在2007年9月約翰·雷西格於jquery.com部落格裡的一篇文章裡正式公諸於世[2]。最新的版本需要jQuery 2.1.1或更新的版本。</p>

              <p>

                  <a class="btn btn-primary"

                     href="https://zh.wikipedia.org/wiki/JQuery_UI"

                     role="button">詳細資料 &raquo;</a>

              </p>

           </div>

           <div class="col-md-4">

              <h2>jQueryMobile</h2>

              <p>jQuery Mobile is a touch-optimized web framework (also known as a mobile framework), more specifically a JavaScript library, currently being developed by the jQuery project team. The development focuses on creating a framework compatible with a wide variety of smartphones and tablet computers</p>

              <p>

                  <a class="btn btn-primary"

                     href="https://en.wikipedia.org/wiki/JQuery_Mobile" role="button">詳細資料

                     &raquo;</a>

              </p>

           </div>

       </div>

 

       <!-- Site footer -->

       <footer class="footer">

           <p>&copy; IIIEDU</p>

       </footer>

 

    </div>

    <!-- /container -->

    <script src="js/jquery-1.12.3.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script>

       $(function(){

           //所有的h1標籤都加上s1這個class，而且mouseover、mouseout均會觸發事件

           $('h1').addClass('s1').mouseover(over).mouseout(out);

          

           function over(){

              $(this).removeClass('s1').addClass('s2');

           }

           function out(){

              $(this).removeClass('s2').addClass('s1');

           }

          

           //toggleClass像是按鈕一樣，「有」s2就取消，沒有就加上去

       $("#buttonToggle").click(function(){

           $("#myH").toggleClass("s2")

       })

      

      

       })

      

      

    </script>

</body>

 

</html>

arrow
arrow
    全站熱搜

    乙方 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄