文章目录
参考教程;https://www.bilibili.com/video/BV1ux411d75J
一、js基础
1、概念
1、学后端的必须会js
2、javaScript是一种运行在客户端的脚本语言,不需要编译,运行过程中由js解释器逐行来进行解释并执行。
javaScript解析器在运行javaScript代码的时候分为两步:预解析和代码执行。
3、现在也可以基于node.js技术进行服务器端编程
4、浏览器分成两个部分:渲染引擎和js引擎
5、js组成
6、注释快捷键
单行注释 ctrl+/
多行注释 shift+alt+a
2、基本使用
2.1弹窗
写js两种方法:
①
html内写:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script写的位置可以在head内,也可以在body内的最后-->
<script>
alert('hello world');
</script>
</head>
<body>
<!--<script>
alert('hello world');
</script>
-->
</body>
</html>
②
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/js.js"></script>
</head>
<body>
</body>
</html>
js:
alert('hello world')
两个效果一样:
2.2基本语法
2.2.1输入输出三种方式
alert
console.log()
prompt(‘’);//浏览器弹出输入框,用户可以输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// javascript严格区分大小写
// 1.定义变量 变量类型 变量名 = 变量值;
var num = 1;
alert(num);
// 2.条件控制
if(2>1){
alert('true');
}
/* 在浏览器控制台打印变量,相当于java的system.out.println()
console.log(num)
*/
</script>
</head>
<body>
</body>
</html>
2.2.2数字型Number
2.2.3字符串转义符
2.2.4数据转换
1、转换成字符型
2、转换成数字型
3、转换成布尔型、
2.3浏览器控制台使用
蓝色:数字型的
黑色:字符型的
深蓝:布尔型
灰色:undefined,null
2.4运算符
1)算术运算符:+,-,*,/,%
2)比较运算符:>,<,=,>=,<=,, != ,=,!==
3)逻辑运算符:逻辑与,逻辑或,逻辑非,短路运算(逻辑中断)
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续计算运算右边的表达式。
如
console.log(123&&456);
//结果为456
console.log(0||345||3+2);
//结果为345
//逻辑中断影响
var num=0;
console.log(123||num++);//123
console.log(num);//0
4)赋值运算符
=,+=,-=,*=,/=,%=
5)运算符优先级
2.5流程控制分支
顺序结构
分支结构(if 、else if 、else、三元表达式:条件表达式?表达式1:表达式2、switch case)
switch case中的匹配值是全等,必须值和数据类型一致才可以,当case里面没有break,则不会退出switch,是继续执行下一个case
循环结构
2.6断点调试
F12开发模式,Sources查看并进行断点,
点击右边的向下箭头(F11),可以发现断点后的执行情况,并在Console打印出对应已执行代码的结果
2.7数组创建
var a = new Array();
var a = [];
修改数组的长度有两种方法:
1)
var arr = ['red','green','blue'];
arr.length=5;
//这时arr[3],arr[4]值是undefined
var arr1 = ['red','green','r'];
arr1[3] = 'pink';
arr1[4] = 'hotpink';
arr1[5] = 'yellow';
2.8函数实参形参
实参不确定,这个时候函数形参怎么写呢?
使用arguments
function fn(){
console.log(arguments);
}
fn(1,2,3);
打印在控制台的数据是:
2.9生成对象的三种方法
//对象3种创建方法
//1)var obj={};
//2)var obj = new Object();
/* obj.username='ii';
obj.sayhi= function(){
3)构造函数封装对象
} */
var obj={
username:'aa',
age:18,
sex:'nan',
sayhi:function(){
console.log('hi');
}
}
obj.sayhi();
console.log(obj.username);
console.log(obj['username']);
//构造函数
function Star(uname,age,sex){
this.uname = uname;
this.age = age;
this.sex = sex;
this.sing = function(){
console.log('111');
}
}
var ldh = new Star('yhx',18,'nan');//调用函数返回的是对象
ldh.sing();
遍历对象
for(var k in ldh){
console.log(ldh[k]);
}
对象分三种:自定义对象,内置对象,浏览器对象
内置对象是js语言自带的一些对象,供开发者使用,并且提供了一些必要功能属性,使用MDN文档
对对象进行增删改查,其中删是使用delete方法
delete 对象名.属性名
2.10Date时间戳
①倒计时案例
为了想让倒计时效果在页面上显示出来,需要通过document.querSelector('#hour)…,来获取时分秒对应的盒子,再将算出来的时分秒通过innerHtml写进去盒子里面,将写的总代码封装在getCounTime函数中,在使用定时器。
setInterval(getCountTime,1000)
但是页面打开时,会出出现页面一加载,倒计时会出现空白,这时在使用定时器之前先调用一下getCounTime
2.11数组
常用方法:push、pop、unshift、shift、sort、reserves、indexOf、lastIndexOf,toString、join(‘分隔符’)、
注意数组的排序
var a = [1,2,3,45,2,43,56,10];
console.log(a.sort());
发现排序是按照从左往右一位一位的比较的,所以要想正确排序,需要更改代码为“
console.log(a.sort(
/* function(a,b){
return a-b;//从笑到大
} */
function(a,b){
return b-a;//从大到小
}
));
2.12字符串
indexOf、lastIndexOf、charAt、charCodeAt、contact、截取字符串(substr、slice、substring)、replace(只替换一个)、split、toUpperCase、toLowerCase
二、进阶js、API
不写分号
1、输入输出语句
//输入输出
document.write('<h1>yhx i love you</h1>')
console.log('yhx')
prompt('请输入生日')
2、var,let
var
1)可以先使用在声明
2)声明过的变量可以重复声明
3)变量提升,全局变量、没有块级作用域等
3、模板字符串
let age=18
document.write(`我今年${age}岁了`)
4、隐式转换
5、函数
5.1具名函数,
5.2匿名函数
匿名函数:
let n = function(){
......
}
立即执行函数(分号必须写
①
(function(x,y){
console.log(x+y)
})(4,6);
②
(function(x,y){
}(6,4));
6、准换为布尔型
``、0、undefined、null、false、NaN转换为布尔值后都是false,其余则为true
7、DOM、BOM
7.1DOM
1)概念
操作页面内容
DOM树:
1)以树状结构直观地表现出来,称之文档树、DOM树。
2)文档树直观地体现了标签与标签之间地关系
2)获取DOM元素
<1>根据css选择器,选择匹配的第一个元素
div,#nav(id的)
ul li:first-child等,没有匹配成功返回Null
document.querySelector('div')
<2>选择所有的指定css选择器
document.querySelectorAll('ul li')
获取的值是一个伪数组,不能直接对其样式修改,只能通过for遍历的方式一次给里面的元素做修改,且伪数组没有pop()、push()功能,
3)操作元素内容
//修改文字内容,innerText不解析标签,修改成<strong>111</strong>,并不会改变样式
对象.innerText 属性
//直接 对象.innerText 是打印出来了,没修改
//解析标签
对象.innerHTML 属性
4)修改样式
<1>通过style修改样式
<2>通过className修改样式,当想要原class还想要新加的样式,需要通过类似:原类名 新加类名 的形式赋值给className
<3>追加以前的类名
获取的元素对象.classList.add('新加的类名')
删除类
获取的元素对象.classList.remove('需要删除的类名')
切换类(有就删掉,没有就加上)
获取的元素对象.classList.toggle('需要判断的类名')
轮播图案例
5)属性
标准属性
自定义属性
data-自定义属性
6)定时器
间歇函数
1、开启、关闭定时器
定时器返回的是一个id数字,即第几个定时器
//setInterval(函数,间隔时间ms)
let n = setInterval(function(){
console.log('11111')
},1000)
clearInterval(n)
7)事件监听
事件对象:(有事件触发时的相关信息,在事件绑定的回调函数的第一个参数就是事件对象)
元素.addEventListener('click',function(e){})
常见的属性:
e.key//这样就知道按了什么键
8)评论案例
发布完评论后,文本域清空
当发布的评论最左边和最右边有空格时,使用str.trim()去除空格,如果输入的只有空格,点击发布也要恢复初始输入的状态,有placeholder,统计字数赋值为0/200字
9)环境对象
this代表当前函数运行时所处的环境。
非严格模式下,普通函数this指向window
事件监听指向调用者
箭头函数没有this
this能改变指向的方向。
10)回调函数
A作为参数传递给函数B,A称为回调函数
如定时器函数setInterval,addEventListener
11)tab栏切换
.activee{
color: pink;
}
.atw{
display: flex;
margin-left:40px
}
.pw{
width: 350px;
height: 350px;
background-color: aliceblue;
border-radius: 10px;
}
.pw .item{
display: none;
}
.pw .item.activeee{
display: block;
}
<div style="width: 400px;height: 400px;border: 1px solid gray;box-shadow: 5px 5px rgb(240, 237, 237);border-radius: 10px;">
<h3 style="margin-left: 10px;">每日特价</h3>
<ul class="atw">
<li style="list-style: none;margin-left:40px"><a href="" class="activee">11</a></li>
<li style="list-style: none;margin-left:40px"><a href="">22</a></li>
<li style="list-style: none;margin-left:40px"><a href="">33</a></li>
</ul>
<div class="pw">
<div class="item activeee"><img src="images/1.jpg"></div>
<div class="item"><img src="images/2.jpg"></div>
<div class="item"><img src="images/3.jpg"></div>
</div>
let lii = document.querySelectorAll('.atw li a')
for(let i =0;i<lii.length;i++){
lii[i].addEventListener('mouseenter',function(){
console.log('11');
document.querySelector('.atw .activee').classList.remove('activee')
this.classList.add('activee')
//盒子
document.querySelector('.pw .activeee').classList.remove('activeee')
console.log(document.querySelector('.pw'));
document.querySelector(`.pw .item:nth-child(${i+1})`).classList.add('activeee')
//img.classList.add('activee')
let t = document.querySelector(`.pw .item:nth-child(${i+1})`)
console.log(t);
})
}
12)表单全选反选
查看小复选框是否都全部选了,使用css复选框选择器input:checked来检查小复选框勾选的个数,等于小复选框的总数,则勾上全选。
13)事件流
捕获阶段、冒泡阶段
①事件捕获
②事件冒泡
③阻止冒泡
改方法阻止事件流动传播,不光冒泡阶段,捕获阶段也有效,使用事件对象
④阻止默认行为:
如不让你提交,不让你跳转
e.preventDefault()
⑤解绑事件:
①将函数赋值为Null
btn.onclick=null
②使用addEventListener中的匿名function无法解绑,必须使用下列的注册格式,才能使用removeEventListener()解绑事件
fn = function(){}
btn.addEventListener('click',fn)
btn.removeEventListener('click',fn)
14)事件委托
15)其他事件
①页面加载事件
//等待所有资源加载完才会执行
window.addEventLisener('load',function(){})
//无需等待样式表、图像等完全加载,监听页面DOM加载完毕
document.addEventListener('DOMContentLoaded',function(){
//const btn = docu
})
②元素滚动事件
想要找到html标签、
//document.documentElement
window.addEventListener('srcoll',function(){
const n = document.documentElement.scrollTop
if(n>=100){
div.style.display = 'block'
}else{
div.style.display = 'none'
}
}
③页面尺寸事件
16)元素尺寸与位置
当需要处理的盒子的所有父DOM没有定位,如position:relaive时,就可获得它距离窗口文档的最上方/最左方的距离
元素尺寸与位置:
相对于可视区的位置
电梯导航案例:
想要页面有滚动
html{
scroll-behavior:smooth;
}
17)节点操作
①查找DOM节点
<1>查找父节点
已知孩子节点
找父节点
baby.parentNode
找爷爷节点
baby.parentNode.parentNode
如果找不到最近一级的父节点,返回Null
例子,关闭广告
<2>查找子节点
childNodes//获得所有子节点,包括文本节点(空格、换行)、注释节点等
父元素.children//仅获得所有元素节点,返回的还是一个伪数组
<3>兄弟节点
②新增节点
渲染列表:
克隆节点:
③删除节点
18)M端事件
19)js插件
https://www.swiper.com…cn/
https://www.swiper.com.cn/demo/index.html
https://www.swiper.com.cn/usage/index.html
api:https://www.swiper.com.cn/api/index.html
注意:多个swiper同时使用的时候,类名需要注意区分
20)学生信息表案例
7.2window对象
7.2.1BOM
7.2.2定时器-延时函数
7.2.3js执行机制
7.2.4location对象
一般单页面应用会出现,a标签中的href就是会使location的hash结果变。
刷新网页:
f5
ctrl+f5
①5s后跳转页面
7.2.5navigator对象
跳转移动端页面–
7.2.6histroy对象
7.3本地存储
7.3.1本地存储介绍
例子,增删改查
本地存储只能存储字符串型
localStorage永久存储在本地,除非手动删除,否则关闭页面也会存在
7.3.2本地存储分类
7.3.3存储复杂数据类型
7.4综合案例
数组map和join方法
学生就业统计表
//学生信息表
const form = document.querySelector('form')
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const gender = document.querySelector('.gender')
const salary = document.querySelector('.salary')
const city = document.querySelector('.city')
const tbody = document.querySelector('tbody')
const items = document.querySelectorAll('[name]')
// localStorage.setItem('data',JSON.stringify(children))
arr = JSON.parse(localStorage.getItem('data'))||[]
render()
// console.log(info);
form.addEventListener('submit',function(e){
e.preventDefault()
//第一种方法
/* for(let i =0;i<items.length;i++){
if(items[i].value===''){
return alert('输入内容不能为空')
}
} */
//第二种方法,非空判断
if(!uname.value||!age.value||!salary.value){
return alert('输入内容不能为空')
}
arr.push(
{
xuehao:arr.length+1,
uname:uname.value,
age:age.value,
gender:gender.value,
salary:salary.value,
city:city.value,
caozuo:'删除'
}
)
render()
this.reset()
localStorage.setItem('data',JSON.stringify(arr))
})
//渲染函数
function render(){
const trArr = arr.map(function(ele,index){
return `
<tr>
<td>${index+1}</td>
<td>${ele.uname}</td>
<td>${ele.age}</td>
<td>${ele.gender}</td>
<td>${ele.salary}</td>
<td>${ele.city}</td>
<td><a href="javascript:" data-id=${index}>删除</a></td>
</tr>
`
})
tbody.innerHTML = trArr.join('')
}
8、正则表达式
8.1语法
8.2元字符
①边界符
console.log('字符串正则表达式匹配');
console.log(/^二哈/.test('二严'));//false
console.log(/^二哈/.test('二哈'));//true
console.log(/^哈/.test('哈哈'));//true
console.log(/^哈$/.test('哈哈'));//false
console.log(/^哈$/.test('哈'));//true
②量词
// 量词
console.log('量词');
console.log(/^哈*$/.test('哈哈哈哈'));//true
console.log(/^哈*$/.test(''));//true
console.log(/^哈+$/.test('哈哈哈哈'));//true
console.log(/^哈+$/.test(''));//false
console.log(/^哈{4}$/.test('哈哈哈哈'));//true
console.log(/^哈{4}$/.test('哈哈哈哈哈'));//false
console.log(/^哈{4,}$/.test('哈哈哈'));//false
console.log(/^哈{4,}$/.test('哈哈哈哈哈'));//true
console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈'));//false
console.log(/^哈{4,6}$/.test('哈哈哈哈哈'));//true
③字符类
(2).匹配除换行符之外的任何单个字符
(3)
④用户名验证案例
8.3修饰符
const str = 'java是一门编程语言,学完JAVA工资很高java'
const re = str.replace(/java/g,'前端')
console.log('re----'+re)//re----前端是一门编程语言,学完JAVA工资很高前端
const re2 = str.replace(/java/gi,'前端')
console.log('re2-----'+re)//re2-----前端是一门编程语言,学完JAVA工资很高前端
总结
综合案例在续篇