1.基本知识
1、注释结束符
单行注释 //
多行注释 /* 注释内容 */
以分号为一个语句结束,但可以不加(推荐不加)
2、输入输出语法
输出:
document.write('要输出的内容'):向body页面中添加内容,可以是标签
alert('内容'): 弹出框
console.log('内容') 控制台输出
输入:
prompt('提示信息'):弹出框输入
3、变量和常量
1、变量
不用声明也行,也不要指明数据类型(同 python)
声明变量的方式有两种:let 和 var (推荐 let )
例如:let name = 'lhx'
`${ 变量名 }`:模板表达式:
for(i = 1; i < 10; i++){
console.log(`第${i}次循环`)
} //控制台依次打印:第 1~9 次循环
let与var区别:
let和var的区别体现在作用域上。var的作用域被规定为一个函数作用域,而let则被规定为块作用域,块作用域要比函数作用域小一些,但是如果两者既没在函数中,也没在块作用域中定义,那么两者都属于全局作用域。
2、常量
使用 const 声明的变量称为“常量”。
例如:const PI = 3.14
4、数据类型
1、数值类型:整数、小数、正数、负数
2、字符串类型:单引号、双引号或反引号包裹的都是字符串,推荐单引号。
3、布尔类型:true,false
4、undefined:所有类型的空值都是 undefined
注:隐式转换同java。
数值转字符串:toString( 值 )
字符串转数值:Number( 值 )
typeof(值):返回值的数据类型
toString(12): 把数字12转换为字符串类型
5、运算符
1、算数运算符![](https://i-blog.csdnimg.cn/blog_migrate/3327204eee8a1ba6f9257fd352251cb3.png)
注意:在计算失败时,显示的结果是 NaN (not a number)
2、赋值运算符![](https://i-blog.csdnimg.cn/blog_migrate/eba1259a621f476a1400de2bc7bdff59.png)
3、自增和自减运算符
4、比较运算符
5、逻辑运算符
逻辑运算符优先级: !> && > ||
总结:同Java
6、分支语句
1、if 分支
语法:
if (条件表达式) {
// 满足条件要执行的语句
}else if (条件表达式){
// 满足条件要执行的语句
} else{
// 满足条件要执行的语句
}
2、三元运算符
语法:
条件 ? 表达式1 : 表达式2
例如:
1=1 ? 'yes' : 'no' //返回yes
1=2 ? 'yes' : 'no' //返回no
3、switch语句
注意:
1. switch case语句一般用于等值判断, if适合于区间判断
2. switchcase一般需要配合break关键字使用 没有break会造成case穿透
3. if 多分支语句开发要比switch更重要,使用也更多
语法:
switch (数值/表达式) {
case 值1:
代码1
break
case 值2:
代码2
break
...
default:
代码n
}
7、断点调试![](https://i-blog.csdnimg.cn/blog_migrate/4e995f76ab8d3a5b2b5ba51856837a8f.png)
8、循环语句
1.while循环
while (条件表达式) {
// 循环体
}
2.for 循环(重点)
for(i = 1; i < 10; i++){ //条件
console.log(i) //循环语句体
}
3、循环控制关键字
break 中止整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用(提高效率)
continue 中止本次循环,一般用于排除或者跳过某一个选项的时候
9、数组
语法:使用 [] 来定义一个数组
let name = ['alice', 'Bob', 'Tom', 'lisa']
可通过 length 属性获取数组长度(同java)
数组常用方法:
push( v1, v2 ... ): 动态向数组的尾部添加元素
unshit( v1, v2 ... ): 动态向数组头部添加一个单元
pop(): 删除最后一个单元
shift(): 删除第一个单元
splice( index, length ): 删除指定索引后的length个元素
isArray( 数组 ):判断一个对象是不是数组
map( i => lambda表达式 ):返回一个新数组(同scala中的 map)。i 表示当前索引
filter( i => 过滤条件 ): 过滤器。同java
every( i => 条件 ): 全部满足条件返回true
some( i => 条件 ): 任意个 i 满足条件返回true
slice( start_index, end_index ): 截取,左闭右开;-1表示最后一个元素
indexOf( index ): 获取指定索引值
includes( 值 ):判断是否包含指定值
concat( 数组 ):连接两个数组,调用者在前,参数在后
join( str ): 添加分隔符,并把数组转换为String类型
split( str ): 分割
forEach( i => lambda表达式 )
sort():升序
sort( lambda表达式 ):同 java 排序
reverse(): 反转
find( i => 表达式 ):返回通过测试(函数内判断)的数组的第一个元素的值
10、函数
常规函数
定义语法:
function 函数名(参数列表) {
//函数体
}
调用:
函数名(参数列表)
参数:
通过向函数传递参数,可以让函数更加灵活多变,参数可以理解成是一个变量。
1. 声明(定义)函数时的形参没有数量限制,当有多个形参时使用 `,` 分隔
2. 调用函数传递的实参要与形参的顺序一致
返回值:return
1. 在函数体中使用return 关键字能将内部的执行结果交给函数外部使用
2. 函数内部只能出现1 次 return,并且 return 下一行代码不会再被执行,所以return 后面的数据不要换行写
3. return会立即结束当前函数
4. 函数可以没有return,这种情况默认返回值为 undefined
匿名函数
函数可以分为具名函数和匿名函数
匿名函数:没有名字的函数,无法直接使用。
函数表达式
// 声明
let fn = function() {
console.log('函数表达式')
}
// 调用
fn()
立即执行函数
(function(){ xxx })();
(function(){xxxx}());
无需调用,立即执行,其实本质已经调用了(链式调用法则)
多个立即执行函数之间用分号隔开(必要)
11、对象
注:属性和方法之间用逗号,隔开。
// 方法是依附在对象上的函数
let person = {
name: '小红', //用逗号隔开
age: 18,
// 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
singing: function () {
console.log('两只老虎,两只老虎,跑的快,跑的快...')
},
run: function () {
console.log('我跑的非常快...')
}
}
可动态追加属性和方法
// 声明一个空的对象(没有任何属性,也没有任何方法)
let user = {}
// 动态追加属性
user.name = '小明'
user.['age'] = 18
// 动态添加方法
user.move = function () {
console.log('移动一点距离...')
}
无论是属性或是方法,同一个对象中出现名称一样的,后面的会覆盖前面的
除以上几点外,其余同 java。
2、Web API
1、DOM
1、获取DOM元素
document.querySelector('标签')
document.querySelector('.css')//通过css类名需要加.
document.querySelector('#id')//通过id获取加#
document.querySelector('ul li:first-child')//获取ul的第一个li
document.querySelector('ul li:nth-child(n)')//获取ul的第n个li
//获取多个
document.querySelectAll(...)
获取整个body标签,可以直接用 document.body
以下方法也行,但逐渐不在使用
document.getElementById('id')
document.getElementsByClassName('css')
document.getElementsByTagName('tag')
2、操作元素内容
对象.innerText 属性: 获取元素文本内容,不解析标签
对象.innerHTML 属性:获取元素文本内容,会解析标签(推荐)
3、操作元素样式属性
1、操作元素属性
语法:对象.属性 = 值
2、操作元素样式
1、通过style属性操作css
对象.style.样式属性 = '值'
注:这里值必须加引号,数值类型也要加引号。
多组单词的样式属性采用小驼峰命名。例如: a.style.backgroundColor = 'pink'
2、操作类名( className ) 操作CSS
对象.className = 'css类名1 css类名2 ...'
#直接修改css类名,可多个(css要已存在才行)
3、通过 classList 操作CSS(推荐)
追加和删除类名(css要已存在)
对象.classList.add('类名') #追加;类名不加点,并且是字符串
对象.classList.remove('类名') #删除
对象.classList.toggle('类名') #切换(有就删掉,没有就加上)
4、操作表单元素属性
1、输入框
属性:
value:获取表单中的值(一般双标签用innerHTML,单标签用value)
type:获取表单类型
2、复选框 ( type=' checkbox ' name=' group1 ')。根据name分组
属性:
checked: 获取复选框是否勾选,值为 true 和 false
disabled: 是否可勾选,值为 true 和 false
5、自定义属性
强制推荐 data- 开头
属性:
dataset: 获取所有自定义属性,存到集合中。
6、定时器 -- 间歇函数(异步)
setInterval( 函数,间隔时间毫秒 ):开启定时器;返回值是变量名
clearInterval(变量名):关闭定时器
注:此处调用函数可使用匿名函数。使用正常函数不要加小括号。
7、事件监听(鼠键事件)
1、绑定事件
元素对象.addEventLitener('事件类型', 要执行的函数)
事件监听三要素:
- 事件源:那个dom元素被事件触发了,要获取dom元素
- 事件类型:用什么方式触发,比如:鼠键事件
- 事件调用的函数:要做什么事
2、事件类型
3、事件对象
事件触发的具体信息,事件要执行的函数的第一个参数就是事件对象,一般用 e / event 接收
元素.addEventListener('click', function(e){//此处e就是事件对象
//事件对象包含触发事件的全部信息
})
常用属性:
type: 获取当前事件类型
clientX / clientY: 获取光标相对于浏览器可见窗口左上角的位置
offsetX / offsetY: 获取光标相对于DOM元素左上角的位置
key:用户按下的键盘的值(keycode已经被淘汰)
target: 保存事件元素的全部内容
4、事件流
事件捕获:父到子
事件冒泡:子到父
阻止冒泡:事件对象.stopPropagation()
a.addEventListener('click', function(e){
e.stopPropagation()
//其他语句
})
5、解绑事件
元素.remveEventListener( '事件类型',执行的函数名 )
注:匿名函数无法解绑;执行的函数名不用加小括号。
6、阻止默认行为
e.preventDefault()
7、其他事件
1、页面加载事件
事件名:load
DOMContentLoad
window.addEventListener('load', function(){
//整个页面加载完才会执行回调函数
})
document.addEventListener('DOMContentLoad', function(){
//DOM元素加载完才会执行回调函数
})
2、元素滚动事件
事件名:scroll
经常给 window 加该事件
属性:(可读写,赋值数字不带单位)
scrollLeft:页面向左滑动的像素
scrollTop: 页面向上滑动的像素
注:获取最大html标签语句
document.documentElement
3、页面尺寸事件
事件名:resize(窗口尺寸变化就触发回调函数)
属性:
clientWidth: 元素宽度(不包含外边框)
clientHight: 元素高度
8、手机端事件
8、元素的尺寸和位置(都是属性值)
获取宽高:(包含外边框)
offsetWidth:获取宽
offsetHeight:获取高
获取位置:( 只读。获取最近带有定位的父元素距离,父级元素没有定位,默认以整个界面为边界 )
offsetLeft:获取据左边界距离
offsetTop:获取距离顶部边界的距离
总结:
9、时间对象(需要实例化)
1、实例化(new)
//获取当前时间
const date = new Date()//date接收当前日期及时间
console.log(date)//输出Wed Aug 16 2023 20:06:20 GMT+0800 (中国标准时间)
//指定时间,传入的字符串是什么时间,就转换为时间类型
//还可以传入时间戳
const date1 = new Date('2000-1-1 08:00:00')
console.log(date1)//输出Sat Jan 01 2000 08:00:00 GMT+0800 (中国标准时间)
2、日期对象方法(都是方法,直接点调用)
getFullYear() 获取年份
getMonth() 获取月份(0-11,结果月份少一,加一才是正确月份)
getDate() 获取月份中的每一天
getDay() 获取星期几(0-6,周日是0)
getHours() 获取小时(0-23)
getMinutes() 获取分钟(0-59)
getSeconds() 获取秒(0-59)
getTime() 获取时间戳
3、时间戳
什么是时间戳:
是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
使用场景:倒计时
具体做法:
将来的时间戳 - 现在的时间戳 = 剩余的时间毫秒数
获取时间戳的方法(三种):
getTime()//时间对象的方法
+new Date()
+new Date('2099-1-1 0:0:0')//返回2099-1-1 0:0:0的时间戳
Date.now()(无需实例化,但只能返回当前时间的时间戳)
10、节点操作
1、获取节点
属性:
parentNode:获取父节点
children: 获取子节点(仅获取元素节点,推荐)
childNodes: 获取子节点(不推荐)
nextElementSibling: 获取上一个兄弟
previousElementSibling: 获取下一个兄弟
2、增加节点
创建一个新节点,然后把新阶段放到指定元素中
//创建节点
document.createElement('标签名')
例:document.createElement('div')
//追加节点
父元素.appendChild(要插入的元素)//默认插入到最后
父元素.insertBefore(要插入的元素,在哪个元素前面)
3、克隆节点
节点.clone(bool) //克隆一份调用节点
4、删除节点
父节点.removeChild(要删除的元素)
2、BOM
浏览器对象模型
1、定时器 -- 延时函数(只执行一次)
setTimeout(回调函数,等待的毫秒)
JS执行机制
先执行同步任务,再执行异步任务
2、location对象
属性:
href: 利用js的方式去跳转页面
search:返回 ul 地址?后的内容
hash:获取 ul 地址 # 后的内容
//自动跳转到哔哩哔哩
location.href='http://www.bilibili.com'
方法:
reload(): 刷新页面
location.reload() //刷新页面
3、navigation对象
主要获取浏览器信息
略
4、history对象
方法:
back(): 返回上一个网页
forward(): 前进下一个网页
go(参数):参数1表示前进一步,-1表示后退一步
5、本地存储
1、localStorage
永久存储,页面关闭也会存在
语法:(增删改查)
//增和改
localStorage.setItem(k, v)//键值对存储
//查
localStorage.getItem(k)
//删
localStorage.removeItem(k)
//其他
localStorage.key(value)//获取指定value的key
localStorage.length://获取本地共有几个数据(属性)
注:只能存字符串类型,存储的数字等会自动转为字符串
存储复杂(对象)类型需要转为JSON后再存储
JSON.stringify(obj) //把obj对象转换为JSON类型
//之后就能存储
localStorage.setItem(k, JSON.stringify(obj))
2、sessionStorage
只在本次会话保存,退出页面或退出浏览器清除所有数据
用法同 localStorage