目录
一、JS引入方式
1. 嵌入到HTML中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*****************/
/*javascript 代码*/
/*****************/
</script>
</body>
</html>2. 引入本地独立js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--**********************************************************-->
<script type="text/javascript" src="./xxxx.js"></script>
<!--**********************************************************-->
</body>
</html>3. 引入网络来源文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--**********************************************************-->
<script src="https://xxxxx/xx.js"></script>
<!--**********************************************************-->
</body>
</html>二、JS基础语法
1. 注释
-- 单行注释 //
-- 多行注释 /* */
-- 在HTML中 <!-- -->
2. 输出方式
-- 弹出框 alert("xxxx");
-- 页面输出 document.write("页面输出");
-- 控制台输出 console.log("控制台输出");
3. 数据类型
-- 数值 例: var age = 20;
-- 字符串 例: var name = "小明";
-- 布尔值 例: var gender = true;
-- undefined 例: var name=undefined;
-- null 例: var name=null;
-- 对象(object) 例: var user = {age:20, name="小明", gender=true}
-- Symbol 待定
-- BigInt 待定
-- null 和 undefined 都表示没有, 因历史原因存在
-- null 一般表示对象"没有"
-- undefined 一般表示 数值"没有"
4. typeof 应用
-- 获取数据类型
例: typeof 123 -- number
例: typeof abc -- string
例: typeof true -- boolean
例: typeof {} -- object
例: typeof null -- object
例: typeof undefined -- undefined
5. 运算符
算数运算符：
加+: 100+1
减-: 100-1
乘*: 100*1
除/: 100/1
取余%: 100%1
自增++
自减--
比较运算符：
> 大于
>= 大于等于
< 小于
<= 小于等于
== 相等运算符
=== 严格相等运算符
!= 不相等运算符
!== 严格不相等运算符== 与 === 的区别
== 只比较数值本身是否相同
=== 比较数值本身和数据类型是否相同
例: var num1 = 10;
var num2 = "10";
console.log(num1 == num2); //true
console.log(num1 === num2); //false
布尔运算符：
取反 !
与 &&
或 ||
例:
!null //true
!undefined // true
!0 //true
!"" //true
!NaN //true
!false //true
其余全部是false
三元运算符：
x?y:z
6. 关键字应用
条件语句：
1.var关键字 -- 函数级作用域
2.let关键字 -- 块级作用域(花括号级作用域)
-- let不存在变量提升
-- let不允许重复声明
const 命令
-- 一旦声明,不可改变
-- 必须声明的时候直接初始化
-- 作用域与let相同
-- 不存在变量提升
例: const PI = 3.1415;
if(){}
if(){}else{}
if(){}else if(){} else if(){} else{}
switch(){
case xxx: break;
case xxx: break;
default: break;
}
while(条件){}
for(let xxx of xxx){
xxxxxxxxx
}7. 字符串应用
charAt() -- 查找单个字符
str.length -- 字符长度concat() -- 连接字符串
substring() -- 截取字符串
substr() -- 截取字符串
indexOf() -- 第一次字符串出现的位置,若没有则返回-1
trim() -- 去除字符串两端的空格(包括\t \w \n)
trimStart() -- 去除开头的空格
trimEnd() -- 去除结尾的空格split() -- 字符串分割
includes() -- 返回布尔值,表示是否找到了参数字符串
例: 'abcd'.includes('bc'); //true
startsWith() -- 返回布尔值,表示参数字符串是否在原字符串的头部
例: 'abcd'.startsWith('ab'); //true
endsWith() -- 返回布尔值,表示参数字符串是否在原字符串的尾部
例: 'abcd'.endsWith('cd'); //truerepeat() -- 返回一个新字符串,表示将原字符串重复n次
例: 'x'.repeat(3); //xxx
padStart() -- 头部补全
例: 'x'.padStart(4,'ab'); //abax
padEnd() -- 尾部补全
例: 'x'.padEnd(4,'ab'); //xabatrim() -- 消除头部和尾部的空格
例: ' abc '.trim(); //abc
trimStart() -- 消除头部空格
例: ' abc '.trimStart(); //'abc '
trimEnd() -- 消除尾部空格
例: ' abc '.trimEnd(); //' abc'at() -- 返回指定下标的字符,支持负索引
例: 'abcde'.at(1) //b
'abcde'.at(-1) //e
!!!超出索引范围,返回undefined模板字符串
例:var href = "http://www.baidu.com";
var a1 = "<a href='"+href+"'></a>";
var a2 = `<a href="${href}"></a>`;
charAt() -- 查找单个字符
str.length -- 字符长度
var str = "abcd";
console.log(str.charAt(1)); //b
console.log(str.charAt(-1)); //"" 为空concat() -- 连接字符串
var str1 = "aaa";
var str2 = "bbb";
var result = str1.concat(str2);
console.log(result); //aaabbbconcat和+区别:
-- concat 任何类型直接合并成字符串
-- + 遇见数字做运算,遇见字符串相连接
substring() -- 截取字符串
var str ="abcdef";
var result = str.substring(1,3);
console.log(result); // bc
//参数1:开始位置(包含);
//参数2:结束位置(不包含);
//若第2个参数没有,则自动到结尾substr() -- 截取字符串
与substring作用一样
区别:
第二个参数,取长度,不取位置
indexOf() -- 第一次字符串出现的位置,若没有则返回-1
var str = "abcda";
console.log(str.indexOf('a')); //0
console.log(str.indexOf('a',2)); //4
//第2个参数: 从第N个开始trim() -- 去除字符串两端的空格(包括\t \w \n)
trimStart() -- 去除开头的空格
trimEnd() -- 去除结尾的空格
split() -- 字符串分割
"ayyabbacc".split('a'); // ['yy','bb','cc']
split(""); //返回每一个字符
split(); //返回原字符
//第2参数: 限定字符串的个数8. 数组应用
Array.isArray(); //判断是否是数组,用来弥补typeof的不足
push("xxx"); 在数组结尾添加数据, 返回数组的长度
pop(); 删除尾部最后一个元素, 返回该元素
shift(); 删除数组第一个元素,返回该元素
unshift(); 在数组的头部添加元素,返回数组长度
join(); 添加分隔符,数组转换成字符串
默认用,分隔
null, undefined 会转换成空字符串
join() 和 split() 可相互转换
concat() -- 多个数组合并
reverse() -- 数组内的元素反转
indexOf() -- 查找数组第一次出现的位置, 不存在,则返回-1
Array.from() 将类数组转为真正的数组
常见的类数组:
arguments
例: function add(){
console.log(arguments);
console.log(Array.from(arguments));
}
add(10,20,30);
元素集合
例: let h3 = document.querySelectorAll("h3");
console.log(h3);
console.log(Array.from(h3));
类似数组的对象
例: var user ={
"0":"aaa",
"1":"bbb",
length:2
};
console.log(user);
console.log(Array.from(user));Array.of() -- 用于将一组值,转换为数组
例: Array.of(3,11,2,5); //[3,11,2,5]Set集合
Set 类似于数组,成员唯一,不可重复,去重
例: var set = new Set();
var arr = [1,2,3,4];
arr.forEach(x=>s.add(x));
属性:
size() -- 返回set的长度
add() -- 添加
delete() -- 删除
has() -- 是否包含
clear() -- 清空9. 函数定义
注意点: 入参不需要定义数据类型
返回值直接return,也无需定义返回类型
格式: function xxxx(xxx,xxx){
xxxxxxxx;
}
箭头函数
var add = (x)=>x;
//等同于
var add = function(x){return x;}
var add =(x)=>{var a; return a+x;}
!!!箭头函数中的this,作用在上一级作用域中例程：
function GetName(name,age){
console.log(name);
console.log(age);
}
function GetName(){
var name = "aa"; return name;
}Promise对象
基本用法
const promise = new Promise(function(resolve,reject){
if("异步成功"){
resolve(value);
}else{
reject(error);
}
});
promise.then(function(value){},function(error){});async 异步函数
function timeout(ms){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log("定时器");
resolve();
},ms)
})
}
async function asyncPrint(ms,value){
await timeout(ms);
console.log(value);
}
asyncPrint(100,"aaaa");10. 对象创建
例程：
var user={
name:"aaa",
age:12,
getName:function(){
consol.log("bbbbbb");
}}属性简写
var name = 'abc';
var user={
name,
age:20
};
console.log(user.name); //'abc'
方法简写:
例: var user={
age:20,
// getAge:function(){
// console.log(this.age);
// }
getAge(){
console.log(this.age);
}
}
动态Key
var id="aaa";
var user={
[id]:"web",
age:13
};11. class语法
-- 不存在变量提升
constructor() -- 构造方法
ES5写法：
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.getName = function(){
console.log(this.name);
}
var p = new Person("abc",20);
p.getName();
ES6写法：
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
getName(){
console.log(this.name);
}
static play(){
console.log("做游戏")；
}
}
Person.play(); -- 静态方法可以直接调用。不可以实例化
Person.aaa = 30;
console.log(Person.aaa); -- 静态属性是在类外部定义，并调用
var p = new Person("bbb",20);
p.getName();
class Student extends Person{
constructor(name,age,schoolName){
//添加重构方法时,必须添加super
super(name,age);
this.schoolName = schoolName;
}
}
var s = new Student("小明"，23);
s.getName();
console.log(s.schoolName);12. Module语法
//导出
export var AAA = 10;
export var BBB = "bbb";
export function getName() {
console.log("----");
}
//导入
//as -- 重命名
import{AAA,BBB,getName as gN} from "./AAA.js"
或者
//导出全部,用点调用
import * as MyHolle from "./AAA";
export default -- 默认导出
-- 一个文件只可以写一个
例: export default function get(){
console.log("---");
}
import a from "./AAA";
a();三、基础函数应用
1、Math对象
Math.abs() -- 返回参数的绝对值
Math.max() -- 返回最大值,若为空,则返回
Math.min() -- 返回最小值,若为空,则返回
Math.floor() -- 返回向下取整数
Math.ceil() -- 返回向上取整数
Math.random() -- 返回0~1之间的随机数
例程：
//获取指定区间的随机数
function GetRandomArbitrary(min,max){
var result = Math.random() * (max-min)+min;
result = Math.floor(result);
return result;
}2、Date 时间对象 -- 单位:毫秒
Date.now(); -- 获取当前时间距离1970年1月1日的时间戳
new Date(); -- 获取当前时间
例: var time = new Date();
time.getTime(); //返回实例距离1970年1月1日的毫秒数
time.getDate(); //返回实例对应的每个月几号
time.getDay(); //返回星期几 (星期日为0,星期一为1)
time.getYear(); //返回距离1900的年数
time.getFullYear(); //返回四位的年份
time.getMonth(); //返回月份(0表示1月,11表示12月)
time.getHours(); //返回小时(0-23)
time.getMilliseconds(); // 返回毫秒(0-999)
time.getMinutes(); //返回分钟(0-59)
time.getSeconds(); //返回秒(0-59)
例程：
//获取本年度剩余天数
function leftDays(){
var today = new Date();
var endYear = new Date(today.getFullYear(),11,31,23,59,59,999);
var msPerDay = 24*60*60*1000;
return Math.round((endYear.getTime()-today.getTime())/msPerDay);
}3、DOM 对象 -- 操作HTML
节点类型：
Document：整个文档数的顶层节点
DocumentType：doctype标签,声明标签
Element： 网页的各种HTML标签
Attribute： 网页元素的属性
Text： 标签之间的文本
Comment： 注释
DocumentFragmen： 文档的片段
document获取元素：
getElementsByTagName(); //根据标签名获取,返回HTMLCollection集合,若没有,则返回空
例:var divs = document.getElementsByTagName("div")[0];
var elementAll = document.getElementsByTagName('*');//获取所有标签getElementsByClassName() -- 根据class获取
getElementsByName() -- 根据Name获取getElementById() -- 根据Id获取
querySelector() -- 通过CSS选择器模式,返回查询到的第一个元素
querySelectorAll() -- 通过CSS选择器模式,返回多个元素
document创建元素：
createElement() -- 创建元素
createTextNode() -- 创建节点内容
createAttribute() -- 创建属性
appendChild() -- 追加元素append() -- 追加内容
例程：
//创建P标签
var text = document.createElement("p");
//创建内容
var content = document.createTextNode("aaaaaa");
//向P标签中追加内容
text.append(content);
//创建id特性
var id = document.createAttribute("id");
//设置id值
id.value = "bbb";
//text设置特性节点
text.setAttributeNode(id);
//获取id="cc"的标签
var newDocument = document.getElementById("cc");
//追加id标签
newDocument.appendChild(text);
Element属性：
id
className
classList
add() -- 添加一个class
remove() -- 移除一个class
contains() -- 检查当前元素是否包含某个class
toggle() -- class存在,则移除; 不存在,则添加
innerHTML
innerText
innerHTML和innerText的区别
innerHTML可以识别标签
innerText会把标签识别成一个字符串
Element获取元素位置：
clientHeight -- 获取元素高度包括padding部分,不包括border,margin
clientWidth -- 获取元素宽度包括padding部分,不包括border,margin
scrollHeight -- 元素总高度,包括padding,溢出部分,不包括border,margin
scrollWidth -- 元素总宽度,包括padding,溢出部分,不包括border,margin
scrollLeft -- 元素的水平滚动条向右滚动的像素数量
scrollTop -- 元素的水平滚动条向下滚动的像素数量
offsetHeight -- 元素的CSS垂直高度(单位像素),包括元素本身的高度、padding、border
offsetWidth -- 元素的CSS水平宽度(单位像素),包括元素本身的高度、padding、border
offsetLeft -- 定位到父级左边界的间距
offsetTop -- 定位到父级上边界的间距
例程：
//获取视口高度(屏幕高度)
document.documentElement.clientHeight
//网页总高度
document.body.clientHeight4、操作CSS
1、直接操作HTML中的style属性
//例程
var box = document.getElementById("box");
box.setAttribute("style","width:200px;height:200px;background:red;");2、配置style属性 -- 推荐
//例程
var box = document.getElementById("box");
box.style.width = "300px";
box.style.height = "300px";
box.style.backgroundColor = "red";3、操作cssText
//例程
var box = document.getElementById("box");
box.style.cssText = "width:200px;height:200px;background:red;";四、事件处理格式
1. HTML事件处理
缺点: HTML和JS没有分开
//例程
<button onclick="clickHandle()">按钮</button>
<script>
function clickHandle(){console.log("点击了按钮");}
</script>2. DOM0级事件处理 -- 推荐
缺点: 相同事件会被覆盖
优点: HTML和JS分开了
//例程
<button id = "btn">按钮</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function clickHandle(){console.log("点击了按钮");}
</script>3. DOM2级事件处理 -- 推荐
优点: HTML和JS分开了
相同事件不会被覆盖
缺点: 写起来麻烦
//例程
<button id = "btn">按钮</button>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click",function clickHandle(){console.log("点击了按钮");});
</script>五、事件处理应用
1. 鼠标事件
click: 按下鼠标时触发
dblclick: 在同一个元素上双击鼠标时触发
mousedown: 按下鼠标时触发
mouseup: 释放鼠标时触发
mousemove: 移动鼠标时触发
mouseenter: 鼠标进入一个节点时触发,进入子节点不会触发
mouseleave: 鼠标离开一个节点时触发,离开父节点不会触发
mouseover: 鼠标进入一个节点时触发,进入子节点会再次触发
mouseout: 鼠标离开一个节点时触发,离开父节点也会触发
wheel: 滚动鼠标的滚轮时触发
//例程
<button id = "btn">鼠标移动</button>
<script>
var btn = document.getElementById("btn");
btn.onmousemove = function clickHandle(){
console.log("点击了按钮");}
</script>2. Event事件对象
Event.target -- 获取当前事件的元素
Event.type -- 返回事件的类型
Event.preventDefault() -- 阻止默认事件(即 不让其跳转页码)
Event.stopPropagation() -- 阻止事件冒泡(即 点击子节点时,父节点不触发)
//例程
<a herf="https:\\www.baidu.com" id = "btn">百度</a>
<script>
var btn = document.getElementById("btn");
btn.onclick = function clickHandle(e){
e.preventDefault(); //阻止页面跳转
console.log("---------");
}
</script>//例程
<a herf="https:\\www.baidu.com" id = "btn">百度</a>
<script>
var btn = document.getElementById("btn");
btn.onclick = function clickHandle(e){
e.preventDefault(); //阻止页面跳转
console.log("---------");
}
</script>3. 键盘事件
keydown: 键盘按下时触发
keypress: 按下有值的建时触发,按下Ctrl、Alt、Shift、Meta等这样无值的键不触发。
对于有值的键，按下时先触发keydown事件，再触发此事件
keyup：松开键盘时触发该事件
//例程
<input type="text" id="user">
<script>
var user = document.getElementById("user");
user.onkeyup = function clickHandle(e){
console.log(e.target.value); //获取输入的值
console.log(e.keyCode); //获取按键的唯一标识
}
</script>4. 表单事件
事件代理（事件委托）
由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数
统一处理多个子元素的事件。这种方法叫做事件的代理
（即 在父元素中写子元素事件）
input事件 -- 当<input><select><textarea>的值发生变化时触发(包括复选框和单选框)
select事件 -- 当<input><textarea>里面选中文本时触发
change事件 -- 当<input><select><textarea>的值发生变化时触发。它与input事件的最大不 同，就是不会连续触发，只有当全部修改完成时才会触发
reset事件 -- 表单重置时触发
submit事件 -- 表单提交时触发
//例程
<ul id = "list">
<li>列表1</li>
<li>列表2</li>
<p>P标签</p>
</ul>
<script>
var list = document.getElementById("list");
list.addEventListener("click",function(event){
if(event.target.tagName.toLowerCase() === "li")
{
console.log(event.target.innerHTML);
}
})
</script>5. 定时器
setTimeout()
格式：
var timerId = setTimeout(fun|code,delay);
fun|code -- 将要推迟执行的函数名或者一段代码
delay -- 推迟执行的毫秒数
注: 定时器中的this指向全局,若向指局部,需添加中间量
//例程
<script>
setTimeout(function(){
console.log("3秒后执行")
}, 3000);
</script>clearTimeout() -- 取消定时器
//例程
clearTimeout(timerId);setInterval() -- 间隔执行
//例程
<script>
var timerId = setInterval(fun|code,delay);
clearInterval(timerId); -- 清除间隔执行
</script>
如有错误，烦请批评指正
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
