首頁 > 開發者 > JavaScript

學習jquery基礎的一點筆記

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

最近用到了jquery 就自己學習了一下，這裡是入門的時候自己做的一些筆記（參考3wschool）。還有一些自己寫的簡單的練習代碼

一、三種不同的載入jquery檔案的方法
1.本地檔案（要提前將js檔案下載下來）載入<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  一般有兩份 jQuery 拷貝可供下載，一是縮小版（由 Google Closure Compiler），另一個是未壓縮版（供 debugging 或 reading）

可以到http://download.csdn.net/source/3561704下載
2.載入Google 的 CDN<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
3.載入Microsoft 的 CDN<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
二、jquery的使用（推薦格式）
1.把所有 jQuery 代碼置於事件處理函數中
2.把所有事件處理函數置於文檔就緒事件處理器中
3.若檔案很大把 jQuery 代碼置於單獨的 .js 檔案中

如下一段代碼（將這段代碼儲存一個html尾碼名的檔案就可以看到他的效果了）：
<html>
   <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
      <script type="text/javascript">
          $(document).ready(function(){  --文檔就緒事件處理器，防止文檔在完全載入（就緒）之前運行 jQuery 代碼。這個是以後都要用到的
              $("p").click(function(){  --事件處理函數，根據自己的需要去調用相應的函數
                  $(this).hide();  --具體要執行的動作
       });
          });
      </script>
   </head>
   <body>
      <p>If you click on me, I will disappear.</p>
   </body>
</html>

三、jquery使用的文法
基礎文法是：$(selector).action()
    1.貨幣符號定義 jQuery
    2.選擇符（selector）“查詢”和“尋找” HTML 元素
    3.jQuery action() 執行對元素的操作
例如:$(this).hide() - 隱藏當前元素


四、jquery的選取器:$()
  1.元素選取器
  2.屬性選取器
  3.css選取器

 

五、jquery的事件
  1.jQuery 事件處理函數是 jQuery 中的核心函數。事件處理函數是當 HTML中發生事件時自動被調用的函數
  2.事件添加的不同，如上面的例子對<p>元素的單擊事件的調用
  3.記著要特別注意將事件處理放在文檔就緒事件處理器中

 

然後自己寫了一些練習的代碼，都是最基礎的。


Html代碼 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 
        <title>Selector</title> 
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
        <link href="select.css" rel="stylesheet" type="text/css"> 
        <script type="text/javascript"> 
            $(document).ready(function(){  
                <!--選擇屬性class為one的所有的p元素--> 
                $("p.one").click(function(){  
                    <!--選擇當前元素--> 
                    $(this).hide(3000);  
                });  
                  
                <!-- 選擇所有的p元素,也包括class=one的只是按順序先執行了上面那個方法,若將這個方法放到上面那個方法前則會先執行這個方法--> 
                $("p").click(function(){    
                    $(this).hide("slow");  
                });  
                  
                <!--選擇id=two的第一個元素（注意下面有兩個id=two的元素）--> 
                $("p#two").click(function(){  
                    $(this).slideToggle("slow");  
                });  
                  
                <!--選擇input類型為button的元素,後面的:first指的是第一個button按鈕--> 
                <!--first（第一個）  last（最後一個）  even（所有偶數） odd（所有奇數）--> 
                $(":button:first").click(function() {  
                    <!--選擇全部的元素--> 
                    $("*").hide();  
                });  
                  
            });  
        </script> 
    </head> 
    <body> 
        <p> 第一個p。點擊我，我就消失了</p> 
        <p class="one">第二個p。 點擊我，我也消失</p> 
        <p id="two"> 第三個p。點擊我，我會消失然後再重現</p> 
        <span id="two">點擊我，看看我會不會消失然後重現---不會</span> 
        <br> 
        <input type=button value="點擊我，全部的都會消失"></input> 
    </body> 
</html> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  <title>Selector</title>
  <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  <link href="select.css" rel="stylesheet" type="text/css">
  <script type="text/javascript">
   $(document).ready(function(){
    <!--選擇屬性class為one的所有的p元素-->
    $("p.one").click(function(){
     <!--選擇當前元素-->
     $(this).hide(3000);
    });
    
    <!-- 選擇所有的p元素,也包括class=one的只是按順序先執行了上面那個方法,若將這個方法放到上面那個方法前則會先執行這個方法-->
    $("p").click(function(){ 
     $(this).hide("slow");
    });
    
    <!--選擇id=two的第一個元素（注意下面有兩個id=two的元素）-->
    $("p#two").click(function(){
     $(this).slideToggle("slow");
    });
    
    <!--選擇input類型為button的元素,後面的:first指的是第一個button按鈕-->
    <!--first（第一個）  last（最後一個）  even（所有偶數） odd（所有奇數）-->
    $(":button:first").click(function() {
     <!--選擇全部的元素-->
     $("*").hide();
    });
    
   });
  </script>
 </head>
 <body>
  <p> 第一個p。點擊我，我就消失了</p>
  <p class="one">第二個p。 點擊我，我也消失</p>
  <p id="two"> 第三個p。點擊我，我會消失然後再重現</p>
  <span id="two">點擊我，看看我會不會消失然後重現---不會</span>
  <br>
  <input type=button value="點擊我，全部的都會消失"></input>
 </body>
</html>

用到的css檔案

Html代碼 
<PRE class=css name="code">body {  
    background-color:#778866;  
    width:1000px;  
    height:800px;  
}  
 
p {  
    font-family:"Arial Black";  
    font-size:12px;  
}  
 
p.one {  
    font-family:"Book Antiqua";  
    font-size:20px;  
}  
 
#two {  
    font-family:"Arial Rounded MT Bold";  
    font-size:30px;  
}  
</PRE> 
  

本文章原先以中文撰寫並發佈於 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