PHP + MySQL 學習筆記（七）--- jQuery 及 jQuery Mobile 簡介 + 兩個 練習

Query簡介

雖然JavaScript強大而靈活，具有大量內建函式，您仍然需要其他程式碼層來處理無法通過本機或CSS實現的簡單事情，例如動畫，事件處理和非同步通訊。
而且，由於多年來的各種瀏覽器大戰，令人沮喪和煩人的瀏覽器不相容問題一去不復返，有時還是通過乏味的JavaScript程式碼才能確保網頁在所有裝置上的外觀相同，解決近年來發布的各種瀏覽器和版本之間的所有差異。一言以蔽之，還是噩夢。
為了填補這些空白，已經開發了許多功能庫（其中許多功能還提供了對DOM的輕鬆掛鉤），以最大程度地減少瀏覽器之間的差異並促進非同步通訊以及事件和動畫處理。這些包括AngularJS，jQuery，MooTools，Prototype，script.aculo.us和YUI之類的東西。

為什麼使用jQuery？

這裡選擇了使用最廣泛的庫：jQuery，據W3Techs稱，jQuery現在已安裝在所有網站的73％以上，而且（據我所知他們的圖表）比其所有主要競爭對手的總和使用得更多。順便說一句，如果您想隨時瞭解各種庫的堆積方式，請在SameTech網站上搜尋javascript。
使用jQuery，您不僅可以獲得非常高的跨瀏覽器相容性（是的，甚至包括Internet Explorer），而且還可以快速便捷地訪問 HTML和DOM操作，可以直接與CSS互動的特殊功能，以及控制事件，建立專業效果和動畫的強大工具以及與Web伺服器進行非同步通訊的功能。

jQuery還是各種外掛和其他實用程式的基礎。

當然，您不一定需要使用jQuery，一些程式設計純粹主義者永遠都不會碰庫，而是喜歡建立自己的定製功能集合（這樣做可能有充分的理由，例如不必等待其他人這樣做）。糾正發現的錯誤，實現自己的安全功能等）。但是jQuery確實經受了時間的考驗，如果您想利用其柔和的學習曲線並儘快開發高質量的網頁。

插入jQuery

在網頁中插入jQuery的方法有兩種。

1. 您可以轉到下載頁面，下載所需的版本，將其上傳到Web伺服器，然後從HTML檔案中的指令碼標記引用它。
2. 或者，您可以利用免費的內容分發網路（CDN）並只需連結到所需的版本。

jQuery是根據MIT許可的條款發行的，該許可對您的操作幾乎沒有任何限制。您可以自由地在任何其他專案（甚至是商業專案）中使用任何jQuery專案，只要版權標頭保持不變即可。

選擇正確的版本

在決定直接下載 jQuery或是使用CDN之前，必須選擇一個 jQuery 版本。在大多數情況下，這很簡單，因為您只需選擇最新版本。但是，如果您以特定的瀏覽器為目標，或者維護的舊網站依賴於特定版本的 jQuery，則最新版本可能不適合您。
與大多數軟體不同，您只需下載並安裝最新的可用版本，jQuery就會隨著時間的推移而發展，以考慮到不同瀏覽器版本，功能和錯誤的市場變化。
同時，對jQuery進行了改進，可能會使較新版本在專門針對特定版本（以及圍繞它的怪癖）的網站上以不同的方式執行。
當然，每個較新的版本都是對先前版本的改進，並且越來越可能涵蓋所有基礎。對於網站來說，相同的操作至關重要的地方，除非您已經完全測試了新版本，否則通常最好堅持使用較早的版本。

不同風格的jQuery

jQuery的三個分支，分別稱為1.x，2.x和3.x，分別針對不同的環境而設計。

1.x版是jQuery的第一個穩定版本。此版本支援較舊的網路瀏覽器，它們各自的開發人員甚至不再支援。如果您期望使用舊版Web瀏覽器的訪問者數量眾多，那麼這是該版本。

