JS
- 1、引入方式 — 外联式
- 2、引入方式 — 内嵌式
- 3、JS 基本数据类型及变量
- 4、JS - BOM
- 5、JS - DOM
- 6、获取元素节点
- 7、JS 事件
- 7.1、JS 事件(鼠标)
- 7.2、JS 事件(键盘)
- 7.3、JS 事件(表单)
- 8、画板案例
- 9、留言板案例
- 10、浏览器默认行为
1、引入方式 — 外联式
- 新建 JS 文件
alert("hello world")
- 新建 Html 文件
- 在头部引入 JS 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="1.js"></script>
</head>
<body>
</body>
</html>
2、引入方式 — 内嵌式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
alert("hello world")
</script>
</head>
<body>
</body>
</html>
- 在浏览器中打开
特别注意
-
type="text/javascript"
说明当前 script 标签中文本的类型 - 所有 JS 代码写在 script 标签
- script 放在 head 标签中
- 可以引入多个 script 标签,多个 script 标签顺序执行
- JS 代码可以引入外部文件
- 如果当前 script 标签作用是引入外部文件,那么这个 script 标签中就不能再写入代码了
3、JS 基本数据类型及变量
基本数据类型
数字 number(实数)
字符串 string
布尔值 bool
特殊数据类型 null-空 undefined-未声明
变量起名根据标识符
- 由数字、字母、下划线、$组成
- 不能以数字开头
- 区分大小写
- 标识符必须见名知意
4、JS - BOM
BOM 就是浏览器的对象模型,浏览器可以通过调用系统对话框, 向用户显示信息
系统提供三个函数
window.alert("hello world")
window.confirm("选择确定或取消")
window.prompt("请输入数据","1314521")
// windwo.prompt("文字标识","默认值")
- 新建 Html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.alert("hello world")
window.confirm("选择确定或取消")
window.prompt("请输入数据","1314521")
</script>
</head>
<body>
</body>
</html>
- 在浏览器中打开(浏览器会依次弹出三个对话框)
特别注意(自定义弹出内容)
- 先定义变量(susu)并且初始化赋值(xiaoke)
- 弹出(susu)变量对应的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var susu = "xiaoke"
window.alert(susu)
</script>
</head>
<body>
<div id="div1">susu</div>
</body>
</html>
特别注意(弹出变量数据类型)
- 弹出变量内容(alert 变量)
- 弹出变量类型(alert typeof 变量)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var susu = "xiaoke";
var qiqi = 12;
window.alert(typeof susu);
window.alert(typeof qiqi);
</script>
</head>
<body>
<div id="div1">susu</div>
</body>
</html>
- 在浏览器中打开
5、JS - DOM
先看一段代码
- 在标签(script)下定义了变量(susu)
- 在身体部分(body)定义了一个盒子(ID 为 div1)
- 我们称这为通过 ID 获取节点(此处节点为一个元素)
- 元素(标签 + 内容)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var susu = document.getElementById("div1");
alert(susu);
</script>
</head>
<body>
<div id="div1">susu</div>
</body>
</html>
- 在浏览器中打开(发现提示 null 空值)
因为代码是从上而下执行的,所以此时为空值
-
window.onload = function()
的作用是使其中的代码在 body 之后执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var susu = document.getElementById("div1");
alert(susu);
}
</script>
</head>
<body>
<div id="div1">susu</div>
</body>
</html>
- 在浏览器中打开
更多的属性
- 标签(tagName)
- ID 名(id)
- 类名(class)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var susu = document.getElementById("div1");
alert(susu);
alert(susu.tagName);
alert(susu.id);
alert(susu.className);
}
</script>
</head>
<body>
<div id="div1" class="love">susu</div>
</body>
</html>
6、获取元素节点
id 属性: document.getElementById()
tagName 标签名:document.getElementsByTagName()
name 属性:document.getElementsByName()
class 属性:document.getElementsByClassName()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var d1 = document.getElementById("div1");
// 1. 在控制台输出对应节点的内容
console.log(d1.innerHTML);
// 2. 表示第二个 div 标签
var d2 = document.getElementsByTagName("div")[1];
console.log(d2.innerHTML);
}
</script>
</head>
<body>
<div id="div1">aaa</div>
<div>bbb</div>
</body>
</html>
- 在浏览器中打开
通过节点获取标签的颜色及设置颜色
- 将获取的节点
id:div1
,赋值给变量d1
- 通过命令
console.log
向控制台写入数据 - 通过命令
变量.style.color
获取颜色及设置颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var d1 = document.getElementById("div1");
console.log(d1.style.color);
var d2 = document.getElementsByTagName("div")[1];
d2.style.color = "red";
}
</script>
</head>
<body>
<div id="div1" style="color: rgb(43, 43, 170);">keke</div>
<div>i love you</div>
</body>
</html>
- 在浏览器中打开
特别注意
- 命令
变量.style.color
只能获取行内颜色 - 如果碰到内嵌样式,则需要通过命令
getComputedStyle(d2)["color"]
来获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
<!-- 1. 第二个盒子(div)内嵌样式 -->
#div2{
color: red;
}
</style>
<script>
window.onload = function(){
var d1 = document.getElementById("div1");
console.log(d1.style.color);
var d2 = document.getElementsByTagName("div")[1];
console.log(d2.style.color);
console.log(getComputedStyle(d2)["color"]);
}
</script>
</head>
<body>
<!-- 2. 第一个盒子(div)行内样式 -->
<div id="div1" style="color: rgb(43, 43, 170);">keke</div>
<div id="div2">i love you</div>
</body>
</html>
- 在浏览器中打开
通过父节点获取
- 父类节点
ul[0]
赋值给变量ul1
- 获取父类节点的所有子类节点,通过命令
ul1.childNodes
并赋值给变量lis
- 命令
lis.length
可以查询出子类节点的个数,通过循环我们将子类节点输出在控制台上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var ul1 = document.getElementsByTagName('ul')[0];
var lis = ul1.childNodes;
alert(lis.length);
for(var i=0;i<lis.length;i++)
{
console.log(lis[i]);
}
}
</script>
</head>
<body>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
</ul>
</body>
</html>
- 在浏览器中打开
简单介绍
7、JS 事件
7.1、JS 事件(鼠标)
简介
- js 事件是用来获取事件的详细信息,如鼠标位置、键盘按键等
- 主要分为: 鼠标事件、键盘事件、表单事件
- 组成:on + 事件名称
鼠标事件
onclick //鼠标点击事件
ondblclick //鼠标双击事件
onmousedown //鼠标上的按钮被按下了
onmouseup //鼠标按下后,松开时激发的事件
onmouseover //当鼠标移动到某对象范围的上方时触发的事件
onmousemove //鼠标移动时触发的事件
onmouseout //当鼠标离开某对象范围时触发的事件
鼠标事件属性
e.clientX //鼠标距离可视区的左边距离
e.clientY //鼠标距离可视区的上边距离
e.pageX //鼠标距离页面的左边距离
e.pageY //鼠标距离页面的上边距离
e.offsetX //鼠标距离事件源的左边距离
e.offsetY //鼠标距离事件源的上边距离
鼠标事件示例
- 定义一个盒子(宽和高均为 300 px,背景颜色为绿色)
- 通过节点获取一个元素并且赋值给一个变量(div1)
- 通过变量绑定鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var div1 = document.getElementById('div1');
div1.onclick = function(e){
// window.event 窗口事件(参数)
console.log("点击 div1 盒子");
}
div1.ondblclick = function(e){
console.log("双击 div1 盒子");
}
div1.onmouseover = function(e){
console.log("鼠标在 div1 盒子上面");
}
}
</script>
</head>
<body>
<div id="div1" style="background-color: green;width: 300px;height: 300px;"></div>
</body>
</html>
- 在浏览器中打开
鼠标属性示例
- 改变盒子的高度(3000 px)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var div1 = document.getElementById('div1');
div1.onclick = function(e){
// window.event 窗口事件(参数)
console.log(e.clientX,e.clientY);
console.log(e.pageX,e.pageY);
console.log(e.offsetX,e.offsetY);
}
}
</script>
</head>
<body>
<div id="div1" style="background-color: green;width: 300px;height: 3000px;"></div>
</body>
</html>
- 在浏览器中打开
7.2、JS 事件(键盘)
键盘事件
onKeyPress //当键盘上的某个键被按下并且释放时触发的事件
onKeyDown //当键盘上某个按键被按下时触发的事件
onKeyUp //当键盘上某个按键被按放开时触发的事件
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
document.onkeypress = function(e){
console.log("键盘按住且松开");
}
document.onkeydown = function(e){
console.log("键盘松住");
}
document.onkeyup = function(e){
console.log("键盘松开")
}
}
</script>
</head>
<body>
</body>
</html>
- 在浏览器中打开
快捷键触发
- 输出控制台三个布尔值
- 顺序为(alt,shift,ctrl)按键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
document.onkeydown = function(e){
console.log(e.altKey,e.shiftKey,e.ctrlKey);
}
}
</script>
</head>
<body>
</body>
</html>
- 在浏览器中打开
7.3、JS 事件(表单)
表单事件
onblur //当前元素失去焦点时触发的事件
onfocus //当某个元素获得焦点时触发的事件
onchange //当前元素失去焦点并且元素的内容发生改变而触发的事件
onsubmit //提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var text = document.getElementById("text");
text.onblur = function(e){
console.log("失去焦点");
}
text.onfocus = function(e){
console.log("获取焦点");
}
}
</script>
</head>
<body>
<input type="text" name="" id="text" value="i love you">
</body>
</html>
- 在浏览器中打开
8、画板案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var div1 = document.getElementById('div1');
var h11 = document.getElementById("h11");
div1.onmousemove = function(e){
// window.event 窗口事件(参数)
var x = e.offsetX;
var y = e.offsetY;
// 鼠标在盒子里面移动 示数为距离源(盒子)的距离
h11.innerHTML = x + "," + y;
}
// 鼠标移出盒子 示数消失
div1.onmouseout = function(e){
h11.innerHTML = "";
}
}
</script>
</head>
<body>
<div id="div1" style="width: 300px;height: 300px;border: 1px solid black;">
<h1 id="h11" style="color: pink"></h1>
</div>
</body>
</html>
- 在浏览器中打开
9、留言板案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
// 获取三个节点
var div1 = document.getElementById('div1');
var text = document.getElementById("text");
var button = document.getElementById("button");
// 绑定按钮点击事件
button.onclick = function(e){
console.log("按钮点击激发事件:" + text.value);
// var text = "";
// 点击后 将文本框的内容同步到盒子中
div1.innerHTML += (text.value+"<br>");
}
// 绑定键盘回车事件
text.onkeydown = function(e){
if(e.keyCode == 13){
// 回车后 将文本框的内容同步到盒子中
console.log("回车激发事件:" + text.value);
div1.innerHTML += (text.value+"<br>")
}
}
}
</script>
</head>
<body>
<!-- 盒子内容超出自动出现滚动条(overflow) -->
<div id="div1" style="border: 2px solid black;width: 300px;height: 300px;overflow: auto;"></div>
<input type="text" name="" id="text" value="i love you">
<input type="button" name="" value="打猪" id="button">
</body>
</html>
- 在浏览器中打开
10、浏览器默认行为
阻止浏览器跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var link = document.getElementById("a1");
link.onclick = function(e){
console.log("可以重复查询点击次数,不会受到页面跳转的影响")
e.returnValue = false;
// return false;
}
}
</script>
</head>
<body>
<a href="" id="a1">当前页面</a>
</body>
</html>
- 在浏览器中打开