Web学习笔记_04

最新推荐文章于 2018-07-16 09:55:17 发布
最新推荐文章于 2018-07-16 09:55:17 发布
阅读量229 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chen_Zhenui/article/details/73917394
版权
1.BOM编程

什么是BOM编程？（画图讲解，将浏览器的各个部分封装成了不同的对象）

BOM是（Broswer Object Model） 浏览器对象模型编程


1.window对象
open(): 在一个窗口中打开页面
参数一： 打开的页面
参数二：打开的方式。 _self: 本窗口  _blank: 新窗口（默认）
参数三： 设置窗口参数。比如窗口大小
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	function textOpen(){
		window.open("1.html","_blank","width=200px;heigth=200px");
	}

</script>
</head>

<body>
<input type="button" value="open测试" οnclick="textOpen()" />
</body>
</html>
输出：点击open测试按钮后，弹出长200px，宽200px的网页窗口。

setInterval(): 设置定时器（执行n次）
setTimeout(): 设置定时器(只执行1次)
定时器： 每隔n毫秒调用指定的任务（函数）
参数一：指定的任务（函数）
参数二：毫秒数
 
clearInterval(): 清除定时器
clearTimeout(): 清除定时器
清除任务
参数一：需要清除的任务ID
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	function testOpen(){
		window.open("1.html","_blank","width=200px;heigth=200px");
	}
	var intervalId;
	function testSetInterval(){
		intervalId=window.setInterval("testOpen()",1000);
	}
	var timeoutId;
	function testSetTimeout(){
		timeoutId=window.setTimeout("testOpen()",3000);	
	}
	function testClearInterval(){
		window.clearInterval(intervalId);
	}
	function testClearTimeout(){
		window.clearTimeout(timeoutId);
	}
</script>
</head>

<body>
<input type="button" value="setInterval测试" οnclick="testSetInterval()" />
<input type="button" value="setTimeout测试" οnclick="testSetTimeout()" />
<input type="button" value="clearInterval测试" οnclick="testClearInterval()" />
<input type="button" value="clearTimeout测试" οnclick="testClearTimeout()" />
</body>
</html>

输出：点击setInterval测试后，每隔一秒会有一个弹窗，当点击clearInterval测试时，弹窗弹出会停止；

点击setTimeout测试后，三秒后弹出弹窗，在弹窗弹窗之前点击clearTimeout测试，弹窗弹出会停止；


alert(): 提示框
仅仅有确定按钮
 
confirm(): 确认提示框
返回值就是用户操作
true: 点击了确定
false： 点击了取消 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	function testConfirm(){
		var flag = window.confirm("继续进行程序吗");
		if(flag){
			alert("程序正在进行");
		}else{
			
		}
	}
</script>
</head>

<body>
<input type="button" value="confirm测试" οnclick="testConfirm()" />
</body>
</html>
输出：

propmt(): 输入提示框
返回值就是用户操作
true: 点击了确定
false： 点击了取消
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	function testPropmt(){
		window.prompt("请输入你的密码");
	}
</script>
</head>

<body>
<input type="button" value="propmt测试" οnclick="testPropmt()" />
</body>
</html>
输出：

注意：
因为window对象使用非常频繁，所以当调用js中的window对象的方法时，可以省略对象名不写。



2.location对象
href属性： 代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符
reload方法： 刷新当前页面

需求：实现每隔一秒刷新一次页面 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	//获取当前url
	function getHref(){
		var url = window.location.href;
		alert(url);	
	}
	function setHref(){
		window.location.href="1.html";
	}
	function testReload(){
		window.location.reload();
	}
	window.setInterval("testReload()",1000);
</script>
</head>

<body>
<input type="button" value="getHref" οnclick="getHref()" />
<input type="button" value="setHref" οnclick="setHref()"  />
</body>
</html>



3.history对象
forward(): 前进到下一页
back(): 后退上一页
go(): 跳转到某页（正整数：前进  负整数：后退）  1   -2 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	function testBack(){
		window.history.back();
	}
</script>
</head>

<body>
<input type="button" value="back" οnclick="testBack()" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	function testForward(){
		window.history.forward();
	}
</script>
</head>

<body>
<a href="2-6.html">back</a>
<input type="button" value="forward" οnclick="testForward()" />
</body>
</html>

