Web前端开发学习之路——认识JQuery与JQuery Mobile
认识JavaScript
在HRML中使用JavaScript的语法很简单，只要用
JavaScript程序代码的位置可以放在HTML的
标记中，也可以放在标记中下面看一个范例：
Title
JavaScript好简单
执行结果如下，当用户进入网页时，就会弹出“欢迎光临”对话框：
若将JavaScript程序代码放在
标记中，会发现先加载的内容再加载对话框。JavaScript是基于对象（Object-Based）的语言，其对于对象的处理属于阶梯式的架构，这个阶梯以window为顶层，window内还包含许多其他的对象，如框架（frame）、文档（document）等，文档中还可能有图片（image）、表单（form）、按钮（button）等对象。只要通过id、name属性或forms[]、images[]等对象集合就能获取对象，并使用各自的属性。
例如，我们想要利用JavaScript在网页文件中显示“欢迎光临”字样，网页文件本身对象是document，它是window的下层，所以就可以表示如下：
window.document.write("欢迎光临")
/*因为JavaScript程序代码与对象在同一页，所以window可以省略不屑，因此我们经常看到的表示法如下：*/
document.write("欢迎光临")属性(Property)的表示方法如下：
document.bgColor="yellow"函数
简单的说，函数就是程序设计师编写的一段程序代码，可以被不同的对象、事件重复调用。使用函数最重要是必须知道定义函数的方法与输入自变量，以及返回何种结果。
函数的操作有两个步骤：定义函数；调用函数；
/*定义函数的方法如下：*/
function 函数名（输入自变量）
{
JavaScript语句
...
...
return (返回值) //有返回值时才需要
}
/*函数编写完成之后，我们就可以调用函数并根据情况来输入自变量，其方法如下*/
上面时以事件(Event)来调用函数，当事件发生时，函数就会被调用并运行了，onclick是“单击”事件，所以上面代码的意思是当用户单击按钮时就调用函数，下面请看一个范例：
Title
请点击下面链接：
a+b
执行结果如图：
| 事件处理过程 | 含义 |
| onClick | 鼠标单击对象时 |
| onMouseOver | 鼠标经过对象时 |
| onMouseOut | 鼠标离开对象时 |
| onLoad | 网页载入时 |
| onUnload | 离开网页时 |
| onError | 加载发送错误时 |
| onAbort | 加载停止图像时 |
| onFocus | 窗口或表单组件取得焦点时 |
| onBlur | 窗口或表单组件失去焦点时 |
| onSelect | 选择表单组件内容时 |
| onChange | 改变字段的数据时 |
| onReset | 重置表单时 |
| onSubmir | 提交表单时 |
当网页程序代码较多的时候，想要处理表单组件，不仅要为每个组件加入事件控制，又要回到Script编写事件函数，文件的上下滚动就很麻烦，这时就可以使用addEventListener()函数注册事件的处理函数，例如要在点击名为btn的按钮时调用sum()函数，可以这样表示：
btn.addEventListener("click",sum);如果要在多个按钮上调用函数，只需多加几行addEventListener()函数即可，不需要再返回按钮上添加触发事件，更加省事。
addEventListener可以在网页加载时就执行，只要将函数制定在window的Onload事件中触发即可，语法如下：
认识JQuery
jQuery是一套开放原始代码的JavaScript函数库(Library)，可以说是目前最受欢迎的JS函数库，最让人津津乐道的就是它简化了DOM文件的操作，让我们轻松选择对象，并以简洁的程序完成想做的事情。除此之外，还可以通过jQuery指定CSS属性值，达到想要的特效与动画效果，另外，jQuery还强化异步传输（AJAX）以及事件（Event）功能，轻松访问远程数据。网络上有很多开放原始代码的jQuery插件，学会jQuery之后，用户能够方便地应用到自己的网站上来，接下来就学习如何使用jQeury。
下载JQuery
百度搜素JQuery，第一个进入官网点击下载
接着将JS文件加入到HTML的
标记之间，代码如下：
//src="你存放jquert的文件路径"jQuery基本架构
jQeury(document).ready(function(){
//程序代码
});
//上述jQuery程序代码由“jQuery”开始，也可以用“$”代替，如下所示。
$(document).ready(function(){
//程序代码
});jQuery基本语法
// $(选择器).操作()
$("p").hide();jQuery选择器
jQeury选择器用来选择HTML组件，我们可以通过HTML标记名称、id属性以及class属性来取得组件
/*标记名称选择器*/
/*标记名称选择器顾名思义是直接使用HTML标记，例如想要选择所有的组件，可以写成：*/
$("p")
/*id选择器*/
/*id选择器通过组件的id属性来获取组件，只要在id属性前加上“#”号即可，例如想要选择id属性为test的组件，可以写成：*/
$("#test")
/*class选择器*/
/*class选择器通过组件的class属性来取得组件，只要在class属性前加上“.”号即可，例如想要选择class属性为test的组件，可以写成：*/
$(".test")
/*我们还可以组合使用上述3种选择器，例如想要找出所有
标记class属性为test的组件，可以写成：*/
$("p.test")
| 表示法 | 说明 |
| $("*") | 选择所有组件 |
| $(this) | 选择目前作用种的组件 |
| $("p.first") | 选择第一个 组件 |
| $("[href]") | 选择含有href属性的组件 |
| $("tr.even") | 选择偶数 |
| $("tr.odd") | 选择奇数 |
| $("div.p") | 选择 组件中包含 的组件 |
| $("div").find("p") | 搜索 组件中的 组件 |
| $("div").next("p") | 搜索 组件之后的第一个 组件 |
| $('li').eq(2) | 搜索第3个组件的eq()种是输入组件的位置，只能输入整数，最小为0 |
设置CSS样式属性
学会选择器的用法之后，除了可以操控HTML组件之外，还可以使用css()方法来改变CSS样式。例如，指定
$("div").css("background-color","red");下面给大家看一个范例，来简述jQuery用法：
JQuery
- 跑步
- 游泳
- 篮球
- 足球
- 排球
执行结果如下，结合代码理解便可知一二：
跨平台移动设备网页jQuery Mobile
随着移动设备的普及，仅在电脑上浏览网页已经不够，越来越多的人想学习移动设备的网页设计开发，但是在浏览器才只有几种的情况下，就寂静遇到跨浏览器支持的问题。移动设备品牌这么多，仅使用Apple iOS 和Android系统就有多种不同规格尺寸的手持设备，更何况还有其他平板设备，不可能为每种尺寸都做一个界面，那样做太费事了。为了解决这个问题，jQuery退出了新的函数库jQuery Mobile，目的是希望统一当前移动设备的用户界面（UI）。接下来就来认识jQuery Mobile。
jQuery Mobile的优点
- 跨平台
- 容易学习
- 提高多种函数库
- 多样的布景主题和ThemeRoller工具
jQuery Mobile操作流程
jQuery Mobile的操作流程与庇阿涅HTML文件相似，大致有下面几个步骤：
- 新增HTML文件
- 声明HRML5 Document
- 载入jQuery Mobile CSS、jQuery与jQuery Mobile链接库
- 使用jQuery Mobile Mobile定义的HTML标准，编写网页架构及内容
第一个jQuery Mobile网页
要开发jQuery Mobile网页，必须要引用JavaScript函数库(.js)、CSS样式表(.css)和配套jQuery函数库文件。引用方式有两种，一种是到jQuery Mobile官网上下载文件进行引用，另一种是直接通过URL连接到jQuery Mobile的CDN-hosted引用，不需要下载文件。
本次使用URL链接CDN-hosted方式进行引用，网址如下：
http://jquerymobile.com/download/找到如下代码复制到
区块内：
接下来我们就可以在
标记区域内开始添加程序代码了。jQuery Mobile网页是由header、content与footer3个区域组成的架构，利用
jQuery Mobile创建的第一个网页
标题（header）
网页内容（content）
页脚（footer）
Opera Mobile使用方法如下：
这样我们就调试好了，接下来看一个上下页切换的实例：
jQuery Mobile创建的第一个网页
标题（header）
网页内容（content）
页脚（footer）
执行结果如下：
这样我们就可以顺利地在两个页面之间进行切换。
但如果实际执行这个范例，会发现页面上的画面与文字显得非常小，这是因为移动设备的分辨率比较小，然而大多数浏览器会默认会议普通的网页宽度显示，这样网页内的画面都会变得很小而不易查看。
为了解决这个问题，苹果公司（Apple）首先在Safari种使用了viewport这个meta标记，目的是为了告诉浏览器移动设备的宽度和宽度，页面画面与字体比例看起来就会比较何使。用户可以通过平移(Scroll)和缩放(Zoom)来浏览整个页面，目前大部分浏览器都支持这个协议。
只需在
标记之间加上下面这一行代码就会调整适应的宽度Viewport meta如下：
- width:控制宽度，可以指定一个宽度值，或输入device-widtj，表示宽度随着设备宽度自动调整
- height:控制高度，或输入device-height
- initia-scale:初始缩放比例，最小为0.25，最大为5
- minimum-scale:允许用户缩放的最小比例，最小为0.25，最大为5
- maximum-scale:允许用户缩放的最大比例，最小为0.25，最大为5
- user-scalable:是否允许用户手动缩放，可以输入0或1，也可以输入yes或no
执行结果如下：
如果没有安装模拟器，利用Google Chrome浏览器打开网页，在调整浏览器的大小，同样可以达到模拟器的效果。