一:事件
一:鼠标事件:
点击(单击)onclick、
移入onmouseover、
移出onmouseout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
function randomNum() {
return parseInt(Math.random() * (255 - 0 + 1)) + 0;
}
//获取div
var div = document.getElementsByTagName("div")[0];
/*
js中如何绑定事件:
标签对象.事件名称 = function() {
事件行为
}
*/
//点击
div.onclick = function() {
div.style.backgroundColor = "rgb(" + randomNum() + ", " +
randomNum() + ", " +
randomNum() + ")";
}
//移入
div.onmouseover = function() {
div.style.backgroundColor = "rgb(" + randomNum() + ", " +
randomNum() + ", " +
randomNum() + ")";
}
//移出
div.onmouseout = function() {
div.style.backgroundColor = "rgb(" + randomNum() + ", " +
randomNum() + ", " +
randomNum() + ")";
}
</script>
</html>
二:表单事件:聚焦onfocus、失焦onblur、值改变事件onchange
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单事件</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<form action="" method="post">
用户名:<input type="text" name="username" placeholder="请输入用户名" /><br />
学历:
<select name="degree">
<option value="本科">本科</option>
<option value="专科">专科</option>
<option value="幼儿园">幼儿园</option>
</select><br />
<input type="submit" value="提交"/>
</form>
<div></div>
</body>
<script type="text/javascript">
//获取用户名的输入框
var userInput = document.getElementsByName("username")[0];
/*
聚焦事件
不是所有的标签都有焦点,表单事件主要针对于表单元素
一个标签想要使用聚焦、失焦事件,首先你得有焦点!
*/
userInput.onfocus = function() {
userInput.value = "张二麻子";
}
//失焦事件
userInput.onblur = function() {
userInput.value = "王二驴子";
}
//获取到学历的下拉选择框
var degree = document.getElementsByName("degree")[0];
//值改变
degree.onchange = function() {
alert(degree.value);
}
var div = document.getElementsByTagName("div")[0];
div.onfocus = function() {
alert("div被聚焦了!");
}
</script>
</html>
二:DOM的增删改查
只要是涉及到页面内标签的操作,势必需要用到dom.
什么是DOM
当网页被浏览器加载时,浏览器会创建一个用来表示当前页面文档的对象,document!
我们在js中,操作document对象,就相当于在操作整个html页面
对页面的操作,无外乎就是对页面内容进行增删改查功能
1.获取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM获取元素的方法</title>
</head>
<body>
<!--普通标签-->
<div id="d" class="c">哈哈哈</div>
<!--表单元素-->
<input type="text" name="username" />
</body>
<script type="text/javascript">
/*
getElementById("id名称") 通过id名称获取标签,得到的是唯一一个,可以直接操作!
*/
var div = document.getElementById("d");
div.style.color = "red";
/*
getElementsByClassName("类名") 通过类名获取标签,得到的是一个数组
而数组是不能直接操作的,我们必须通过下标取出单个标签,才能操作!
*/
var div = document.getElementsByClassName("c")[0];
div.style.color = "blue";
/*
getElementsByTagName("标签名") 获取指定的标签名的所有标签,一组
不能直接操作,需要先通过下标获取单个标签再操作!
*/
var div = document.getElementsByTagName("div")[0];
div.style.color = "orange";
/*
getElementsByName("表单元素name属性的值") 专门用于获取表单元素,因为表单元素才有name属性!
得到的也是一组,不能直接操作,需要先通过下标取出再操作!
*/
var userInput = document.getElementsByName("username")[0];
userInput.value = "嘿嘿嘿";
</script>
</html>
//拓展---很多时候也用的到
//这两个支持传递选择器来获取标签
//querySelector("选择器")得到单个标签
//querySelectorAll("选择器")得到一组标签
var div = document.querySelector("#d");
div.style.color = "purple";
var div = document.querySelectorAll(".c")[0];
div.style.color = "pink";
2.修改元素
1)css样式
改变css样式的方法为: 标签对象.style.css样式名称 = “值”;
//举例
//获取div
var div = document.getElementsByTagName("div")[0];
//修改
div.style.color = "red";
div.style.fontSize = "30px";
2)标签内容,值
第一类:修改,获取普通标签的内容,值,需要用到:
innerHTML,innerText
两者的区别:
innerText只能处理纯文本,而innerHTML可以解析HTML结构
第二类:修改,获取表单元素的内容,值,需要用到:value属性
3)标签属性
三:BOM
浏览器对象模型
浏览器页面被加载,初始化时,会在内存中创建一个全局的对象,来描述当前窗口的属性或者行为,这个对象称为浏览器对象模型。
BOM中有一个最核心的对象window,代表浏览器的窗口,这个窗口的主要子模块是
A--documen文档对象
B-history浏览历史对象
C-location窗口位置对象
1.定时器
分为单次定时器,循环定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
</body>
<script type="text/javascript">
/*
定时器分类:单次定时器、循环定时器
单次定时器最大的作用,可以实现方法的延迟执行,而且方法只执行一次!
setTimeout(function() {
}, 延迟时间毫秒)
参数解析:
参数1function,代表绑定执行的方法
参数2delay,代表延迟的时间
循环定时器的最大作用,可以让一个方法反复的执行!
setInterval(function() {
}, 时间毫秒)
参数解析:
参数1function,代表绑定执行的方法
参数2时间,方法执行的间隔时间,单位毫秒!
setInterval()方法除了开启循环定时器外,还返回了一个定时器对象
如果我们想要关闭定时器,可以调用clearInterval(定时器对象)!
*/
setTimeout(function() {
console.log("单次定时器中的方法执行了!~");
}, 2000);
var index = 0;
var timer = setInterval(function() {
index++;
if (index > 4) {
clearInterval(timer);
}
console.log(index);
}, 1000);
</script>
</html>
2.window中的弹出框
A-alert警告框
B-confirm确认框,返回布尔值,点击确定返回true,点击取消返回false
C-提示输入框prompt("提示输入文本","默认值"),此方法的返回值为输入的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window的弹出框</title>
</head>
<body>
<input type="button" value="alert()" id="alert" />
<input type="button" value="confirm()" id="confirm" />
<input type="button" value="prompt()" id="prompt" />
</body>
<script type="text/javascript">
var alertBtn = document.getElementById("alert");
var confirmBtn = document.getElementById("confirm");
var promptBtn = document.getElementById("prompt");
//alert警告框
alertBtn.onclick = function() {
alert("这是一个警告框!");
}
//确认框,返回布尔值,点击确定返回true,点击取消返回false
confirmBtn.onclick = function() {
if(confirm("您确定要删除吗?")) {
console.log("您点击了确认按钮!");
} else {
console.log("您点击了取消按钮!");
}
}
/*
提示输入框 prompt("提示输入的文本", "默认值")
此方法的返回值为输入的内容!
*/
promptBtn.onclick = function() {
var name = prompt("请输入你的姓名:", "");
console.log(name);
}
</script>
</html>
3.window中的其他对象(常用)
1)window.location在js中可以实现路径的切换
实现路径切换的案例代码:
window.location = “新路径”;支持在js中实现路径跳转,书写时可以省略window,但为了增强语义,不建议省略!