4.screen对象（学习四个属性）
availHeight和availWidth
是排除了任务栏之后的高度和宽度
width和height
是整个屏幕的像素值 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	document.write("屏幕高度："+window.screen.height);
	document.write("<br>");
	document.write("屏幕宽度："+window.screen.width);
	document.write("<br>");
	document.write("屏幕可用高度："+window.screen.availHeight);
	document.write("<br>");
	document.write("屏幕可用宽度："+window.screen.availWidth);
</script>
</head>

<body>
</body>
</html>
输出：

2 事件编程
javascript事件编程的三个要素：
（以单击事件为例讲解事件编程三要素）
1）事件源：html标签
2）事件 ：click dblclick mouseover。。。。
3）监听器： 函数


javascript事件分类：
点击相关的：
单击： onclick
双击： ondblclick 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	function testOnclick(){
		alert("单击事件被触发");	
	}
	function testOndblclick(){
		alert("双击事件被触发");	
	}
</script>
</head>

<body>
<input type="button" value="onclick" οnclick="testOnclick()" />
<input type="button" value="ondblclick" οndblclick="testOndblclick()" />
</body>
</html>

焦点相关的：（获得焦点输入框内提示内容消失，失去焦点验证用户名信息并且在输入框内提示）
聚焦：  onfocus
失去焦点： onblur 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	function testOnfocus(){
		var username = document.getElementById("username");
		username.value="";
	}
	function testBlur(){
		var username = document.getElementById("username").value;
		var usernameTip = document.getElementById("usernameTip");
		if("Knight"==username){
			usernameTip.innerHTML="用户名已被占用".fontcolor("red");
		}else{
			usernameTip.innerHTML="用户名可用".fontcolor("green");	
		}
	}
</script>
</head>

<body>
<input type="text" value="请输入用户名" id="username" οnfοcus="testOnfocus()" οnblur="testBlur()"/>
<span id="usernameTip"></span>
</body>
</html>



选项相关的：（select选项改变，做一个籍贯选项）
改变选项： onchange 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	function testChange(){
		var sheng = document.getElementById("sheng").value;
		var shi = document.getElementById("shi");
		if(sheng=="guangdong"){
			shi.innerHTML="<option>广州</option><option>珠海</option><option>中山</option>"
		}else if(sheng=="shanxi"){
			shi.innerHTML="<option>西安</option><option>渭南</option><option>榆林</option>"	
		}
	}
</script>
</head>

<body>
<select id="sheng" οnchange="testChange()">
<option>----请选择----</option>
<option value="guangdong">广东</option>
<option value="shanxi">陕西</option>
</select>
<select id="shi">
</select>
</body>
</html>


鼠标相关的：（画一个div区块进行演示）
鼠标经过： onmouseover
鼠标移除： onmouseout 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	function testOnmouseover(){
		alert("鼠标进入了");	
	}
	function testOnmouseout(){
		alert("鼠标离开了");
	}
</script>
</head>

<body>
<div style="width:300px;height:300px;border:1px solid #FF0" οnmοuseοver="testOnmouseover()" οnmοuseοut="testOnmouseout()"></div>
</body>
</html>



页面加载相关的：（一般用在body标签中，用于网页加载完毕后还需执行什么操作进行触发）
页面加载： onload

