我的JavaScript学习之旅
JavaScript简介
- JavaScript是一门弱类型的脚本语言，需要在网页上执行
- JavaScript和Java之间没有任何关系
- 学习JavaScript主要学习一下三部分
- JavaScript基础语法
- DOM
- BOM
JavaScript的三种引入方式
1.行内脚本
div {
width: 300px;
height: 300px;
background-color: pink;
}
<div onclick="alert('hello')"></div>
2.页内脚本
<!-- 页内样式 -->
<script type="text/javascript">
// 定义一个字符串变量
var str = 'hello';
// 通过alert()弹窗函数输出字符串str
alert(str);
// 控制台输出字符串"hello"
console.log("hello");
</script>
3.引入外部样式表
<!-- 引入外部样式 -->
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
JavaScript常用语法
1. 定义常量变量
<script type="text/javascript">
// 定义常量
const x = 10;
// 定义整数
var a = 10;
// 定义小数
var b = 10.5;
// 定义字符
var c = 'hello';
// 定义字符串
var d = "你好";
// 定义布尔类型数据
var e = true;
</script>
2. 数据类型
- 原始类型
numberstringbooleannullundefined
- 引用类型
<script type="text/javascript">
// 控制台输出null
var a = null;
console.log(a)
</script>
3. 算数运算符
3.1算术运算符：+、-、*、/、%
- 小数运算同Java一样，是不精确的
<script type="text/javascript">
var c1 = 20;
var c2 = 6;
console.log(c1 / c2);
console.log(c1 % c2);
</script>
控制台输出为：
3.3333333333333335
2
3.2比较运算符： >、<、>=、<=、!=、===
- 双等号只判断值，不判断数据类型，性能较三等号低（需要进行类型装换）
- 三等号既判断值，又判断数据类型
<script type="text/javascript">
var c3 = "1";
var c4 = 1;
console.log(c3 == c4);
console.log(c3 === c4);
</script>
控制台输出为：
true
false
3.3逻辑运算符：&&、||、!
- 示例：判断闰年
<script type="text/javascript">
var year = 2008;
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
console.log("闰年");
}
</script>
// 控制台输出结果为：闰年
3.4赋值运算符：+=、-=、*=、/=、%=、++、--
- 示例：控制台输出九九乘法表
<script type="text/javascript">
for (var i = 1; i <= 9; i++) {
var out = "";
for (var j = 1; j <= i; j++) {
out += j + "*" + i + "=" + i * j + " ";
}
console.log(out);
}
</script>
控制台输出为：
1*1=1
1*2=2 2*2=4
1*3=3 2*3=6 3*3=9
1*4=4 2*4=8 3*4=12 4*4=16
1*5=5 2*5=10 3*5=15 4*5=20 5*5=25
1*6=6 2*6=12 3*6=18 4*6=24 5*6=30 6*6=36
1*7=7 2*7=14 3*7=21 4*7=28 5*7=35 6*7=42 7*7=49
1*8=8 2*8=16 3*8=24 4*8=32 5*8=40 6*8=48 7*8=56 8*8=64
1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81
流程控制
- 与Java中的流程控制完全相同
- 示例：输出所有三位数的素数
for (var i = 100; i < 1000; i++) {
var isPrime = true;
for (var j = 2; j < i; j++) {
if (i % j == 0) {
isPrime = false;
break;
}
}
if (isPrime == true) {
console.log(i + "是素数!");
}
}
数组
定义数组
- `var nums = [];`（JavaScript的一个语法糖）
- `var nums = new Array();`
- 可以在定义数组的时候就为数组赋值
- 数组中的元素类型可以不一致
var nums = [];
var strs = new Array();
nums[0] = 1;
nums[2] = 1.0;
nums[3] = '1';
nums[4] = "hello";
nums[5] = "你好";
nums[10] = 1;
console.log(nums.length);
// 控制台输出：11
常用方法
push()：从数组尾部压入pop()：从数组尾部去除并移除unshift()：从数组头部压入shift()：从数组头部去除并移除
var nums = [1,2,3,4,5,6,7,8,9];
nums.unshift(0);
nums.push(10);
console.log(nums);
var x = nums.shift();
console.log(x);
var y = nums.pop();
console.log(y);
控制台输出
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10]
0
10
indexOf(num)：输出值为num的数组元素的下标forEach()：遍历输出数组
var nums = [1,2,3,4,5,6,7,8,9];
console.log(nums.indexOf(4));
nums.forEach(
function (value, index, numsobj) {
console.log("value=" + value);
console.log("index=" + index);
// 输出整个数组
console.log("numsobj=" + numsobj);
}
);
控制台输出
3
value=1
index=0
numsobj=1,2,3,4,5,6,7,8,9
value=2
index=1
numsobj=1,2,3,4,5,6,7,8,9
value=3
index=2
numsobj=1,2,3,4,5,6,7,8,9
value=4
index=3
numsobj=1,2,3,4,5,6,7,8,9
value=5
index=4
numsobj=1,2,3,4,5,6,7,8,9
value=6
index=5
numsobj=1,2,3,4,5,6,7,8,9
value=7
index=6
numsobj=1,2,3,4,5,6,7,8,9
value=8
index=7
numsobj=1,2,3,4,5,6,7,8,9
value=9
index=8
numsobj=1,2,3,4,5,6,7,8,9
slice(n,m)：对数组进行裁切，裁切出下标从n到m的元素形成一个新数组，前闭后开，裁切之后，不影响原数组splice(n,m)：对数组进行裁切，从下标为n的元素开始裁切，共裁切每个元素，裁切之后，影响原数组
var nums = [1,2,3,4,5,6,7,8,9];
var str1 = nums.slice(2,6);
console.log(nums);
console.log(str1);
var str2 = nums.splice(2,6);
console.log(nums);
console.log(str2);
控制台输出
[1, 2, 3, 4, 5, 6, 7, 8, 9]
[ 3, 4, 5, 6 ]
[ 1, 2, 9 ]
[ 3, 4, 5, 6, 7, 8 ]
函数
- 定义函数：
function 函数名(){函数体} - 调用函数：
函数名()
// 定义函数
function print(str) {
console.log(str);
}
// 调用函数
print("hello");
JavaScript面向对象
- JavaScript中的对象，即键值对的集合
- 定义对象
var obj= {};（JavaScript的一个语法糖）var obj = new Object();- 空对象：对象中不含任何键值对
- 自由对象：对象中可以添加任意键值对
var teacher = {};
var student = {
name:"张三",
sex:"男"
};
console.log(student);
控制台输出
{ name: '张三', sex: '男' }
- 添加新的键值对
- 通过
.创建键值对 - 通过
[]创建键值对[]中的内容可以是字符串（允许有空格）、数字
- 通过
var student = {
name:"张三",
sex:"男"
};
console.log(student);
student.age = 20;
student["cell-pbone"] = "189----8480";
console.log(student);
控制台输出
{ name: '张三', sex: '男' }
{ name: '张三', sex: '男', age: 20, 'cell-pbone': '189----8480' }
- 在JavaScript中，函数就是一个对象，可以将函数赋给一个变量
- 示例：通过函数定义对象、创建对象
function Student(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
this.sayHello = function() {
console.log(this.name + " says 'Hello!'");
};
}
var student = new Student("张三","男",20);
console.log(student.name);
console.log(student.sex);
console.log(student.age);
student.sayHello();
控制台输出
张三
男
20
张三 says 'Hello!'
- JavaScript的面向对象是通过原型机制来实现的，和Java完全不同
function Student(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
this.sayHello = function() {
console.log(this.name + " says 'Hello!'");
};
}
function MidStudent(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
}
MidStudent.prototype = new Student();
var midStudent = new MidStudent("张三","男",20);
console.log(midStudent.name);
console.log(midStudent.sex);
console.log(midStudent.age);
midStudent.sayHello();
console.log(midStudent);
控制台输出
张三
男
20
张三 says 'Hello!'
Student { name: '张三', sex: '男', age: 20 }
DOM
- Document Object Model，文档对象模型
- 在JavaScript中，将每一个元素理解成一个对象
- document是内置的一个对象，描述整个html文档
- 常用的dom对象的属性和方法
id：获取元素的idtagName：获取元素的标签名innerText：获取元素的内容（不包括html信息）innerHTML：获取元素的内容（包括html信息）style：获取元素的行内样式className：获取元素的类名classList：获取元素的类名的数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First Page</title>
<style type="text/css">
.a {
width: 300px;
height: 300px;
}
.b {
background-color: pink;
}
.c {
margin: 0 auto;
}
</style>
</head>
<body>
<div id="mydiv" class="a b c">
Hello,Everybody!
</div>
<script type="text/javascript">
var mydiv = document.getElementById("mydiv");
console.log(mydiv.id);
console.log(mydiv.tagName);
console.log(mydiv.innerText);
console.log(mydiv.innerHTML);
console.log(mydiv.style);
console.log(mydiv.className);
console.log(mydiv.classList);
</script>
</body>
</html>
DOM的增删改查
1. DOM的增加
1.1第一种插入
- 语法：
父元素dom.appendChild(子元素dom)：将一个元素插入到另一个元素的子元素的末尾 - 第一步：获取父元素的dom
- 第二步：创建一个子元素（
createElement()），有需要的话设计一下样式 - 第三步：将子元素插入父元素中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outer {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="outer"></div>
<script type="text/javascript">
var domfather = document.querySelector(".outer");
// 创建一个span元素对象
var domchild = document.createElement("span");
domchild.innerText = "新增元素";
domchild.style.color = "green";
domchild.style.padding = "5px 10px";
domchild.style.backgroundColor = "rgba(255,255,255,0.5)";
// 表示添加一个子元素
domfather.appendChild(domchild);
</script>
</body>
</html>
1.2第二种插入
- 语法：
父元素dom.insertBefore(插入值,子元素dom)：将一个元素插入到另一个元素的前面 - 第一步：获取被插入元素的dom
- 第二步：获取被插入元素的父元素的dom
- 第三步：创建元素，有需要的话设计一下样式
- 第四步：插入元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在3之前加一个2.5</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="item">3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
// 获取“3”的dom对象
var domchild = document.querySelector(".item");
// 创建“2.5”的dom对象
var newdom = document.createElement("li");
newdom.innerText = "2.5";
// 获取父元素的dom对象
var domfather = domchild.parentElement;
// 添加“2.5”的dom对象
domfather.insertBefore(newdom,domchild);
</script>
</body>
</html>
2. DOM的删除
2.1第一种删除：直接删除元素
- 第一步：找到要删除的元素，获取其dom
- 第二步：删除该元素（
元素dom.remove()）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除最后一位</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
var dom = document.querySelector("ul>li:last-child");
dom.remove();
</script>
</body>
</html>
2.2第二种删除：通过父元素删除元素
- 语法：
父元素dom.removeChild(子元素dom)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除最后一位</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
var dom = document.querySelector("ul>li:last-child");
var domfather = dom.parentElement;
domfather.removeChild(dom);
</script>
</body>
</html>
3. DOM的修改
- 先查询到元素，才能进行修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.item {
width: 30px;
height: 30px;
background-color: red;
}
</style>
</head>
<body>
<ul id="myul">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
<script type="text/javascript">
// 修改第一个类名为item的元素的背景色为粉色
var md = document.querySelector(".item");
md.style.backgroundColor = "pink";
</script>
</body>
</html>
4. DOM的查询
- 一般仅使用前两种
- document.querySelector(“选择器名称”)：查询第一个满足指定选择器的元素
- document.querySelectorAll(“选择器名称”)：查询所有满足指定选择器的元素
- document.getElementById(“id”)
- document.getElementByName(“name”)：返回类数组
- document.getElementByClassName(“classname”)：返回类数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="myul">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
<script type="text/javascript">
var md = document.querySelector(".item");
console.log(md);
var mds = document.querySelectorAll(".item");
console.log(mds);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="outer"></div>
<div class="inner">
<span id="aaa" class="inner"></span>
</div>
<script type="text/javascript">
var md = document.querySelector(".inner");
var mds = md.querySelector(".inner");
console.log(mds);
</script>
</body>
</html>
DOM的四向遍历
- 【上】
元素.parentElement：获取一个元素的父元素 - 【下】
父元素.children：返回一个元素的所有子元素，返回值类型为类数组 - 【左】
元素.previousElementSibling：返回一个元素的紧邻兄元素 - 【右】
元素.nextElementSibling：返回一个元素的紧邻弟元素 父元素dom.childElementCount：返回一个元素子元素的个数- 如果遍历不到，则返回null
DOM的事件处理
- JavaScript和人进行行为交互
- click事件：单击事件，使用频率最高的事件
- dblclick事件：双击事件
- onload事件：window对象和img对象可以触发
- 页面载入完成之后触发的事件
- 键盘相关事件
- keypress事件：键盘按下一个键
- keydown事件：键按下时触发
- keyup事件：键弹起时触发
- 鼠标相关事件
- mousedown事件：鼠标按下、左中右键都会触发（event事项，自动定义）
- mouseup事件：鼠标弹起
- mousemove事件：鼠标移动，可持续触发
- mouseenter事件：鼠标进入
- mouseleave事件：鼠标离开
事件对象
- 获取到事件相关的信息
- e.key（返回键值）、e.keycode（返回键的码值）
添加事件的三种方式
- 前两种方式只能添加一种事件，再次添加会覆盖原有时间
- 第三种方式可以添加多个事件
1.直接在标签内定义onXXX事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn" type="button" onclick="changeColor()">点我</button>
<script type="text/javascript">
function changeColor() {
var dom = document.querySelector("#btn");
dom.style.backgroundColor = "red";
}
</script>
</body>
</html>
2.给dom元素添加onXXX属性
- 效果与第一种方式完全一样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn" type="button">点我</button>
<script type="text/javascript">
var dom = document.querySelector("#btn");
dom.onclick = function() {
dom.style.backgroundColor = "red";
};
</script>
</body>
</html>
3.添加事件监听器
元素dom.addElementListener(事件名称,事件处理函数)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,
html {
height: 100%;
}
body {
margin: 0;
overflow: hidden;
}
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.querySelector("div");
div.addEventListener("click", function() {
// 获取屏幕的宽度和高度
var sw = document.body.offsetWidth;
var sh = document.body.offsetHeight;
// 获取随机偏移量
var offsetTop = parseInt(Math.random() * sh);
var offsetLeft = parseInt(Math.random() * sw);
div.style.top = offsetTop + "px";
div.style.left = offsetLeft + "px";
});
</script>
</body>
</html>
取消事件：
元素dom.onxxx = null（前两种方式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn" type="button">点我</button>
<script type="text/javascript">
var dom = document.querySelector("#btn");
dom.onclick = function() {
dom.style.backgroundColor = "red";
};
dom.onclick = null;
</script>
</body>
</html>
元素dom.removeElementListener(事件名称,事件处理函数)（第三种方式）- 事件处理函数要有名称才可移除
定时任务
- setTimeout：在指定时间后，执行一个操作
- setInterval：每隔一定时间，执行一个操作
- setInterval(事件处理函数,时间)
- 停止定时器clearInterval
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>每个1秒刷新一下div的位置</title>
<style type="text/css">
body,
html {
height: 100%;
}
body {
margin: 0;
overflow: hidden;
}
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.querySelector("div");
div.addEventListener("click", function() {
// 获取屏幕的宽度和高度
var sw = document.body.offsetWidth;
var sh = document.body.offsetHeight;
// 每个一秒自动刷新div位置
// 第一个参数为要执行的函数
// 第二个参数为间隔时间
setInterval(function() {
// 获取随机偏移量
var offsetTop = parseInt(Math.random() * sh);
var offsetLeft = parseInt(Math.random() * sw);
div.style.top = offsetTop + "px";
div.style.left = offsetLeft + "px";
}, 1000);
});
</script>
</body>
</html>
BOM
- Broswer Object Model，浏览器对象模型
1. window：对象，用于指代窗口
- 平时可省略window
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.document.body.style.backgroundColor = "pink";
</script>
</body>
</html>
2. history：访问历史记录
2.1 back()：表示后退一页
2.2 forward()：表示前进一页
2.3 go(参数)：表示前进或后退
- 参数表示前进或后退的页数
- 正整数表示前进
- 负整数表示后腿
3. location：浏览地址
3.1 href属性：指定新的访问地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn" type="button">点我</button>
<script type="text/javascript">
var btn = document.querySelector("#btn");
btn.addEventListener("click",function(){
location.href = "http://www.baidu.com";
});
</script>
</body>
</html>
3.2 replace属性：替换旧的访问地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn" type="button">点我</button>
<script type="text/javascript">
var btn = document.querySelector("#btn");
btn.addEventListener("click",function(){
location.replace("http://www.baidu.com");
});
</script>
</body>
</html>
3.3 reload属性：刷新当前页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn" type="button">点我</button>
<script type="text/javascript">
var btn = document.querySelector("#btn");
btn.addEventListener("click",function(){
location.reload();
});
</script>
</body>
</html>
跨页面间数据传递
1. cookie
2. localStorage：本地存储
- 只能存储字符串
- 可通过
JSON.stringify()将对象转换成字符串 - 可通过
JSON.parse()解析字符串为对象 - 不手动移除，则会永远生效
传输数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>传输数据</title>
</head>
<body>
<script type="text/javascript">
var student = {
name:"张三",
sex:"男",
age:10
};
var json = JSON.stringify(student);
console.log(json);
localStorage.setItem("student", json);
</script>
</body>
</html>
接收数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>接收数据</title>
</head>
<body>
<script type="text/javascript">
var json = localStorage.getItem("student");
var student = JSON.parse(json);
console.log(student);
</script>
</body>
</html>
3. sessionStorage：会话存储
- 使用方式与本地存储一样，但仅在会话期间有效，会话关闭，则失效
- 只能存储字符串
- 可通过
JSON.stringify()将对象转换成字符串 - 可通过
JSON.parse()解析字符串为对象
1070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
