【jQuery基礎學習】10 簡單瞭解jQuery Mobile及jQuery各個級別版本的變化

關於 jQuery Mobile

 jQuery Mobile是為了填補jQuery在移動設備應用上的一個新項目。它應用了HTML5和CSS3。

主要特性

• 基於jQuery構建。
  • 採用與jQuery一致的核心和語法，還使用了jQuery UI的代碼和模式。
• 相容絕大部分手機平臺
• 輕量級的庫
• 模塊化構建
• HTML5標記驅動的配置
• 漸進增強原則
• 響應設計
• 強大的Ajax導航系統
• 易用性
• 支持觸摸和滑鼠事件
• 統一的UI組件
• 強大的主題化框架

基本應用

• 預設情況下，移動瀏覽器，會像在大屏幕的Web瀏覽器那樣顯示你的頁面，因此用戶在移動設備看到這個頁面的字體就比較小，所以要通過Meta元素可視區進行糾正。這個元素會通知瀏覽器使用移動設備的寬度作為可視區的寬度。

  <meta  name="viewport" content="width=device-width,intial-scale=1,user-scalable=no" />
  <!--這個元素設置寬度為設備的最大寬度，禁止用戶放大和縮小-->
  
  另載入順序應該為：
  <link rel="stylesheet" href="jquery.mobile.css"/>
  <script src="jquery.js"></script>
  <!--此處加入項目中其它js-->
  <script src="jquery.mobile.js"></script>

• data-role幫助jQuery mobile知道哪些元素要處理。data-屬性這個用法是HTML5推出的一個特性，它可以讓開發人員添加任意屬性到html標簽中，只要添加的屬性名有"data-"首碼。
  • data-role="button"按鈕
  • data-role="collapsible"一個包含標題和內容的容器
  • data-role="collapsible-set"一個包含collapsible的容器
  • data-role="content"一個內容容器
  • data-role="dialog"一個對話框
  • data-role="fieldcontain"一個區域包裹容器
  • data-role="slider"一個翻轉切換元素
  • data-role="footer"頁面頁腳容器
  • data-role="header"頁面標題容器
  • data-role="listview"列表視圖
  • data-role="navbar"導航欄
  • data-role="page"頁面容器
  • data-role="slider"一個有範圍值的文本框
  • type="checkbox"覆選框
  • type="radio"單選框
  • <select></select>下拉框
  • type="text|number|search"文本框|數字框|搜索框

    //簡單列表示例
    <ul data-role="listview" data-inset="true">
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
    </ul>
    //data-inset設置後列表的寬度就不會是100%，沒設置就是100%的寬度

• data-theme屬性表示應用怎樣的主題，值為a,b,c,d,e。

好吧就這麼多了，作者這章也寫得比較簡單。

關於版本變化

本章主要講了一下jQuery各個版本的變化，以及加入的新的變化。

我就撿1.6以後的，重要的，並且前面沒有提到過的講。

• 1.6
  • 增加了prop方法，獲取checked屬性的時候會返回true，而之前的attr獲取checked的時候只返回空。
  • 更新data方法，可以將元素上的數據屬性轉化為json形式的值，以駝峰形式展示。
• 1.7
  • 新的事件API：on()和off()取代了之前版本中的bind(),delegate(),live()和unbind(),undelegate(),die().
  • isNumeric()判斷傳入的參數是否為數字

作者只寫了1.7以前的版本變化，1.7以後的沒寫。

我在網上也看了一下，後面的版本大多都是修複BUG，另外提一下2系列的版本貌似是不再相容低版本IE6/7/8，並且IE9/10中使用相容性視圖也會受影響。