- 構建跨平臺APP：jQuery Mobile移動應用實戰（第2版） （跨平臺移動開發叢書）
- 李柯泉
- 939字
- 2020-11-28 23:45:46
3.2 原理解析
完成上一節的內容后，讀者就可以將HTML頁面打包成apk文件供手機使用了，當然也可以打包成供iOS或WP使用的文件。下面在頁面中引入jQuery Mobile。
提示
jQuery和jQueryMobile都不需要安裝，可以百度搜索“jquery-2.1.4.min.js”或“jquery.mobile-1.4.5”來下載我們需要的js文件，然后直接在文檔中引入即可，本書的jquery.mobile-1.4.5所有css和js文件基本都是使用的官方網絡地址，讀者也可以下載到本地。
首先打開Sublime，新建一個頁面，在其中插入范例3-2中第6～8行的代碼。
【范例3-2 在頁面中引入jQuery Mobile】
01 <! DOCTYPE html>
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>無標題文檔</title>
06 <! --jQuery Mobile需要的CSS樣式-->
07 <link rel="stylesheet"
/>
08 <! --jQuery支持庫-->
09 <script src="jquery-2.1.4.min.js"></script>
10 <! --jQuery Mobile需要的JS文件-->
11 <script
src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>12
</head>
13 <body>
14 <! --這里面加入內容-->
15 </body>
16 </html>
因為沒在頁面中加入任何內容，所以頁面打開后將是一片空白。那么引入的文件分別有什么用呢？
首先jquery-2.1.4.min.js文件引入了jQuery腳本，可以不必理會，而jquery.mobile.min.css則是將來使用JQuery Mobile進行設計時所使用的樣式文件。
到了這里，相信讀者已經能猜到jquery-2.1.4.min.js的作用了，它使用腳本選擇頁面中的元素，然后將對應的樣式加載到相應的元素上去。
提示
實際上，這一部分用到的全都是jQuery Mobile中的基礎內容，但是如果能夠充分理解這部分內容，就可以隨心所欲地使用jQuery Mobile進行開發了。
3.2.1 選擇元素
jQuery Mobile選擇元素的方法有很多，這里整理出以下幾種。
（1）可以利用CSS選擇器對元素進行直接選取。
$(document) //選擇整個文檔對象
$('#myId') //選擇ID為myId的網頁元素
$('divmyClass') //選擇class為myClass的div元素
$('input[name=first]') //選擇name屬性等于first的input元素
（2）可以利用jQuery Mobile的特有表達式對元素進行過濾。
$('a:first') //選擇網頁中第一個a元素
$('tr:odd') //選擇表格的奇數行
$('#myForm :input') //選擇表單中的input元素
$('div:visible') //選擇可見的div元素
$('div:gt(2)') //選擇所有的div元素，除了前3個
$('div:animated') //選擇當前處于動畫狀態的div元素
jQuery Mobile多是使用對元素的data-role屬性進行設置的方式，來確認使用了哪種控件，若是在頁面中有如下內容：
<div data-role="page"></div>
那么，要獲取這個元素則需使用如下語句：
$("div[data-role=page]");
提示
在HTML 5中單引號和雙引號是通用的，甚至在表明一些屬性的值時可以不用引號，但是一旦使用必須成對，不可以出現一個左單引號配一個右雙引號的現象。
3.2.2 設置屬性
剛剛獲得了頁面中元素的屬性，現在就應該來為元素設置樣式了，jQuery中為元素設置樣式有以下幾種方法。
● 可以為元素設置寬度和高度，可使用的方法有width(width_x)與height(height_x)，其中的參數即是要為元素設置的尺寸。
● 可以直接為元素加入CSS樣式，如addClass("page_cat")，即是將名為page_cat的樣式設置在元素上。jQuery Mobile中大多使用了這種方法。
● 還有jQuery自帶的CSS類可以單獨改變元素的某樣式，但是由于使用過于煩瑣，并且在大型程序中不能很好維護，因此用得較少。