JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇）
JavaScript
JavaScript事件
JS中的事件分为4个组成部分
事件源、事件、监听器、处理方式
- 事件源：在页面中，用户可以操作的元素，称为事件源（按钮、输入框、浏览器窗口等）
- 事件：用户怎么操作事件源
鼠标(点击、双击、悬浮、离开)
键盘(按下、弹起) - 监听器：为事件源安装监听器(鼠标监听器、键盘监听器)，
只要有操作，就会被监听器捕捉到，就会自动地调用处理方式 - 处理方式：函数
常用事件
代码示例：
- 按钮，绑定事件监听器，鼠标点击
标签，添加属性 onXXX
事件发生，被监听器捕获，调用函数，处理事件
onclick="函数名()" - 文本框，失去焦点事件
onblur="函数名"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function fn(){
alert("按钮点击");
}
function fnblur(){
alert("失去焦点");
}
</script>
<!--
按钮，绑定事件监听器，鼠标点击
-->
<input type="button" value="按钮" onclick="fn()"/>
<!--
绑定事件，失去焦点事件
-->
<input type="text" onblur="fnblur()" />
</body>
</html>
BOM对象
BOM对象，是JS的重要组成部分
浏览器对象，JS将浏览器窗口，变成对象，对象调用方法或调用属性
BOM对象不是一个对象，而是一组对象，一组对象，在浏览器窗口打开后，就创建完毕了
js中的BOM对象：
window对象的弹框
window对象中的弹框方法：
在调用方法时，window对象名可以省略不写，window.xx()–>xx()，如alert()
- alert()，弹出一个确认对话框，只要确定按钮
- confirm()弹出一个确认对话框，有确定和取消两个按钮
用户点击哪个按钮，使用方法的返回值，返回了true，点击的就是确定 - prompt()带有输入的对话框，点击确定，会返回输入的内容；点击取消，返回null
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
if(confirm("确定要删除吗")){
alert("删除成功");
}
prompt("请输入你的价格")
</script>
</body>
</html>
window对象的定时器
定时器对象，程序在指定的时间间隔中运行
setTimeout()定时执行一次setInterval()反复执行
方法参数：
- 定时执行的代码
- 毫秒值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* 定时器对象，程序在指定的时间间隔中运行
* setTimeout()定时执行一次
* setInterval()反复执行
* 方法参数：
* 1.定时执行的代码
* 2.毫秒值
*
*/
setTimeout(function(){
//匿名函数，定时器自动调用匿名函数
alert("定时器");
},2000);
//若不点确定，则只会出一个
setInterval(function(){
alert("定时器");
},2000);
</script>
</body>
</html>
取消定时器
window对象有个方法：
clearInterval()，取消定时器（两种定时器都可以取消）
注意：定时器函数，会有返回一个数字，在页面中具有唯一性，传递该数字就可以停止确定的定时器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var id = setInterval(function(){
alert("定时器1");
},2000);
function fnClear(){
//window对象有个方法：clearInterval，取消定时器（两种定时器都可以取消）
//定时器函数，会有返回一个数字，在页面中具有唯一性
clearInterval(id);
}
</script>
<input type="button" value="取消定时器" onclick="fnClear()" />
</body>
</html>
location对象
作用：操作浏览器的地址栏
对象属性：href，属性值就是浏览器的地址栏
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* location对象
* 作用：操作浏览器的地址栏
* 对象属性：href，属性值就是浏览器的地址栏
*
*/
function fn(){
location.href="http://www.baidu.com";
}
</script>
<a href="#" onclick="fn()">点我去百度</a>
</body>
</html>
history对象
历史记录对象 history
方法：
forward()前进back()后退go()参数，传递正数，前进；传递负数，后退
定时广告
定时弹出广告：
需求：
- 页面打开后，3秒，显示广告图
- 广告图显示3秒后自动关闭
操作步骤：使用定时器，3s后运行，显示广告图，再3s后运行，关闭广告图
JS操作页面步骤：
- 找到需要操作的标签，利用标签的id属性找，
document.getElementById("id属性值")把标签封装成对象 - 标签对象，调用方法或属性来操作
代码示例：省略了商城主体部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.menu a:link{color: #FFFFFF;}
.ad{
width:1200px;
margin:0 auto;
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">
/*
* 定时弹出广告：
* 页面打开后，3秒，显示广告图
* 广告图显示3秒后自动关闭
*
* 定时器：3s后运行，显示广告图
* JS操作页面步骤：
* 1.找到需要操作的标签，利用标签的id属性找，
* document.getElementById("id属性值")
* 把标签封装成对象
* 2.标签对象，调用方法或属性来操作
*
*
*
*/
setTimeout(function(){
//获取需要修改的div标签
var guanggao = document.getElementById("guanggao");
//修改属性
guanggao.style.display="block";
},3000);
setTimeout(function(){
//获取需要修改的div标签
var guanggao = document.getElementById("guanggao");
//修改属性
guanggao.style.display="none";
},6000);
</script>
<div class="ad" id="guanggao">
<img src="img/mm.jpg" width="1200" height="200" >
</div>
<!--
头部，黑马logo，正品保证，登陆注册
表格：1行 3列
-->
......
轮播图
操作步骤：使用定时器，每3s，将图片换掉
注意：
- 修改的是img标签的属性src
- img/1.jpg ，img/2.jpg ，img/3.jpg
图片名可以看成变量在++
代码示例：js部分
<script type="text/javascript">
/*
* 定时器，3s后，将图片换掉
* 修改的是img标签的属性img
* img/1.jpg img/2.jpg img/3.jpg
* 图片名可以看成变量在++
*
*/
var i = 1;
setInterval(function(){
i++;
if(i>3){
i=1;
}
//获取广告图的标签,img标签对象
var lunbo = document.getElementById("lunbo");
lunbo.src = "img/"+i+".jpg";
},3000)
</script>
轮播图的html部分
<img src="img/1.jpg" id="lunbo" width="1200">
简单表单验证
需求：简单验证注册时用户名是否为空，如为空，则无法提交，并提示信息。
表单提交的事件 onsubmit，事件源固定为form标签
事件调用函数：函数的返回值，决定是否提交，但不能只返回false，需要把false再次返回给事件才行。
代码示例：form表单部分
<form action="#" method="post" onsubmit="return fn()">
<table align="center">
<tr>
<td>用户名</td>
<td><input type="text" id="username" placeholder="请输入用户名"></td>
<td><span id="userMsg"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" placeholder="请输入密码"></td>
<td></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="gender">男<input type="radio" name="gender">女</td>
<td></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text"></td>
<td><img src="img/checkcode.jpg"></td>
</tr>
<tr >
<td align="center" colspan="3"><input type="image" src="img/btn.jpg"></td>
<!--<td></td>
<td></td>-->
</tr>
</table>
</form>
js部分
<script type="text/javascript">
/*
* 表单提交的事件 onsubmit
* 事件源固定为form标签
*
* 事件调用函数：函数的返回值，决定是否提交，但不能只返回false，需要把false再次返回给事件才行
*
*
*
*/
function fn(){
//获取用户名，文本框填写的内容，判断是不是填了
//获取到的是input标签对象
var username = document.getElementById("username");
var value = username.value;
if(value == ""){
//获取span标签对象
var userMsg = document.getElementById("userMsg");
//在标签中添加文本
userMsg.innerHTML="请填写用户姓名";
userMsg.style.fontSize="14px";
userMsg.style.color="red";
return false;
}
return true;
}
</script>
扫一扫
1036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
