jQuery概述,代碼舉例及最新版下載

時間 2019-12-09

標籤 jquery 概述代碼舉例最新版下載欄目 JQuery 简体版

原文原文鏈接

jQuery是一個快速的，小巧的，具備強大功能的JavaScript庫。javascript

它的基本功能包括:css

1）訪問和操做DOM元素html

2）控制頁面樣式（能夠兼容各類瀏覽器）java

3）對頁面事件的處理jquery

4）大量插件在頁面中的運用程序員

5）與Ajax技術的完美結合ajax

jQuery改變了衆多的程序員使用 JavaScript的方式。api

jQuery官方主頁代碼示例:瀏覽器

1) DOM遍歷及操做服務器

將class爲continue的<button>的文本內容設置成"Next Step..."

1	`$(` `"button.continue"` `).html(` `"Next Step..."` `)`

2)事件處理

當點擊了#button-container容器下的任何一個 button時,將會顯示隱藏的#banner-message button,這個button是使用CSS的display:none隱藏的.

 
      var  
      hiddenBox = $(  
      "#banner-message"  
      ); 
     
 
      $(  
      "#button-container button"  
      ).on(  
      "click" 
      ,  
      function 
      ( event ) { 
     
 
         
      hiddenBox.show(); 
     
 
      }); 
     

3)Ajax

調用服務器上的/api/getWeather程序，並傳遞參數爲zipcode=97201,將返回的結果在#weather-temp中顯示出來。

 
      $.ajax({ 
     
      url:  
      "/api/getWeather" 
      , 
     
      data: { 
     
      zipcode: 97201 
     
      }, 
     
      success:  
      function 
      ( data ) { 
     
      $(  
      "#weather-temp"  
      ).html(  
      "<strong>"  
      + data +  
      "</strong> degrees"  
      ); 
     
      } 
     
      });

其它的一些舉例:

1) 搭建jQuery開發環境

(1）在http://jquery.com下載。

(2）在script標籤中引用：

1	`<` `script` `language` `=` `"javascript"` `type` `=` `"text/javascript"` `src` `=` `"Jscript/jquery-1.7.1.js"` `></` `script` `>`

2) 簡單彈出窗口的例子

 
      < 
      html 
      > 
     
      < 
      head 
      > 
     
      < 
      title 
      >jQuery程序1</ 
      title 
      > 
     
      < 
      script  
      language 
      = 
      "javascript"  
      type 
      = 
      "text/javascript" 
     
      src 
      = 
      "jquery/jquery-1.7.1.js" 
      ></ 
      script 
      > 
     
      < 
      script  
      type 
      = 
      "text/javascript" 
      > 
     
      $(document).ready(function(){ 
     
      alert("Hello,http://www.169it.com!!!");          
     
      }) 
     
      </ 
      script 
      > 
     
      </ 
      head 
      > 
     
      < 
      body 
      > 
     
      </ 
      body 
      > 
     
      </ 
      html 
      >

$(document).ready(function(){})便是jQuery代碼，至關於window.onload，能夠簡寫成$(function(){})

3) jQuery的鏈式寫法

 
      <script type= 
      "text/javascript" 
      > 
     
      $( 
      function 
      (){ 
     
      $( 
      ".divTitle" 
      ).click( 
      function 
      (){ 
     
      $( 
      this 
      ).addClass( 
      "divCurrColor" 
      ).next( 
      ".divContent" 
      ).css( 
      "display" 
      , 
      "block" 
      ); 
     
      }); 
     
      }); 
     
      </script>

4) jQuery訪問DOM對象

JavaScript方式：

 
      www.169it.com 
     
      var  
      tDiv=document.getElementById( 
      "divTmp" 
      ); 
     
      var  
      oDiv=document.getElementById( 
      "divOut" 
      ); 
     
      var  
      cDiv=tDiv.innerHTML; 
     
      oDiv.innerHTML=cDiv;

jQuery方式：

 
      var  
      tDiv=$( 
      "#divTmp" 
      ); 
     
      var  
      oDiv=$( 
      "#divOut" 
      ); 
     
      var  
      cDiv=tDiv.html(); 
     
      oDiv.html(cDiv);

5) 動態切換CSS樣式：

 
      $( 
      function 
      (){ 
     
 
      $( 
      ".divDefault" 
      ).click( 
      function 
      (){ 
     
 
      $( 
      this 
      ).toggleClass( 
      "divClick" 
      ).html( 
      "點擊後的樣式" 
      ); 
     
 
      }); 
     
 
      }); 
     

jQuery主頁最新版下載:

目前jQuery包括1.x系列和2.x系列，下載地址以下:

jQuery下載地址

本文來源:jQuery概述,代碼舉例及最新版下載

相關標籤/搜索