2.x版本放棄了對Internet Explorer 6–8的支援，以提高jQuery的整體效能並減小庫的檔案大小。它比1.x版更快，更小，但不支援較早的網路瀏覽器。由於Microsoft放棄了對Windows XP的支援，因此可以安全地假設您的訪問者將使用與2.x版相容的瀏覽器，除非您另外知道。

一般來說，jQuery的每個新版本都支援以下瀏覽器版本：

• Chrome: (Current – 1) and Current
• Edge: (Current – 1) and Current
• Firefox: (Current – 1) and Current
• Internet Explorer: 9+
• Safari: (Current – 1) and Current
• Opera: Current

如果您需要支援較舊的瀏覽器，例如Internet Explorer 6-8，Opera 12.1x或
Safari 5.1 +，jQuery開發人員建議使用1.12版。有關的詳細資訊 支援的不同版本，請訪問網站。

下載

jQuery的最新發行版本在下載頁面上以未壓縮和最小化形式提供。您還可以在jQuery CDN上找到所有過去的發行版。下載頁面上顯示的jQuery苗條版本省略了非同步通訊功能以節省空間，因此，如果您希望使用jQuery來使用任何AJAX功能，則應避免使用這些功能。
您需要做的就是選擇所需的版本，右鍵單擊旁邊顯示的連結，然後將其儲存到硬碟上。從那裡，您可以將其上傳到Web伺服器，然後將其包含在

<script src ='http：//myserver.com/jquery-3.2.1.min.js'> </ script>

如果您以前從未使用過jQuery（並且沒有特殊要求），則只需下載最新的縮小版本，或通過CDN連結到它，如以下部分所述。

使用直接網路掛載

一些CDN支援jQuery。如果使用其中之一，則只需直接連結到這些網路提供的URL，就可以省去下載新版本然後將它們上傳到伺服器的麻煩。
不僅如此，他們還免費提供此服務，而且通常在可能是世界上最快的高容量主幹網上提供。此外，CDN通常將其內容儲存在多個不同的地理位置，然後從最靠近衝浪者的伺服器提供所需的檔案，以確保最快的交付速度。

總體而言，如果您不需要修改jQuery原始碼（要求您將其託管在自己的網路伺服器上），並且您的使用者肯定可以進行實時網際網路連線，那麼使用CDN可能是可行的方法。而且非常簡單。您只需要知道要訪問的檔名和CDN正在使用的根資料夾即可。例如，可以通過jQuery使用的CDN訪問所有當前和以前的版本，如下所示：

<script src ='http：//code.jquery.com/jquery-3.2.1.min.js'> </ script>

基本目錄位於http://code.jquery.com/，您只需在其後加上所需包含的檔名（在本例中為jquery-3.2.1.min.js）。
Microsoft和Google都在其網路上提供jQuery，因此您也可以通過以下兩種方式之一將其包括在內：

<script src ='http：//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js'> </ script>
<script src ='http：//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'> </ script>

對於Microsoft CDN（aspnetcdn.com），您應以ajax.aspnetcdn.com/ajax/jQuery/ 的基本目錄開頭，然後再以所需的檔名開頭。
但是，對於Google，您必須將檔名（例如jquery-3.2.1.min.js）拆分為資料夾和檔名（例如：3.2.1 / jquery.min.js）。然後在其前面加上ajax.googleapis.com/ajax/libs/jquery/。

使用CDN的另一個好處是，大多數其他網站也都可以這樣做，因此jQuery很可能已經快取在使用者的瀏覽器中，甚至可能不需要重新交付。 73％或更多的網站使用jQuery，這可以節省很多寶貴的頻寬和時間。

自定義jQuery

如果絕對要最小化網頁下載的資料量，那麼您可能仍可以使用jQuery，只需對其進行特殊構建即可包含網站將要使用的功能。您將不能依靠CDN來交付它，但是在這種情況下，您可能根本不打算使用CDN。
要建立自己的jQuery自定義版本，請嘗試使用jQuery Builder。只需選中您想要的框，然後取消選中您不需要的框即可。然後將定製版本的jQuery載入到單獨的選項卡或視窗中，您可以在其中根據需要複製和貼上它。

