學習jquery基礎的一點筆記

最近用到瞭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> 
  

You May Also Like