TS与JS个人笔记

打印

console.log("hello")

类型

number     //数值
string     //字符串
boolean    //布尔

随机数

Math.random();        // 返回随机数
Math.floor(Math.random() * 101);  // 返回 0 至 100 之间的数
Math.floor(Math.random() * 100) + 1;  // 返回 1 至 100 之间的数
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
}
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
}

循环

for (let i = 0; i < 10; i++) { //i等于0；i小于10时候执行+1
      //内容
        }

三元运算符

let result = num > 0 ? "大于 0" : "小于 0，或等于 0"  //num大于0吗？，当大于0时候执行 "大于0" 否则执行 "小于 0，或等于 0"

接口

interface IPerson { 
    Name:string, 
    Age:number, 
    Other: ()=>void 
} 

数组对象属性

num.length  //长度

num2.push   //新增数组元素，放最后面，同时更新新长度

//forEach
let num3: string[] = ["字符串1","字符串2","字符串3"]
num3.forEach(function ( //回调函数 forEach
item,    //等于数组内的元素,可以自定义名字,选填
index   //等于数组索引值,可以自定义名字,选填
){
console.log("索引为",index,"元素为",item)
})

//some 类似forEach，但当满足条件时候会返回值并且停止循环
let y: boolean = num.some(function(num2)){} //some 可直接声明布尔变量

//forEach 案例
let nums: number[] = [1,2,3,4,5] //数组nums
let num: boolean = false //声明num布尔变量，并且默认false
nums.forEach(function(num2){ //回调函数 num2这里指的是nums的数组内容
if(num2 > 10){ //如果 num2 大于 10 num就输出 true
    num = true
}
})
console.log(num)

//some 案例
let nums: number[] = [1,2,3,4,5] //数组nums
let y: boolean = nums.some(function(num2){ //回调函数 num2这里指的是nums的数组内容
if(num2 > 10){ //如果 num2 大于 10 y就输出 true
   return true  //条件满足 返回true 停止循环
}
return false
})
console.log(y)

DOM

Document.title = "123"  //document 可以修改html的内容 

获取一个元素

document.querySelector()  //querySelector 可以调用标签、类、id，但只能调用第一个，所以调用id最好，默认类型 Element
let title = document.querySelector("#title") //获取页面中id为title的DOM元素,并给于变量title

let img = document.querySelector("#img") as HTMLImageElement
// 手动给于类型，将img的类型改为HTMLImageElement类型
img.src = "图片路径" //因为更改为图片类型，所以可以更改src的图片路径

console.dir(img) //当不确定要给于什么类型时，可以查看原始类型。控制台直接最下滑最后一个可以看到是什么类型，该起什么类型

获取多个元素

document.querySelectorAll() // 可调用所有标签、类、id，返回值是一个列表，这个就推荐用class 即类

let class = document.querySelectorAll(".a")  // 获取页面所有带有class a 的元素，并且都给于变量class

操作文本内容 innerText

读取

div.innerText //读取变量div内容

设置

div.innerText = "你好" //修改变量div内容

新增

div.innerText += "，我叫赛利亚"  //原来内容上再添加，位置根据代码顺序来

想使用 innerText 元素需要先指定好类型

操作样式 style

读取

p.style.fontSize

设置

p.style.fontSize = "18px" 

操作类样式 classList

新增

p.classList.add("a1","b2","c3") //添加新类

移除

p.classList.remove("a1","b2")

判断类是否存在

let cla = p.classList.contains("a1")

操作事件

鼠标点击时 click

let btn = document.querySelector("#btn") as HTMLButtonElement

btn.addEventListener("click",function(){  //click  事件名称
    console.log("鼠标点击触发事件")
})

鼠标经过时 mouseenter

btn.addEventListener("mouseenter",function(){
    console.log("鼠标经过时触发事件")
})

操作事件

事件对象 event

btn.addEventListener("click",function(event){  //事件对象 event 匿名不用写类型
   // console.log(event)   //可查询有什么对象

   // target 绑定了btn的元素
   let tar = event.target as HTMLButtonElement  //需要声明新变量指定对象的类型
   tar.style.fontSize = "18px"          //指定类型后可修改相应的属性样式
})


function btn(event: MouseEvent){ //event需要指定对象类型。如果不知道添加什么类型，可以先用匿名查看
    console.log("需要指定对象类型", event.target)
}

移除事件 removeEventListener

let btn = document.querySelector("#btn") as HTMLButtonElement

btn.addEventListener("click",addremove)  //点击 btn 后,按钮绑定 addremove 事件
function addremove(){
    console.log("鼠标点击后打印")    // 点击后执行打印
}


let removebtn = document.querySelector("#removebtn") as HTMLButtonElement

removebtn.addEventListener("click",function(){  //点击 remvebtn 后执行
btn.removeEventListener("click",addremove)  //移除 btn 的 click 绑定的 addremove 事件
})