jQuery語法

對於jQuery初學者來說，最引人注目的是** $ 符號**，它充當 jQuery 因子方法。選擇該符號是因為該符號在JavaScript中是合法的，簡短的並且不同於常規變數，物件或函式/方法的名稱。
該符號代替了對jQuery函式的呼叫（也可以根據需要執行此呼叫）。這樣做的目的是使您的程式碼簡短有趣，並在每次訪問jQuery時節省不必要的額外輸入。它還會立即向您的程式碼新使用者顯示正在使用jQuery（或類似的庫）。

jQuery Mobile庫

您已經意識到可以節省時間並可以利用jQuery的強大功能，我想您將很高興得知可以使用jQuery Mobile庫做更多的事情。
建立jQuery Mobile是為了補充jQuery，它要求您在網頁中同時包含jQuery和jQuery Mobile（以及您還將需要的CSS檔案和隨附的影像），以便在手機和其他裝置上檢視時將其轉換為完全互動式的體驗。移動裝置。
jQuery Mobile庫使您可以使用“漸進增強”技術（使基本的瀏覽器功能先顯示良好，然後在遇到更多功能時新增越來越多的功能）將普通網頁改編為移動網頁。在瀏覽器中）。它還具有所謂的**“響應式網頁設計**”（其中網頁在各種裝置和視窗或螢幕尺寸上都能很好地呈現）。

重點不是要絕對地教您有關jQuery Mobile的所有知識，它本身可能會佔用一整本書！相反，我想為您提供足夠的資訊，以使您可以將任何不太大的網頁集重新構建為一個連貫，快速且外觀漂亮的Web應用程式，以及所有頁面幻燈片和其他過渡功能，觸控裝置，以及更大，更易於使用的圖示，輸入欄位以及輸入和導航的其他增強方面。
為此，僅介紹jQuery Mobile的一些主要功能，這些功能將使您能夠使用在桌面和移動平臺上都能很好執行的乾淨且可行的解決方案來啟動和執行。在此過程中，認識以這種方式使網頁適應移動時可能會遇到的一些陷阱，以及如何避免這些陷阱。精通jQuery Mobile後，您將發現仔細閱讀線上文件來查詢自己專案所需的功能很簡單。
除了逐步增強HTML的顯示方式之外，jQuery Mobile 還根據其自身執行所在的瀏覽器的功能，還根據使用的標籤和一組自定義資料逐步增強了常規HTML標記。
屬性。有些元素不需要任何資料屬性即可自動增強（例如，選擇元素會自動升級到選單），而其他元素則需要存在資料屬性才能進行增強。可以在API文件中檢視受支援的資料屬性的完整列表。

Including jQuery Mobile

有兩種方法可以將 jQuery Mobile 包含在您的網頁中。

1. 首先，您可以轉到下載頁面，選擇所需的版本，將檔案下載到Web伺服器（包括與庫一起提供的樣式表和隨附的影像），然後從那裡提供服務。
   例如，如果您已經將 jQuery Mobile 1.4.5（當前版本）及其 CSS 檔案下載到伺服器的文件根目錄，則可以包括它們以及隨附的 jQuery JavaScript（必須為2.2.4版本）。如我所寫，因為 jQuery Mobile 尚不支援版本3（儘管 jQuery Mobile 1.5已計劃支援 jQuery 3）—在這樣的網頁中：

<link href="http://myserver.com/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<script src='http://myserver.com/jquery-2.2.4.min.js'></script>
<script src='http://myserver.com/jquery.mobile-1.4.5.min.js'></script>

2. 或者，與jQuery一樣，您可以利用免費的內容交付網路（CDN）直接網路掛載, 只需連結到所需的版本即可。您可以從以下三種主要CDN中進行選擇（Max CDN，Google CDN和Microsoft CDN），並且您可以通過以下方式從中檢索所需的檔案：

