JavaScript进阶
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript进阶相关的知识，希望对你有一定的参考价值。
有聚焦，肯定就有失焦。onblur事件与onfocus是相对事件，当光标离开当前获得聚
焦对象的时候，触发onblur事件，同时执行被调用的程序。
如下代码，网页中有用户和密码两个文本框。当前光标在用户文本框内时(即焦点在
文本框)，在光标离开该文本框后（即失焦时），触发onblur事件，并调用message()
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>失焦事件</title>
<script type="text/javascript">
function message(){
alert("请确定已输入用户名后，在离开！")}
</script>
</head>
<body>
<form>
用户：<input name="username" type="text" value="请输入用户名：" onblur="message()">
密码：<input name="password" type="text" value="请输入密码：">
</form>
</body>
</html>
选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用
的程序就会被执行。
如下代码，当选中用户文本框内的文字时，触发onselect事件，并调用函数message()
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onselect</title>
<script type="text/javascript">
function message(){
alert("您触发了选中事件");}
</script>
</head>
<body>
<form>
用户：<input name="username" type="text" value="请输入用户名！" onselect="message()">
<!-- 当选中用户文本框内的文字时，触发onselect事件。 -->
</form>
</body>
</html>
通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。如下代码，
当用户将文本框内的文字改变后，弹出对话框"您改变了文本内容！"
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onChange</title>
<script type="text/javascript">
function message(){alert("您改变了文本内容！")}
</script>
</head>
<body>
<form>
用户：<input name="username" type="text" value="请输入用户名" onChange="message()">
<!-- 当改变用户文本框内的文字后，触发onChange事件。 -->
</form>
</body>
</html>
事件会在页面加载完成后，立即发生，同时执行被调用的程序。注意：1.加载页面
时，触发onload事件，事件写在<body>标签内。2.此节的加载页面，可理解为打开
一个新页面时。如下代码，当加载一个新页面时，弹出对话框"加载中，请稍等..."
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onLoad</title>
<script type="text/javascript">
function message(){
alert("加载中，请稍等...");}
</script>
</head>
<body onload="message()">
欢迎学习JavaScript
</body>
</html>
当用户退出页面时（页面关闭，页面刷新等），触发onunload事件，同时执行调用
的程序。
注意：不同浏览器对onunload事件支持不同。
如下代码，当退出页面时，弹出对话框"您确定离开该网页吗？"
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onUnload</title>
<script type="text/javascript">
window.onunload=onunload_message;
function onunload_message(){
alert("您确定离开该网页吗?");
}
</script>
</head>
<body>
欢迎学习JavaScript
</body>
</html>
留个题目：
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；
答案如下：
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
//获取第一个输入框的值
var a=parseInt(document.getElementById("txt1").value);
//获取第二个输入框的值
var b=parseInt(document.getElementById("txt2").value);
//获取选择框的值
var c=document.getElementById("select").value;
//获取通过下拉框来选择的值来改变加减乘除的运算法则
var d;
switch(c){
焦对象的时候，触发onblur事件，同时执行被调用的程序。
如下代码，网页中有用户和密码两个文本框。当前光标在用户文本框内时(即焦点在
文本框)，在光标离开该文本框后（即失焦时），触发onblur事件，并调用message()
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>失焦事件</title>
<script type="text/javascript">
function message(){
alert("请确定已输入用户名后，在离开！")}
</script>
</head>
<body>
<form>
用户：<input name="username" type="text" value="请输入用户名：" onblur="message()">
密码：<input name="password" type="text" value="请输入密码：">
</form>
</body>
</html>
选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用
的程序就会被执行。
如下代码，当选中用户文本框内的文字时，触发onselect事件，并调用函数message()
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onselect</title>
<script type="text/javascript">
function message(){
alert("您触发了选中事件");}
</script>
</head>
<body>
<form>
用户：<input name="username" type="text" value="请输入用户名！" onselect="message()">
<!-- 当选中用户文本框内的文字时，触发onselect事件。 -->
</form>
</body>
</html>
通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。如下代码，
当用户将文本框内的文字改变后，弹出对话框"您改变了文本内容！"
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onChange</title>
<script type="text/javascript">
function message(){alert("您改变了文本内容！")}
</script>
</head>
<body>
<form>
用户：<input name="username" type="text" value="请输入用户名" onChange="message()">
<!-- 当改变用户文本框内的文字后，触发onChange事件。 -->
</form>
</body>
</html>
事件会在页面加载完成后，立即发生，同时执行被调用的程序。注意：1.加载页面
时，触发onload事件，事件写在<body>标签内。2.此节的加载页面，可理解为打开
一个新页面时。如下代码，当加载一个新页面时，弹出对话框"加载中，请稍等..."
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onLoad</title>
<script type="text/javascript">
function message(){
alert("加载中，请稍等...");}
</script>
</head>
<body onload="message()">
欢迎学习JavaScript
</body>
</html>
当用户退出页面时（页面关闭，页面刷新等），触发onunload事件，同时执行调用
的程序。
注意：不同浏览器对onunload事件支持不同。
如下代码，当退出页面时，弹出对话框"您确定离开该网页吗？"
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onUnload</title>
<script type="text/javascript">
window.onunload=onunload_message;
function onunload_message(){
alert("您确定离开该网页吗?");
}
</script>
</head>
<body>
欢迎学习JavaScript
</body>
</html>
留个题目：
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；
答案如下：
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
//获取第一个输入框的值
var a=parseInt(document.getElementById("txt1").value);
//获取第二个输入框的值
var b=parseInt(document.getElementById("txt2").value);
//获取选择框的值
var c=document.getElementById("select").value;
//获取通过下拉框来选择的值来改变加减乘除的运算法则
var d;
switch(c){
case "+":
d=a+b;
break;
case "-":
d=a-b;
break;
case "*":
d=a*b;
break;
case "/":
d=a/b;
break;
}
//设置结果输入框的值
document.getElementById("fruit").value=d;
}
</script>
</head>
<body>
<input type=‘text‘ id=‘txt1‘ />
<select id=‘select‘>
<option value=‘+‘>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type=‘text‘ id=‘txt2‘ />
<input type=‘button‘ value=‘ = ‘ onclick="count()"/> <!--通过 = 按钮来调用创建的函数，得到结果-->
<input type=‘text‘ id=‘fruit‘ />
</body>
</html>
什么是对象？JavaScript中的所有事物都是对象，如：字符串、数组、数值、函数
等，每个对象带有属性和方法。
对象的属性：反映该对象某些特定的性质的，如：字符串的长度图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的
“获取”(getYear)等；
JavaScript提供多个内建对象，比如String,Date,Array等等，使用对象前先定义，
如下使用数组对象：
var objectName=new Array();//使用new关键字定义对象
或者
var objectName=[];
访问对象属性的语法：
objectName.propertyName
如使用Array对象的length属性来获得数组的长度：
var myarray=new Array(6);//定义数组对象
var myl=myarray.length;//访问数组长度length属性
以上代码执行后，myl的值为6
访问对象的方法：
objectName.methodName()
如使用string对象的toUpperCase()方法来将文本转换为大写：
var mystr="Hello world!"//创建一个字符串
var request=mystr.toUpperCase();//使用字符串对象方法
以上代码执行后，request的值是：HELLO WORLD!
日期对象可以存储任意一个日期，并且可以精确到毫秒数(1/1000秒)
定义一个时间对象：
var Udate=new Date();
注意：使用关键字new,Date()的首字母必须大写
使Udate称为日起对象，并且已有初始值：当前时间（当前电脑系统时间）
如果要自定义初始值，可以用以下方法：
var d=new Date(2012,10,1);//2012年10月1日
var d=new Date(‘Oct 1,2012‘);//2012年10月1日
我们最好使用下面介绍的方法来严格定义时间。
访问方法语法："<日期对象>,<方法>"
Date对象中处理时间和日期的常用方法：
方法名称 功能描述
get/setDate() 返回/设置日期
get/setFullYear() 返回/设置年份，用四位数表示
get/setYear() 返回/设置年份
get/setMonth() 返回/设置月份。0:1月...11:12月。所以加一
get/setHours() 返回/设置小时，24小时制
get/setMinutes() 返回/设置分钟数
get/setSeconds() 返回/设置秒钟数
get/setTime() 返回/设置事件（毫秒为单位）
}
</script>
</head>
<body>
<input type=‘text‘ id=‘txt1‘ />
<select id=‘select‘>
<option value=‘+‘>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type=‘text‘ id=‘txt2‘ />
<input type=‘button‘ value=‘ = ‘ onclick="count()"/> <!--通过 = 按钮来调用创建的函数，得到结果-->
<input type=‘text‘ id=‘fruit‘ />
</body>
</html>
什么是对象？JavaScript中的所有事物都是对象，如：字符串、数组、数值、函数
等，每个对象带有属性和方法。
对象的属性：反映该对象某些特定的性质的，如：字符串的长度图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的
“获取”(getYear)等；
JavaScript提供多个内建对象，比如String,Date,Array等等，使用对象前先定义，
如下使用数组对象：
var objectName=new Array();//使用new关键字定义对象
或者
var objectName=[];
访问对象属性的语法：
objectName.propertyName
如使用Array对象的length属性来获得数组的长度：
var myarray=new Array(6);//定义数组对象
var myl=myarray.length;//访问数组长度length属性
以上代码执行后，myl的值为6
访问对象的方法：
objectName.methodName()
如使用string对象的toUpperCase()方法来将文本转换为大写：
var mystr="Hello world!"//创建一个字符串
var request=mystr.toUpperCase();//使用字符串对象方法
以上代码执行后，request的值是：HELLO WORLD!
日期对象可以存储任意一个日期，并且可以精确到毫秒数(1/1000秒)
定义一个时间对象：
var Udate=new Date();
注意：使用关键字new,Date()的首字母必须大写
使Udate称为日起对象，并且已有初始值：当前时间（当前电脑系统时间）
如果要自定义初始值，可以用以下方法：
var d=new Date(2012,10,1);//2012年10月1日
var d=new Date(‘Oct 1,2012‘);//2012年10月1日
我们最好使用下面介绍的方法来严格定义时间。
访问方法语法："<日期对象>,<方法>"
Date对象中处理时间和日期的常用方法：
方法名称 功能描述
get/setDate() 返回/设置日期
get/setFullYear() 返回/设置年份，用四位数表示
get/setYear() 返回/设置年份
get/setMonth() 返回/设置月份。0:1月...11:12月。所以加一
get/setHours() 返回/设置小时，24小时制
get/setMinutes() 返回/设置分钟数
get/setSeconds() 返回/设置秒钟数
get/setTime() 返回/设置事件（毫秒为单位）
下面来介绍get/setFullYear()返回/设置年份，用四位数表示
var mydate=new Date();//当前事件2014年3月6日
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81);//设置年份
document.write(mydate+"<br>");//输出年份被设定为0081年
注意：不同浏览器,mydate.setFullYear(81)结果不同，年份被设定为0081或81两种
情况。
结果：
Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:51:47 GMT+0800
注意：
1.结果格式依次为：星期、月、日、年、时、分、秒、时区（火狐浏览器）
2.不同浏览器，时间格式有差异。
返回星期方法：
getDay()返回星期，返回的是0-6的数字，0表示星期天，如果要返回相对应"星期"
通过数组完成，代码如下：
<script type="text/javascript">
var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星
期六"];//定义数组对象，给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中
document.write(mydate.getDay());//输出getDay()获取值
document.write("今天是："+weekday[mynum]);//输出星期几
</script>
注意：以上代码是2014年3月7日，星期五运行。
结果：
5
今天是星期五
get/setTime()返回/设置事件，单位毫秒数，计算从1970年1月1日零时到日期对象
所指的日期的毫秒数。
如果将目前对象所指的日期推迟1小时，代码如下：
<script type="text/javascript">
var mydate=new Date();
document.write("当前事件："+mydate+"<br>");
mydate.setTime(mydate.getTime()+60*60*1000);
document.write("推迟一个小时时间:"+mydate);
</script>
结果：
当前时间：Thu Mar 6 11:46:27 UTC+0800 2014
推迟一个小时时间：Thu Mar 6 12:46:27 UTC+0800 2014
注意：1.一小时60分 一分60秒 一秒1000毫秒
2.时间推迟一小时就是:"x.setTime(x.getTime()+60*60*1000)；"
var mydate=new Date();//当前事件2014年3月6日
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81);//设置年份
document.write(mydate+"<br>");//输出年份被设定为0081年
注意：不同浏览器,mydate.setFullYear(81)结果不同，年份被设定为0081或81两种
情况。
结果：
Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:51:47 GMT+0800
注意：
1.结果格式依次为：星期、月、日、年、时、分、秒、时区（火狐浏览器）
2.不同浏览器，时间格式有差异。
返回星期方法：
getDay()返回星期，返回的是0-6的数字，0表示星期天，如果要返回相对应"星期"
通过数组完成，代码如下：
<script type="text/javascript">
var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星
期六"];//定义数组对象，给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中
document.write(mydate.getDay());//输出getDay()获取值
document.write("今天是："+weekday[mynum]);//输出星期几
</script>
注意：以上代码是2014年3月7日，星期五运行。
结果：
5
今天是星期五
get/setTime()返回/设置事件，单位毫秒数，计算从1970年1月1日零时到日期对象
所指的日期的毫秒数。
如果将目前对象所指的日期推迟1小时，代码如下：
<script type="text/javascript">
var mydate=new Date();
document.write("当前事件："+mydate+"<br>");
mydate.setTime(mydate.getTime()+60*60*1000);
document.write("推迟一个小时时间:"+mydate);
</script>
结果：
当前时间：Thu Mar 6 11:46:27 UTC+0800 2014
推迟一个小时时间：Thu Mar 6 12:46:27 UTC+0800 2014
注意：1.一小时60分 一分60秒 一秒1000毫秒
2.时间推迟一小时就是:"x.setTime(x.getTime()+60*60*1000)；"
以上是关于JavaScript进阶的主要内容，如果未能解决你的问题，请参考以下文章