快快乐乐使用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="jquery.js"></script>

首先引入的是jquery 这个是最关键的一个包包啦,当然,你可以用min版 或者是压缩版,当然个人喜爱。

   <link rel="stylesheet" href="jquery-mobile.css" />

document.write("<script type=‘text/javascript‘ charset=‘utf-8‘ src=‘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=‘jquery-mobile.js?" + Math.random() + "‘></" + "script>");
12 </script>
13
14 </head>
15
16 <body></body>
时间: 2024-08-06 23:07:19

快快乐乐使用Jquery mobile--------第一章认识Jquerymobile的相关文章

jQuery Mobile学习笔记

1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者

jQuery Mobile笔记

1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者

JQuery Mobile 实战一

今天我们来使用JQuery Mobile来开发一个web mobile app. 要实现的如下所示效果: 开始: 第一步:添加JS包等引用,直接去官网下载最新的JQuery Mobile 包,http://jquerymobile.com/:或者直接从CDN引用JQuery Mobile. 解压压缩包:拷贝 jquery.min.js.jquery.mobile-1.4.5.css.jquery.mobile-1.4.5.js 文件到项目中. 第二步:新建一个 html 页面.添加上面三个文件的

jquery mobile小经验

现在网站上关于jquery mobile的demo和帖子可真少啊,我刚开始接触,遇到了一些问题,都找不到人请教. 这是我的个人经验总结,或多或少会对刚入门的童鞋有点帮助吧. 如果想一开始进入页面的时候就弹出来一个警告框,目前我知道的有三种办法可以解决: 1.利用jqm因为jqm的加载远早于document.ready事件发生时,当Jquery Mobile开始执行时,他就会在document对象上触发mobileinit 事件,所以你可以绑定别的行为来覆盖默认配置 Java代码   $(docu

锋利的jQuery第一章

以前总是感觉js,html,css,jquery这些东西太繁杂,看着都头晕,想着做后台,不用管这些东西,可是工作之中发现,很多前台后台结合 的地方,比如通过ajax发送到后台,如果不懂得jQuery,感觉很被动,于是,我也不管那么多了,从现在开始学习jQuery了. 我喜欢看书本学习,以后博客将记录我学习的笔记: 1,window.reload()和$(document).ready()的区别: 2,有关菜单的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X

jquery基础教程 - 第一章 JQUERY入门

Jquery基础教程 - 第一章 JQUERY入门 内容提要 1.jquery能做什么 2.jquery为什么如此出色 3.第一个jquery驱动的页面 4.纯javascript与jquery 5.开发工具 6.小结 1.jquery能做什么 取得文档中的元素 -- jQuery为准确的获得需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制. 找到所有应用了.content class样式的div中所有的P标签             $('div.content').find('p'

jQuery Mobile 基础(第三章)

1.表单: 表单控件: 文本输入框 搜索输入框 单选按钮 复选框 选择菜单 滑动条 翻转拨动开关 fileld容器:如需让标签和表单元素看起来更适应宽屏,请用带有 data-role="fieldcontain" 属性的 <div> 或 <fieldset> 元素包围 label/form 元素: <form method="post" action="demoform.html"> <div data-

jQuery Mobile 基础(第四章)

1.主题 jQuery Mobile 提供了5种不同的主题样式, 从 "a" 到 "e" - 每一种主题的按钮,工具条,内容块等等颜色都不一致,每个主题的视觉效果也不一样. 通过设置元素的data-theme属性可以自定义应用的外观: <div data-role="page" data-theme="a|b|c|d|e"> 主题头部,内容和底部 <div data-role="header&quo

锋利的jQuery 第一章

知识点梳理 1,常用的JavaScript库 Prototype 老牌的JS库了.YUI雅虎推的jS库.ExtJS,,,,.jQuery于2006年1月创立的开源项目.jQuery团队包括核心库.UI.插件.jQuery Mobile等 2,jQuery的优势 (1)   轻量级 (2)   强大的选择器 (3)   出色的DOM操作的封装 (4)   可靠的事件处理机制 (5)   完善的Ajax (6)   不污染顶级变量 (7)   出色的浏览器兼容性 (8)   链式操作方式 (9)