首页 > 代码库 > 快快乐乐使用Jquery mobile--------第一章认识Jquerymobile
快快乐乐使用Jquery mobile--------第一章认识Jquerymobile
1、第一章：认识Jquery mobile
什么是Jquery mobile，简单点来说，是一个工具，就像.net框架，封装了一些API，能够让你快速的开发部署出一个网站。它利用了Jquery的技术，配合上html5 和css，让你能够简简单单，快快乐乐的做一个网站。当然，这网站是用在手机上的。
准备：
我们需要准备什么东西呢？ 当然，是开发工具、调试工具和手机（当然最好是苹果6plus啦，可惜俺买不起）……………………
首先说说开发工具，看某大师级别的教学视频，使用的是A字开头的一款开发工具，俺试着安装了一下，需要安装java的包包，装完以后，居然安装正式工具的时候跳不过去，最后度娘了一下，发现好像该软件不支持64位的系统，好吧，哥飘过，只能默默的打开DW CS6了，对，DreamWeaver Cs6 盗版的……对，从ASP时代到htm5时代，我发现最顺手的还是DW 。好吧，我会被轻视了。当然除了这个以外 ，如果是不喜欢写代码的，只是用来做demo的，请使用Codiqa吧，据说是一款可视化的jqm的工具，好吧，我是百度的，我自己倒是没有用过，我还是喜欢Ctrl+C+V代码。
调试工具方面，当然是浏览器了，html5的直接可以用浏览器来打开，当然，使用的是google的浏览器，那个叫啥…… 好吧，自己去google一下吧，google不了？ 那好吧，是叫chrome，恩，为啥选它，因为它可以模拟手机环境，是的，只要把它缩小到手机尺寸就可以了。当然有的人说火狐火狐，我支持，好吧，你就装一个座位备用吧。
再说说jqm包吧，来，我们直接看看代码
<script type="text/javascript" charset="utf-8" src="http://www.mamicode.com/jquery.js"></script>
首先引入的是jquery 这个是最关键的一个包包啦，当然，你可以用min版 或者是压缩版，当然个人喜爱。
<link rel="stylesheet" href="http://www.mamicode.com/jquery-mobile.css" />
document.write("<script type=‘text/javascript‘ charset=‘utf-8‘ src=http://www.mamicode.com/‘jquery-mobile.js?" + Math.random() + "‘></" + "script>");
第二步要准备的当然是mobile的css 和 js 包了，有人问什么是css，对不起，解释不了，还是度娘吧。
最后我们要看一下，我们的html5里面的<head></head> 里面还需要什么东东。
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
对了，就是这两行，第一行，应该是html5的关键，可以适应浏览器，第二行就不解释了，标准配置，大家把它抄上就好了。恩，那我们完成了第一课的学习。好吧，大家觉得还是不够，那我们贴贴代码，看看第一节课学习了 html5里面的 head的配置吧。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>第一个程序</title> 5 <meta name="viewport" content="width=default-width; user-scalable=no" /> 6 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 7 8 <script type="text/javascript" charset="utf-8" src="jquery.js"></script> 9 <link rel="stylesheet" href="jquery-mobile.css" />10 <script type="text/javascript" charset="utf-8">11 document.write("<script type=‘text/javascript‘ charset=‘utf-8‘ src=http://www.mamicode.com/‘jquery-mobile.js?" + Math.random() + "‘></" + "script>");12 </script>13 14 </head>15 16 <body></body>
快快乐乐使用Jquery mobile--------第一章认识Jquerymobile