认识JavaScript
在HRML中使用JavaScript的语法很简单,只要用<script>标签嵌入JavaScript的程序代码就可以了,基本结构如下:
<script type="text/javascript">
<!--
:
:
-->
</script>
JavaScript程序代码的位置可以放在HTML的<head></head>标记中,也可以放在<body></body>标记中
下面看一个范例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
<!--
alert("欢迎光临");
//-->
</script>
</head>
<body>
<h3>JavaScript好简单</h3>
</body>
</html>
执行结果如下,当用户进入网页时,就会弹出“欢迎光临”对话框:
若将JavaScript程序代码放在<body></body>标记中,会发现先加载<h3></h3>的内容再加载对话框。
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 (返回值) //有返回值时才需要
}
/*函数编写完成之后,我们就可以调用函数并根据情况来输入自变量,其方法如下*/
<input type="button" value="调用函数" onclick="函数名称();">
上面时以事件(Event)来调用函数,当事件发生时,函数就会被调用并运行了,onclick是“单击”事件,所以上面代码的意思是当用户单击按钮时就调用函数,下面请看一个范例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
<!--
function sum(a,b) {
c = a+b;
alert("a="+a+","+"b="+b+","+"a+b="+c);//alert对象的功能时弹出信息框来显示括号内的内容
}
-->
</script>
</head>
<body>
请点击下面链接:<p>
<h1>
<a href="#" onclick="sum(3,5)">a+b</a>
</h1>
</body>
</html>
执行结果如图:
事件处理过程 | 含义 |
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事件中触发即可,语法如下:
<script type="text/javascript">
window.onload = function()
{
//当点击按钮时就会调用sum函数
btn.addEventListener("click",num)
}
function sum(){
//sum函数执行的语句
}
</script>
<button id="btn">计算</button> <!--按钮就不需要加onclick事件-->
认识JQuery
jQuery是一套开放原始代码的JavaScript函数库(Library),可以说是目前最受欢迎的JS函数库,最让人津津乐道的就是它简化了DOM文件的操作,让我们轻松选择对象,并以简洁的程序完成想做的事情。除此之外,还可以通过jQuery指定CSS属性值,达到想要的特效与动画效果,另外,jQuery还强化异步传输(AJAX)以及事件(Event)功能,轻松访问远程数据。网络上有很多开放原始代码的jQuery插件,学会jQuery之后,用户能够方便地应用到自己的网站上来,接下来就学习如何使用jQeury。
下载JQuery
百度搜素JQuery,第一个进入官网点击下载
接着将JS文件加入到HTML的<head>标记之间,代码如下:
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
//src="你存放jquert的文件路径"
jQuery基本架构
jQeury(document).ready(function(){
//程序代码
});
//上述jQuery程序代码由“jQuery”开始,也可以用“$”代替,如下所示。
$(document).ready(function(){
//程序代码
});
jQuery基本语法
// $(选择器).操作()
$("p").hide();
jQuery选择器
jQeury选择器用来选择HTML组件,我们可以通过HTML标记名称、id属性以及class属性来取得组件
/*标记名称选择器*/
/*标记名称选择器顾名思义是直接使用HTML标记,例如想要选择所有的<p>组件,可以写成:*/
$("p")
/*id选择器*/
/*id选择器通过组件的id属性来获取组件,只要在id属性前加上“#”号即可,例如想要选择id属性为test的组件,可以写成:*/
$("#test")
/*class选择器*/
/*class选择器通过组件的class属性来取得组件,只要在class属性前加上“.”号即可,例如想要选择class属性为test的组件,可以写成:*/
$(".test")
/*我们还可以组合使用上述3种选择器,例如想要找出所有<p>标记class属性为test的组件,可以写成:*/
$("p.test")
表示法 | 说明 |
$("*") | 选择所有组件 |
$(this) | 选择目前作用种的组件 |
$("p.first") | 选择第一个<p>组件 |
$("[href]") | 选择含有href属性的组件 |
$("tr.even") | 选择偶数<tr>组件 |
$("tr.odd") | 选择奇数<tr>组件 |
$("div.p") | 选择<div>组件中包含<p>的组件 |
$("div").find("p") | 搜索<div>组件中的<p>组件 |
$("div").next("p") | 搜索<div>组件之后的第一个<p>组件 |
$('li').eq(2) | 搜索第3个<i>组件的eq()种是输入组件的位置,只能输入整数,最小为0 |
设置CSS样式属性
学会选择器的用法之后,除了可以操控HTML组件之外,还可以使用css()方法来改变CSS样式。例如,指定<div>组件的背景色为红色,代码如下:
$("div").css("background-color","red");
下面给大家看一个范例,来简述jQuery用法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('li').eq(2).css("background-color","red");
})
</script>
</head>
<body>
<ul>
<li>跑步</li>
<li>游泳</li>
<li>篮球</li>
<li>足球</li>
<li>排球</li>
</ul>
</body>
</html>
执行结果如下,结合代码理解便可知一二:
跨平台移动设备网页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/
找到如下代码复制到<head></head>区块内:
接下来我们就可以在<body></body>标记区域内开始添加程序代码了。
jQuery Mobile网页是由header、content与footer3个区域组成的架构,利用<div>标记加上HTML5自定义属性(HTML5 Custom Data Attributes)data-*来定义移动设备网页组件样式,最基本的属性data-role可以用来定义移动设备的网页架构,语法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Mobile创建的第一个网页</title>
<!--引用jQuery Mobile函数库-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page"> <!---->
<div data-role="header">
标题(header)
</div>
<div data-role="content">
网页内容(content)
</div>
<div data-role="footer">
页脚(footer)
</div>
</div>
</body>
</html>
Opera Mobile使用方法如下:
这样我们就调试好了,接下来看一个上下页切换的实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Mobile创建的第一个网页</title>
<!--引用jQuery Mobile函数库-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">
#content{text-align: center;}
</style>
</head>
<body>
<div data-role="page"> <!---->
<div data-role="header">
标题(header)
</div>
<div data-role="content">
网页内容(content)
</div>
<div data-role="footer">
页脚(footer)
</div>
</div>
</body>
</html>
执行结果如下:
这样我们就可以顺利地在两个页面之间进行切换。
但如果实际执行这个范例,会发现页面上的画面与文字显得非常小,这是因为移动设备的分辨率比较小,然而大多数浏览器会默认会议普通的网页宽度显示,这样网页内的画面都会变得很小而不易查看。
为了解决这个问题,苹果公司(Apple)首先在Safari种使用了viewport这个meta标记,目的是为了告诉浏览器移动设备的宽度和宽度,页面画面与字体比例看起来就会比较何使。用户可以通过平移(Scroll)和缩放(Zoom)来浏览整个页面,目前大部分浏览器都支持这个协议。
只需在<head></head>标记之间加上下面这一行代码就会调整适应的宽度
Viewport meta如下:
<meta name="viewport" content="width=device-width",intial-scale=1">
- 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浏览器打开网页,在调整浏览器的大小,同样可以达到模拟器的效果。