一：JS数据类型之布尔值(boolean)

1.分类
  • 切记：必须小写
  • true
  • false：0 空字符串 undefined NaN null
Boolean(0)
false
Boolean('')
false
Boolean(NaN)
false
Boolean(undefined)
false
Boolean(null)
false
2.null和undefined的区别
  • 1.null:表示值为空，指定和清空一个变量的时候可以使用 age = null
  • 2.undefined:表示从未被定义过，当声明一个变量且未初始化时，该变量的默认值是undefined

二：对象

1.什么是对象？

JS中所有的事物都可以是对象，且允许自定义对象

对象是带有特殊属性和方法的数据类型

2. 对象之自定义对象

自定义对象方法1：

let a = new Object;

自定义对象方法2：

let b = {};

自定义对象的取值

let s1 = {'usernane':'xie', 'age':18}
undefined
s1
{usernane: 'xie', age: 18}
s1.usernane
'xie'
s1.age
18

三：数组

1.定义：

使用单独的变量名来储存一系列值，相当于python中的列表

var l1 = [1,2,3,4,5]
console.log(l1[1])
2
2.数组的常用方法

方法

功能

示例

.length

数组的长度

l1.length

.push

尾部追加

l2.push(1000)

.pop

获取尾部元素

l2.pop()

.unshift

头部插入

l2.unshift(200)

.shift（）

移除头部元素

l2.shift()

.slice()

切片操作，顾头不顾尾

l1.slice(1,3)

.reverse()

反转

l1.reverse()

.join()

将数组元素连接成字符串

l1.join()

.concat()

连接数组

l1.concat(l2)

.sort()

排序

l1.sort()

.forEach()

将数组的每个元素传递给回调函数

.splice()

删除元素，并向数组添加新元素

l2.splice(0,1,1000)

.map()

返回一个数组元素调用函数处理后的值的新数组

四：运算符

1.算数运算符
+ - * / % ++ --

var x=10
var res1=x++   先赋值，后自增
var res2=++x   先自增，后赋值
2.比较运算符
> >= < <= != == === !==

==  弱等于（自动转换成相同的数据类型）
=== 强等于
3.逻辑运算符
&&      ||     !
and     or     not
4.赋值运算符
= += -= *= /=

五：流程控制

1.if else if else
if (条件1){
    条件1成立之后执行的代码
}else if(条件2){
    条件2成立之后执行的代码
}else{
    条件不成立之后执行的代码
}
2.switch
var day=new Date().getDay();
switch (day) {
    case 0:
    console.log('Sunday');
    break;
    case 1:
    console.log('Monday');
    break;
    case 2:
    console.log('Tuesday');
    break;
    default:
    console.log('暂时不提供该定义')
}
3.for循环
for(let i=1;i<100;i++){
    console.log(i)
}
# 小练习:打印下列数组中所有的值
l1 = [1,2,3,4,5,6,7,8,9]
for(let i=0;i<l1.length;i++){
    console.log(l1[i])
}
4.while循环
let i = 0;
while(i<10){
    console.log(i);
    i++;
}

六：函数

1.语法结构
function func(形参){
    函数体代码
    return 返回值
}
2.参数
  • 参数个数不需要一一对应 如果向限制参数个数需要使用关键字arguments
function func(a,b){
    if (arguments===2){
        console.log(a,b)
    }else{
        console.log('参数没有意义对应')
    }
}
3.匿名函数
function(a,b) {
    return a-b;
}
4.箭头函数
var f = v => v;
等同于
var function f(v){
    return v;
}


var f = () => 5;
等同于
var f=function(){
    return 5;
}

var sum = (num1,num2) => num1 + num2;
等同于
var sum = function(num1, num2){
    return num1+num2;
}

七：JS内置对象

类似于python中的内置函数或者内置模块

内置对象

功能

使用

Date

日期对象

JSON

序列化对象

JSON.stringify()序列化，JSON.parse()反序列化

RegExp

正则对象

var reg2 = /1

Error

错误对象

八（重点）：BOM和DOM操作

1.BOM：浏览器对象模型

通过写JS代码和浏览器交互

BOM操作

功能

示例或者注释

window.open()

打开一个新的浏览器窗口

window.open(‘https://www.baidu.com’)

window.close()

关闭浏览器窗口

关闭的必须是自己创建的页面

window.navigator.userAgent()

用来区分设备和浏览器

window.history.forward()

相当于浏览器中的回到下一个页面

window.history.back()

相当于浏览器中的回到上一个页面

window.location.href

查看当前网页的地址

window.location.href = 新网址

跳转到新网址的前端

window.location.reload()

刷新当前页面

alert()

警告框

confirm()

确认框

prompt()

提示框

定时器相关操作（重点）

function func01(){
    alert(123)
}
// 设置定时操作
let t = setTimeout(func01, 3000)
// 取消定时操作
clearTimeout(t)
let s1=null
function showMsg() {
    alert(333)
}
// 每隔3秒执行一次
s1.setInterval(fun1, 3000)
}
function clearMission() {
    clearInterval(s1)  // 取消
}
setTimeout(clearMission, 9000)
showMsg()
2.DOM:文档对象模型

通过写JS代码可以跟html交互

1.查找标签的方法

//id值查找
document.getElementById()
//class值查找
document.getElementByClass()
//标签名查找
document.getElementByTagName()

2.节点

就相当于是css中的标签

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

3.节点操作

  • 1.创建节点
let XXXEle = document.createElement('标签名')
let divEle=document.createElement('div')
  • 2.属性操作
节点.属性    只能设置默认属性
divEle.id = 'd1'
aEle.innerText = '啦啦啦'
divEle.append(aEle)   把标签加到div标签中去
节点.setAttribute()   默认属性，自定义属性都能设置
  • 3.文本操作
divEle.innerHTML    html标签格式生效
divELe.innerText    html标签格式不生效
divEle.innerHTML = '<h1>态度</h1>'
divEle.innerText = '<h1>态度</h1>'
  1. a-zA-Z ↩︎