<!-- Retrieving jQuery & Mobile via Max CDN -->
<link rel="stylesheet"
  href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
<!-- Retrieving jQuery & Mobile via Google CDN -->
<link rel="stylesheet" href=
 "http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js">
</script>
<!-- Retrieving jQuery & Mobile via Microsoft CDN -->
<link rel="stylesheet" href=
  "http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src=
"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>
<script src=
"http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>

您可能需要將一組這些語句放在頁面的部分中。

為了確保您可以在離線狀態下使用這些示例，下載了所有必需的 jQuery 檔案，並將它們與示例檔案的存檔一起包括在內，您可以從本書的配套網站上免費下載這些檔案。因此，所有這些示例都顯示了在本地服務的檔案。

兩個 jQuery Mobil 例題：

第一個，基本實驗架構：welcome.html
(請在 PHP 環境下練習）

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome</title>
    <meta name='viewport' content='width=device-width, 
      initial-scale=1'>
    <link rel='stylesheet' href='http://code.jquery.com
      /mobile/1.1.1/jquery.mobile-1.1.1.min.css' />
    <script src='http://code.jquery.com/jquery-
      1.7.1.min.js'></script>
    <script src='http://code.jquery.com/mobile
      /1.1.1/jquery.mobile-1.1.1.min.js'></script>
  </head>
  <body>
    <!-- Main Page -->
    <div id='main' data-role='page'>
      <div data-role='header'>
        <h1>Welcome!</h1>
      </div>
      <div id='content' data-role='content'>
        <p>The jQuery Mobile Cookbook</p>
      </div>
      <div data-role='footer'>
        <h4>Enjoy reading the book ...</h4>
      </div>
    </div>
  </body>
</html>

第二個，對話方塊
(請在 PHP 環境下練習）

<!DOCTYPE html>
<html>
<head>
  <!-- 下列檔案是先抓下來放在我的伺服器目錄上 -->
    <link href="../jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css" />
    <script src="../jquery-1.7.1.min.js"></script>
    <script src="../jquery.mobile-1.1.1.min.js"></script>
    
    <title>Example 02-05</title>
   <script type="text/javascript">
    /* 準備的空位/
    </script>
  </head>
<body>
 <!-- Main Page -->
    <div id="main" data-role="page">
      <div data-role="header">
        <h1>Header of Main Page</h1>
      </div>
      <div data-role="content">
        <a href="#customdialog" data-role="button"  data-rel="dialog">Open Custom Dialog</a>
      </div>
      <div data-role="footer">
        <h4>Footer of Main Page</h4>
      </div>
    </div>

<!--  #customdialog page  -->
    <div id="customdialog" data-role="page">  
      <div class="ui-corner-top ui-overlay-shadow ui-header ui-bar-a" role="banner">
        <a href="#main" data-icon="delete" data-iconpos="notext" 
          class="ui-btn-right ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-a" 
          title="Close" data-theme="a"  data-transition="pop" data-direction="reverse">
        <span class="ui-btn-inner ui-btn-corner-all"> <!-- -->
            <span class="ui-btn-text">Close</span>
            <span class="ui-icon ui-icon-delete ui-icon-shadow"></span>
          </span>
        </a>
        <h1 class="ui-title" tabindex="0" role="heading"  aria-level="1">Custom Dialog</h1>
      </div>
      <div data-role="content">
        <p> Create the #customdialog page in main.html, and add the custom header to 
the dialog that positions the close button on the right side of the header. The default 
header enhancement is prevented in this code: </p>
        <a href="#" data-role="button" data-rel="back"  data-theme="b">Go Back</a>
      </div>
      <div data-role="footer">
           <h4>Footer of Dialog</h4>
      </div>
    </div>

</body>
</html>

點選 “Open Custom Dialog” 按鈕後會出現下面的結果：

/*************** 本篇 END *****************/