JS
1. js导入方式
1.1 内部标签
<script>
</script>
1.2 外部引用
a.js
alert("hello js");
<script src="a.js">
</script>
2. 基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//1. 定义变量
var num = 1;
//var name = "小红";
//2. 条件控制
if (2 > 1){
alert("true");
}
</script>
</head>
<body>
</body>
</html>
3. 数据类型
-
Number:不区分小数和整数
-
NaN:不是一个数字
-
Infinity:无穷大
-
String:字符串
-
Boolean:布尔值
-
逻辑运算符:&& || !
-
比较运算符：==：类型不一致值一致，为true
====：绝对等于，类型一样，值一样
NaN与所有数值都不相等，包括自己
var arr = [1,2,3,"1",null,true];
new person = {
name:"小红",
age:20,
tags:["sleep","reading"];
}
person.tags[0]//取值
4. 字符串
- 正常字符串使用' '或者" "
- 若要输出引号需转义字符\
- 使用`（tab上面）可以多行字符串编写
<script>
'use strict';//使用严格查模式
let name = "quinn";
let age = 20;
let msg = `您好,${name},${age//模版字符串
console.log(msg);
</script>
var name = "quinn"
console.log(name.length);//获取字符串长度
console.log(name.toUpperCase());//小写转换为大写
console.log(name.toLowerCase());//大写转换为小写
debugger eval code:1:1
console.log(name.indexOf('n')) //获取指定字符串内容在字符串中首次出现的位置索引
console.log(name.substring(1,3)) //截取字符串1-2
5. 数组
- 数组可以包含任意的数据类型
var arr = [1,2,3,4];
console.log(arr);//打印数组
arr.length = 10;//给length赋值，数组长度会发生改变，赋值过大没有元素的为null，赋值过小会丢失元素
console.log(arr);
console.log(arr.indexOf(2));//3
indexOf(1);//0 通过元素获取下标
arr.slice(2);//3,4,...
- push() && pop()
arr.push('a','b','c',5,6,7);//压入到尾部
>Array(10) [ 1, 2, 3, 4, "a", "b", "c", 5, 6, 7 ]
arr.pop();-->弹出尾部元素
>Array(9) [ 1, 2, 3, 4, "a", "b", "c", 5, 6 ]
- unshift() && shift()
arr.unshift('q','e')-->头部压入
>Array(11) [ "q", "e", 1, 2, 3, 4, "a", "b", "c", 5, … ]
arr.shift() -->弹出头部
>Array(10) [ "e", 1, 2, 3, 4, "a", "b", "c", 5, 6 ]
- sort()
>Array(7) [ 4, 7, 2, 3, 9, 5, 10 ]
arr.sort()-->排序
>Array(7) [ 10, 2, 3, 4, 5, 7, 9 ]
- reverse()
>Array(7) [ 10, 2, 3, 4, 5, 7, 9 ]
arr.reverse()
>Array(7) [ 9, 7, 5, 4, 3, 2, 10 ]
- concat()
>Array(7) [ 9, 7, 5, 4, 3, 2, 10 ]
arr.concat(['a','b'])-->并未改变数组，返回一个新的数组
>Array(9) [ 9, 7, 5, 4, 3, 2, 10, "a", "b" ]
- join()
arr.join('-')-->分隔符
>"9-7-5-4-3-2-10"
- 多维数组
arr = [[1,2],[3,4],["5","6"]];
>Array(3) [ (2) […], (2) […], (2) […] ]
arr[1][1]
>4
6. 对象
- js中所有的键都是字符串，值为任意对象
- 使用一个不存在的属性不会报错（undefined）
var person = {
name:"quinn",
age:23,
score:0
}
- 赋值
person.name = "小红"
- 动态删除属性
delete person.name
>true
person
>Object { age: 23, score: 0 }
- 动态添加属性
person.email="123456@qq.com"
>"123456@qq.com"
person
>Object { age: 23, score: 0, email: "123456@qq.com" }
- 判断属性值是否在对象中
'age' in person
>true
'toString' in person//继承
>true
- 判断属性是否是自身拥有的
person.hasOwnProperty('toString')
>false
person.hasOwnProperty('age')
>true
7. 流程控制
- if...else
var age = 10;
if (age >=18){
console.log("你已经成年了");
}else {
console.log("你还没有成年");
}
- while
var age = 10;
while (age < 100){
age = age +1;
console.log(age);
}
- for
for (let i = 0; i < 100; i++) {
console.log(i);
}
- forEach
var age = [12,3,14,5,8,3,7];
age.forEach(function (value) {
console.log(value);
})
- for...in
var age = [12,3,14,5,8,3,7];
for (var num in age){
console.log(age[num]);
}
8. Map && Set
- ES6新特性
- Map
var map = new Map([['Tom',100],['Mary',90],['Jack',88]]);
var score = map.get('Tom');//get value by key
console.log(score);
//map.set('admin',88);-->新增和修改
//map.delete('tom');-->删除
- Set:无序不重复集合
var set = new Set([3,1,2,4,2,1,3]);
console.log(set);
//set.add(6);-->add
//set.delete(2);-->delete
//set.has(3);-->是否包含某个元素
9. iterator
- ES6新特性
- 遍历数组
var arr = [3,4,5];
for (var x of arr){
console.log(x)
}
- 遍历Map
var map = new Map([['Tom',100],['Mary',90],['Jack',88]]);
for (let x of map) {
console.log(x)
}
- 遍历Set
var set = new Set([5,6,7,8]);
for (let x of set) {
console.log(x)
}
10. 函数
10.1 函数的定义
function functionName(arg0,arg1,...,argn){
statements
}
- 有参，无返回值
function sayHi(name,msg){
alert("Hi"+name+","+msg);
}
sayHi("Jack","How are you");
- 有参，有返回值
function sum(num1,num2){
return num1+num2;
}
var result = sum(1,2);
一个函数可以包含多个return语句
11. 复制变量值
var num1 = 10;
var num2 = num1;//num2是num1的副本，互不干扰
var obj1 = new Object();
var obj2 = obj1;
obj1.name = "Jack";
alert(obj2.name);//Jack
- 如果从一个变量向另一个变量复制基本类型的值，会在变量对象上创建一个新值，然后把该值赋值到为新变量分配的位置上
- 如果从一个变量向另一个变量复制引用类型的值，同样会把该值赋值到为新变量分配的位置上，不同的是，这个值实际上是一个指针，复制操作接收后，两个变量引用的是同一个对象。
12. BOM
- BOM是浏览器模型，把浏览器当做一个对象看‘
- BOM的顶级对象是window
- BOM浏览器厂商在各自浏览器上定义的，兼容性较差
- 学习的是浏览器窗口交互的一些对象
12.1 window
alert("Warning");
confirm("Are you sure?");
prompt("What's you name?","Jack");
- alert()
- 警告对话框
- confirm()
- 确认对话框
- prompt()
- 提示框
12.2 location
window.location("http://www.quinn.com");
alert(location.href);
- href()
- 返回当前加载页面完整url
12.3 navigator
- userAgent()
- 返回有客户机发送给服务器的user-agent头部的值
12.4 history
- back()
- 后退
- forward()
- 前进
- go(a)
- a = 1:前进一个页面 a = -1:后退一个页面
13. DOM
- 文档对象模型，把文档当做一个对象来看
- 顶级对象是document
- 主要学习的是操作页面元素
- 是W3C标准
13.1 标准模型
- document:整个文档对象
- element:元素对象
- attribute:属性对象
- text:文本对象
- comment:注释对象
13.2 获取元素
- 根据ID获取
<div id=“time”>2023</div>
var timer = document.getElementById('time');
-
根据标签名获取
得到的是集合
<ul>
<li>Java</li>
<li>Java</li>
<li>Java</li>
</ul>
var lis = document.getElementByTagName('li');
- 根据name属性获取
返回Element对象数组
- 根据class属性
返回Element对象数组
document.getElementByClassName('类名');
- document.querySelector
- 根据指定选择器返回第一个元素对象
var firstBox = document.querySelector('.box');//#id
- document.querySelectorAll
- 返回指定选择器所有元素对象
- 返回集合
var lists = document.querySelectorAll(.box)
- 获取body元素
document.body;
- 获取html元素
document.html;
14. 事件监听
- 通过html标签中的事件属性进行绑定
<input type="button" onclick='on()'>
function on(){
alert("click...");
}
- 通过DOM元素属性绑定
<input type="button" id="btn">
document.getElementById("btn"){
alert("click....");
}