Chen_Zhenhui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web_学习笔记
weixin_43386350的博客
03-05 245
nester_liz笔记
web学习笔记(3)
m0_63637575的博客
01-23 739
PHP学习 变量 以 $ 符号开始; 只能包含字母数字字符以及下划线; 区分大小写; 没有声明变量的命令。 运算符 整除运算符intdiv() 数组 用array()创建数组; 数组的类型： 数值数组 - 带有数字 ID 键的数组 关联数组 - 带有指定的键的数组，每个键关联一个值 多维数组 - 包含一个或多个数组的数组 获取数组的长度用count()函数; 对数组进行升序排列-sort(),降序排列-rsort()。 超级全局变量 PHP $GL
使用setInterval和setTimeout实现js定时刷新功能
u013905744的专栏
07-16 6446
需求：进入页面后，先等待5秒，之后刷新按钮开始旋转，转5秒后，停止旋转，执行一次刷新操作。之后等待5秒，之后开始旋转，转5秒后，停止旋转，执行一次刷新操作。如此反复。动图如下：思路：关键需求是 转5秒 等待5秒 再转5秒，由于这里是通过css样式来实现旋转和停止。这样一个interval是无法完成旋转和停止两个动作的，所以需要在interval中加了一个timeout，这样实现了等待5秒的功能。而...
JS中设置定时刷新setInterval函数
福建开源社区创始人www.fjkysq.com
10-22 2451
以下举例报表图表的定时刷新 window.onload = function() { setData(); setInterval(function() { if(chart.series.length>0){ for(var i=-1;i<=chart.series.length;i++){ chart.series[0].remove(); }
SpringBoot经典学习笔记_springboot_SpringBoot经典学习笔记_
09-30
SpringBoot经典学习笔记是针对Java开发者的宝贵资源，它涵盖了SpringBoot的核心概念、特性以及实践应用。SpringBoot是由Pivotal团队开发的框架，旨在简化Spring应用的初始搭建以及开发过程，通过“约定优于配置”的...
C#编程学习笔记_C#编程学习笔记_
10-02
C#是一种由微软公司开发的面向对象的编程语言，它被设计用于构建各种类型的应用程序，包括桌面应用、Web应用以及分布式系统。在C#编程学习中，掌握以下几个核心知识点至关重要： 1. **基础语法**：C#的基础语法类似...
安全：Web安全学习笔记
02-26
这个月看了一本《Web安全设计之道》，书中的内容多是从微软官方文档翻译而来，这本书的含金量不高，不过也不能说没有收获，本文简单记录一下我学习Web安全方面的笔记。本文不涉及IIS、Windows和SqlServer的安全管理...
mySQL.zip_MYSQL_mysql 课件_学习笔记_笔记_资料
09-24
这份"mySQL.zip_MYSQL_mysql 课件_学习笔记_笔记_资料"的压缩包内容包括了MySQL的培训课件和学习笔记，非常适合初学者进行数据库知识的入门学习。 51CTO下载-Mysql培训课件.pdf可能涵盖了以下MySQL的核心知识点： ...
Web安全学习笔记PDF
01-31
Web 安全学习笔记 PDF 本资源摘要信息将对 Web 安全学习笔记 PDF 进行详细的知识点总结。该笔记涵盖了 Web 安全领域的多个方面，包括网络技术演化、网络攻防技术演化、网络安全观、法律与法规、计算机网络与协议、...
setInterval定时器（先触发一次再延时）
热门推荐
那些年写过的代码
01-10 4万+
setInterval第一次延迟问题
新型智慧城市项目技术方案（2283页）.pdf
08-16
新型智慧城市项目技术方案（2283页）
openssh windows安装程序
08-16
openssh windows安装程序
java-团员管理系统（源码+数据库+论文）.rar
08-16
共青团员做为我们先进积极分子的培养对象，是未来党人和民的重点培养对象。但随着知识和认识的不断提高，越来越多的青少年选择积极入团，由此而引发的团员管理也成为当下需要解决的问题。日益成熟的互联网技术大大推动了共青团信息化建设的发展，此次毕业设计就是要通过技术的手段来实现团员的信息化管理。 那么业务实现就是为了实现共青团团员的管理系统，那么技术上我们采用的手段还是以目前主流的Java技术为主，那么采用的框架是SSM框架，这样一来更加方便的进行一个团员信息的管理。数据库方面我们使用的是MYSQL数据库，可以有效的快速上手，容易我们开发。 关键词：SSM框架；信息技术；团员管理；
vb+access高校固定资产管理系统(论文+程序).zip
08-16
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
Linux基础篇系列一：安装VMWare
最新发布
08-16
Linux基础篇系列一：安装VMWare
Tableau-用铅笔柱形图对比数据
08-16
资源内包含Tableau的twbx模板文件，有需要的小伙伴可以自行下载使用，如需查看视频讲解可以访问西瓜视频：https://www.ixigua.com/home/2506516376848260/video/?preActiveKey=pseries&list_entrance=userdetail 或者哔哩哔哩：https://space.bilibili.com/630399480?spm_id_from=333.1007.0.0
Java Web学习笔记：解决常见异常和技术总结
Java Web 学习笔记 本资源摘要信息是基于 Java Web 学习笔记的知识点总结，涵盖了常见的异常解决方法和常用技术。 Java Web 学习笔记概述 Java Web 学习笔记是作者总结的学习笔记，旨在记录 Java Web 开发中遇到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值