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"
    href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
        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类可以单独改变元素的某样式，但是由于使用过于烦琐，并且在大型程序中不能很好维护，因此用得较少。

上一章目录下一章