循序渐进学 JavaScript <二>

续 <一>

在这里插入图片描述

九、JavaScript常见内置类

9.1 原始类型的包装类

  • 基本数据类型也可以调用属性
    • 在理论上来说它们是没有办法获取属性或者调用方法的
  • 原始类型是简单的值,默认并不能调用属性和方法
  • js 为了可以使其获取属性和调用方法,对其封装了对应的包装类型
    • 普通字符串==》包装类型
  • 常见的包装类型
    • String、Number、Boolean、Symbol、BigInt

9.2 包装类型的使用过程

  • 根据初始值,创建一个原始类型对应的包装类型对象
  • 调用对应的属性或者方法,返回一个新的值
  • 创建的包装类对象被销毁
  • 但是通常 js 引擎会进行优化,跳过包装类的过程在内部直接完成属性的获取或者方法的调用

9.3 Number 类补充

  • 具有自己的属性
    • 类属性
  • 具有实例方法
    • 实例方法:通过对象来调用
    • toFixed()
    • toString()
<script>var num = 19//new Number(num)// integer:整数// 类属性console.log(Number.MAX_SAFE_INTEGER);// 对象方法var num1 = 3.333454// 转化成字符串类型console.log(num1.toString());// 转换为二进制console.log(num1.toString(2));console.log(123..toString());// 保留三位小数console.log(num1.toFixed(2));// 类方法// 字符串转数字类型var str = "123.24"Number(str)//不做区分浮点数和整数Number.parseInt(str)Number.parseFloat(str)// window对象上面console.log(parseInt(str));</script>

9.4 Math 对象

  • 是一个对象类型,不是构造函数
<body><script>console.log(typeof Math);// Math对象的属性console.log(Math.PI);var num = 3.13console.log(Math.floor(num));console.log(Math.ceil(num));console.log(Math.round(num));// random:[0,1)console.log(Math.random());// 需求5~50的随机数// [5,20)var randomNum = Math.floor(Math.random()*45)+5</script>
</body>

9.5 Number、Math 的常见操作

9.5.1 Number 类的操作

  • 类属性
    • Number.MAX_SAFE_INTEGER 最大安全整数
    • Number.MIN_SAFE_INTEGER 最小安全整数
  • 实例方法
    • toString(base),将数字转成字符串,并且按照base进制进行转化
    • toFixed(digits),格式化一个数字,保留digits位的小数,会四舍五入
  • 类方法
    • Number.parseInt(string[, radix]),将字符串解析成整数,也有对应的全局方法parseInt;
    • Number. parseFloat(string),将字符串解析成浮点数,也有对应的全局方法parseFloat;

9.5.2 Math 的常见操作

  • 属性

    • Math.PI:圆周率
  • 常见的方法

    • Math.floor:向下舍入取整
    • Math.ceil:向上舍入取整
    • Math.round:四舍五入取整
    • Math.random:生成0~1的随机数(包含0,不包含1)
    • Math.pow(x, y):返回x的y次幂
  • 公式: [a,b)的随机数

    • y=a,x=b-a, Math.floor(Math.random() * x) + y

9.6 String 类的补充

  • 属性
    • length:获取字符串长度
  • 访问某一个位置对应的字符
  • 遍历
<script>// 属性var message = "lili"console.log(message.length);// 访问某一个位置对应的字符console.log(message[3]);//超出范围:undefinedconsole.log(message.charAt(3));//超出范围:空字符串// 3. 字符串的遍历// 3.1 for普通遍历for(let i =0;i<message.length;i++){console.log(message[i]);}// 3.2 for..of遍历 -> 迭代器:目前就字符串和数组// 对象不支持for...of// string对象内部将字符串变成了一个可迭代对象for(var char of message){console.log(char);}</script>
  • 字符串不能修改
// 4. 修改字符串
// 创建新的字符串,让变量指向了一个新的值
message = "加加加"
// 严格的修改字符串:修改之前的字符串内部
message[1] = "0"
// 所有字符变成大写:生成新的字符串
var message1 = message.toUpperCase()
console.log(message1);
// 变成小写
var message2 = message.toLowerCase()
  • 查找字符串
    • indexOf
    • includes
    • startWith
    • endWith
    • replace
// 判断一个字符串中是否有另外一个字符串
// 5.1 indexOf(searchString,fromIndex)
/*index:搜索到,返回搜索字符串所在的索引位置没有搜索到,返回-1*/
var index = message2.indexOf(name)
console.log(index);
// 存在
if (message2.indexOf(name) !== -1) {console.log("message2中包含name");
} else {console.log("message2中不包含name");
}// 5.2 includesES6新增语法,用来判断包含关系
if (message2.includes(name)) {console.log("哈哈哈哈好好照顾自己~~");
}
// 5.3 startWith:是否以xxx开头
if (message2.startsWith("my")) {console.log("messages以my开头");
}// 5.4 endWith:是否以xxx开头// 5.5 replace:替换字符串("替换谁",正则表达式、代替值、函数)var newMessage = message2.replace("lili", "涵涵")console.log(newMessage);var newMessage2 = message2.replace("lili", function () {// 使用函数返回的值去替代字符串return "kobe"})console.log(newMessage2);// 6. 获取子字符串:slice、substring、substr// slicevar clothes = "衣服包包鞋子"console.log(clothes.slice(3));//截到最后console.log(clothes.slice(1, 3));// substr:浏览器是否支持
  • 获取子字符串:slice
// 6. 获取子字符串:slice、substring、substr
// slice
var clothes = "衣服包包鞋子"
console.log(clothes.slice(3));//截到最后
console.log(clothes.slice(1, 3));
// substr:浏览器是否支持
  • 字符串拼接
// 7. 字符串的拼接
// 7.1 +
var str1 = "lili"
var str2 = "哈啰"
var newStr = str1 + str2
// 7.2 concat:支持链式调用,参数是可变参数...
var newStr2 = str1.concat(str2, newStr)
  • 删除首尾的空格
// 8. 删除首尾空格
console.log("           lili   ".trim());
  • 字符串的切割
// 9. 字符串的切割split:返回值是一个string类型的数组
var infos = "aaa-bbb-ccc-ddd"
// 传入一个分隔符
var items = infos.split("-")
console.log(items);
// join:把数组转为字符串,参数为以什么连接
var str3 = items.join("*")
console.log(str3);
  • 补齐字符串:str.padStart(4, “0”)

9.7 数组 Array

  • 一系列的商品,使用键值对访问并不方便,需要一个有序的集合,里面的元素是按照某一个顺序来排列的,可以通过索引来获取到它----编程语言提供了一种数据结构:数组[]
<body><script>// 1. 创建数组的方式一:字面量的方式var names = ["aaa", "bbb", "ccc"]//字符串类型var products = [{ name: "iphone", price: 99, desc: "九块九" },{ name: "鼠标", price: 199, desc: "哈哈" },{ name: "键盘", price: 989, desc: "六点多" },]//对象类型// 2. 创建数组方式二:类Arrayvar arr1 = new Array()console.log(arr1);var arr2 = new Array("abc", "cba", "nba")//["abc","cba","nba"]console.log(arr2);// 传入一个数字,会默认当成常见一个对应长度的数组var arr3 = new Array(5)//[empty * 5]</script>
</body>
  • 数组的基本操作
 <script>var names = ["aaa", "bbbb", "ccccc"]// 1. 访问数组中的元素console.log(names[0]);console.log(names.at(-1));// 2. 修改数组中的元素names[0] = "why"// 3. 新增数组中的元素names[3] = "kobe"//没有人这么做// 4. 删除数组中的元素delete names[1]//empty,没有人这么做</script>
<script>var names = ["lili", "dameinb", "jiao"]// 在数组的尾部添加和删除元素// push方法names.push("aaaa", "dddd")// pop方法names.pop()// 在数组的头部添加和删除元素:效率非常低// unshift方法names.unshift("sss", "hhh")// shift方法names.shift()// splice方法:处理数组的利器,修改的是原数组// 能够在任意位置添加/删除/替换元素// 参数一:start,从什么位置开始操作函数// 参数二:deleteCount,删除元素的个数// 1. 删除元素names.splice(1,2)// 2. 新增元素:deleteCount=0,后面可以添加新的元素names.splice(1,0,"why","kebe")// 3. 替换元素:先移除,再新增names.splice(1,2,"lisssss","yejie")</script>
  • length 属性
    • length属性是可写的,可以扩容,但是一般不需要扩容
    • 清空数组:arr.length = 0
<script>var names = ["lilio", "xiaoming", "xiaohong"]// 获取数组的长度console.log(names.length);// length属性可写的names.length=10// 会自动对数组进行扩容// 设置的length小于原来的元素个数names.length = 2//会将后面的内容截取掉</script>
  • 数组的遍历
// 数组的遍历// 1. 普通的for循环for (var i = 0; i < names.length; i++) {console.log(names[i]);}// 2. for in:适用于需要获取对应的索引for (var index in names) {console.log(index, names[index]);}// 3. for offor (var item of names) {console.log(item);}
  • 数组方法
    • slice:对数组进行截取
var names = ["abc","ddd","ggg","ytyt"]// 1. slice 方法:不会修改原数组// 与splice 区别:splice修改原有的数组var newNames = names.slice(1)console.log(newNames); 
  • concat:将多个数组拼接在一起
   // 2. concat :将多个数组拼接在一起var name1 = "lili"var name2 = "jiao"var name3 = "dandan"// 使用展开运算符const newNames = []newNames.push(...name1,...name2,...name3)const newNamess=name1.concat(name2,name3)console.log(newNamess);
  • join:将数组转成字符串,split:将字符串转化成数组
 // 3. join:将数组变成字符串console.log(names.join("-"));
  • 查找元素
    • indexOf:针对原始类型
 // 1. 数组中存放的是原始类型var names=["abc","cba","dddd"]// 1.1 indexOf// 找到返回索引// 没找到返回-1console.log(names.indexOf('abc'));// 2. 数组中存放的是对象类型var student = [{id:1002,name:"hey2",age:14},{id:1004,name:"hey3",age:15},{id:1005,name:"hey5",age:64},{id:1006,name:"hey4",age:34},]// 查找id为1004的学生信息// 2.1 自己写一个for循环// var stu = {}// 因此初始化为nullvar stu =null// 赋值为空的缺点:1. 转为布尔值都是真值 2. 空对象会占用内存for(var i =0;i<student.length;i++){if(student[i].id === 1004){console.log(student[i]);stu = student[i]break}}// 判断有没有找到对应的学生if(stu){console.log("找到了");}
  • find 方法
    // 2.2 find方法:高阶函数:数组中有几个元素就会调用多少次传入的函数var stu = student.find(function (item) {// console.log(item);if (item.id === 1004) return true})// 简写:var stu = student.find(item => item.id === 1004)</script>
//手动实现高阶函数forEachvar names = ["dd", "ddd", "gggg"]// forEach 函数:可以帮助遍历数组// names.forEach(function (item, index, err) {//   console.log(item, index, err);// })// //版本一:回调函数// // 自己实现上述函数// function liliForEach(fn) {//   for (var i = 0; i < names.length; i++) {//     fn(names[i], i, names)//   }// }// liliForEach(function (item, index, names) {//   console.log(item, index, names);// })// //版本二// function liliForEach(fn, arr) {//   for (var i = 0; i < arr.length; i++) {//     fn(names[i], i, arr)//   }// }// liliForEach(function (item, index, names) {//   console.log(item, index, names);// }, names)// // 版本三:往对象里面加属性// names.liliForEach = function liliForEach(fn) {//   for (var i = 0; i < this.length; i++) {//     fn(this[i], i, this)//   }// }// names.liliForEach(function (item, index, names) {//   console.log(item, index, names);// })// 版本四:放在原型链上Array.prototype.liliForEach = function liliForEach(fn) {for (var i = 0; i < this.length; i++) {fn(this[i], i, this)}}names.liliForEach(function (item, index, names) {console.log(item, index, names);})
//手动实现高阶函数forEach// 原始类型var names = ["abc", "vvv", "ooo1"]// 内部函数返回true,意味着找到了,后边就不需要遍历了,后面的不会继续执行// 没有返回值意味着返回undefined,布尔值为falsenames.find(function (item, index, arr) {console.log(item, index, arr);// return true//返回了第一个元素而不是true})// 数组中对象类型var students = [{ id: 1002, name: "hey2", age: 14 },{ id: 1004, name: "hey3", age: 15 },{ id: 1005, name: "hey5", age: 64 },{ id: 1006, name: "hey4", age: 34 },]students.find(function (item) {console.log(item);return item.id === 1002})// 自己实现Array.prototype.liliFind = function (fn) {var item //可以不设定,默认为undefinedfor (var i = 0; i < this.length; i++) {var isFlag = fn(this[i], i, this)if (isFlag) {// item = this[i]// breakreturn this[i]}}// return item}students.liliFind(function (item, index, arr) {return item.id === 101})
  • includes:返回 true / false
  • findIndex:查找元素的索引,找不到返回 -1
   // 查找元素// indexOf/lastIndexOf// includesconsole.log(names.includes('abc'));// findIndex:查找元素索引var findIndex = names.findIndex(function(item,index,arr){return item === 'nba'})console.log(findIndex);
  • 数组的排序:sort修改原数组

  • 数组的反转:reserve生成一个新的数组

  • 其他高阶函数

    • reduce

    • filter

    • map

    // 1.forEach函数var names = ["abc", "cba", "nba", "mba"]// 三种方式, 新增一种方式names.forEach(function (item) {console.log(item)})names.forEach(item => console.log(item))// 2.filter函数: 过滤var nums = [11, 20, 55, 100, 88, 32]// 2.1. for循环实现var newNums = []// for of方法for (var item of nums) {if (item % 2 === 0) {newNums.push(item)}}// 2.2. filter实现:形成新数组//  只筛选出满足条件的// var newNums = nums.filter(function(item) {//   return item % 2 === 0// })// console.log(newNums)// 3.map函数: 映射:对原来的数组元素进行变化,映射形成新数组var nums = [11, 20, 55, 100, 88, 32]var newNums = nums.map(function (item) {return item * item})console.log(newNums)// 4.reducevar numbers = [11, 20, 55, 100, 88, 32]var result = 0for (var item of numbers) {result += item}console.log(result)// initialValue: 初始化值, 第一次执行的时候, 对应的preValue// 如果initialValue没有传呢?var result = nums.reduce(function(preValue, item) {console.log(`preValue:${preValue} item:${item}`)return preValue + item}, 0)console.log(result)// reduce练习var products = [{ name: "鼠标", price: 88, count: 3 },{ name: "键盘", price: 200, count: 2 },{ name: "耳机", price: 9.9, count: 10 },]var totalPrice = products.reduce(function(preValue, item) {return preValue + item.price * item.count}, 0)console.log(totalPrice)// 综合练习: var nums = [11, 20, 55, 100, 88, 32]//   过滤所有的偶数, 映射所有偶数的平方, 并且计算他们的和var total = nums.filter(function (item) {return item % 2 === 0}).map(function (item) {return item * item}).reduce(function (preValue, item) {return preValue + item}, 0)console.log(total)var total = nums.filter(item => item % 2 === 0).map(item => item * item).reduce((preValue, item) => preValue + item, 0)console.log(total)

9.8 String 和 Array 常见操作

9.8.1 String 的常见操作

  • 创建方式 new String()
  • 属性
    • length —获取字符串的长度
  • 访问其中元素
    • [0]
    • charAt(0)
  • 遍历
    • 普通的for循环
    • for…of方式
      • 可迭代对象
      • 字符串/数组
  • 字符串不可变性
  • 实例方法:
    • toUpperCase() 将所有的字符转成大写;
    • toLowerCase() 将所有的字符转成小写;
    • indexOf 查找字符串位置
    • includes 是否包含字符串
    • startsWith 判断是否以xxx开头
    • endsWith 判断是否以xxx结尾
    • repace 替换字符串
    • slice/substring/substr 获取子字符串
    • concat 字符串拼接
    • trim 去除首尾空格
    • split 字符串分割,字符串—>数组
      • join 数组–>字符串

9.8.2 Array 的常见操作

  • 创建数组

    • [] 数组字面量
    • new Array()
      • 传1个数组,表示数组的长度
  • 数组基本操作

    • 获取元素
      • [0]
      • at(0)
    • 修改元素
      • arr[1] = "fff"
    • 新增
      • arr[5]="123"
    • 删除
      • delete arr[0]
  • 在数组的尾部:

    • push 尾部添加
    • pop 删除尾部的最后一个元素,返回被删除的元素
  • 在数组首部

    • unshift 首部添加
    • shift 删除首部的第一个元素,返回被删除的元素
  • 利器

    • splice 在任何位置添加/删除/替换元素
      • start 从什么位置开始操作元素
      • deleteCount 删除元素的个数
        • 2 删除2个
        • 0 添加元素
      • item1/item2 添加或者替换的元素

9.9 时间的表示

  • UTC :标准的时间

  • 创建 Date对象

   //创建Date对象的方式// 1. 没有传入任何的参数,获取到当前时间var date1 = new Date()console.log(date1);// 2. 传入参数:时间字符串var date2 = new Date("2022-09-09")console.log(date2);// 3. 传入具体的年月日时分秒var date3 = new Date(2023, 10, 10, 9, 8, 7, 333)console.log(date3);// 4. 传入一个 Unix 时间戳==》需要转成对应的时间// 1s ==> 1000msvar date4 = new Date(100000000000233)console.log(date4);
  • Date 对象的字符串形式:new Date().toISOSTring()---- 但其实也不经常用
  • 获取时间信息
  // 获取想要的时间信息var date = new Date()console.log(date.toISOString());var year = date.getFullYear()var month = date.getMonth() + 1var day = date.getDate()var hour = date.getHours()var minute = date.getMinutes()var second = date.getSeconds()// 一周中的第几天var weekday = data.getDay()
  • Date转变为时间戳:
 //  Date对象如何转成时间戳var date = new Date()console.log(date);// 方法一:当前时间的时间戳var timestamp = Date.now()console.log(timestamp);var timestamp1 = date.getTime()//获取时间戳一var timestamp2 = date.valueOf()//获取时间戳二//计算操作花费的时间var startTime = Date.now()for (var i = 0; i < 10000; i++) {console.log(i);}var endTime = Date.now()console.log("花费的时间:", endTime - startTime);

十、JavaScript 的 DOM 操作

10.1 DOM 、BOM

  • 利用浏览器提供给开发者的DOM、BOM相关的API才能对页面、浏览器进行操作

  • API:application programming interface

  • DOM:文档对象模型

    • 浏览器将其抽取为一个个文档对象模型
    • 将网页里面的所有内容表示为可以修改的对象
    • 通过 api 去获取
    • 整个的文档为 document
    • js 语法和浏览器之间的桥梁
    • 这些对象都可以通过JavaScript来对其进行访问
  • BOM:浏览器对象模型

    • 浏览器提供的用于处理文档之外的所有内容的其他对象
    • navigator、location、history

10.2 DOM

  • DOM tree:抽象成DOM对象的时候,会形成一个树结构

  • 学习顺序

    • DOM元素之间的关系
    • 获取DOM元素
    • DOM节点的 type、tag、content
    • DOM 节点的attributes、properies
    • DOM 节点的创建、插入、克隆、删除
    • DOM 节点的样式、类
    • DOM 元素/window的大小、滚动、坐标
  • 继承关系图

10.3 document 对象

  • document 节点表示的是整个载入的网页,它的实例是全局的 document 对象
    • 是DOM的入口点,可以从document开始去访问任何节点元素
  • 对于最顶层的 html、head、body 元素可以直接在 document 对象中获取到:
    • html元素: = document.documentElement
    • body元素: = document.body
    • head元素: = document.head
    • 文档声明: = document.doctype

10.4 DOM 和 document 对象

  • DOM:文档对象模型(Document Object Model)将页面所有的内容表示为可以修改的对象
    • 浏览器将编写在HTML中的每一个元素(Element)都抽象成了一个个对象
    • 所有这些对象都可以通过JavaScript来对其进行访问,可以通过 JavaScript来操作页面;
    • 将这个抽象过程称之为 文档对象模型(Document Object Model)
  • Document节点表示的整个载入的网页,它的实例是全局的document对象:
    • 对DOM的所有操作都是从 document 对象开始的
    • 它是DOM的入口点,可以从document开始去访问任何节点元素;

10.5 节点之间的导航

  • 父节点:parentNode
  • 前兄弟节点:previousSibling
  • 后兄弟节点:nextSibling
  • 子节点:childNodes
  • 第一个子节点:firstChild
  • 第二个子节点:lastChild

10.6 元素之间的导航

  • 获取到一个元素后,根据这个元素去获取其他的元素
  • 父元素:parentElement
  • 前兄弟节点:previousElementSibling
  • 后兄弟节点:nextElementSibling
  • 子节点:children
  • 第一个子节点:firstElementChild
  • 第二个子节点:lastElementChild

10.7 表格元素的导航

  • 元素独特属性:
    • table.rows —
    元素的集合;
  • table.caption/tHead/tFoot — 引用元素
  • table.tBodies —
  • 元素的集合;
  • ,, 元素提供了 rows 属性:

    • tbody.rows — 表格内部 元素的集合
    • tr.cells — 在给定 中的 和 单元格的集合;
    • tr.sectionRowIndex — 给定的 在封闭的 // 中的位置(索引);
    • tr.rowIndex — 在整个表格中 的编号(包括表格的所有行)
    • td.cellIndex — 在封闭的 中单元格的编号

10.8 表单元素的导航

  • 通过document来获取:document.forms
  • 获取form元素中的内容:form.elements
  • 设置表单子元素的name来获取他们
    • elements.accounts.value

10.9 获取元素

  • 通过导航获取:一层一层拿某个单独的元素非常不方便,当元素彼此靠近豁这相邻时候,导航属性非常有用
  • 直接获取:
    • document.getElementsByClassName(“keyword”)
    • document.getElementById(‘title’)
    • querySelector 和 querySelectAll
  // 1. 元素之间的导航// 1. 拿到 bodyvar bodyEl = document.body// 2. 拿到 boxvar boxEl = bodyEl.firstElementChild// 3. 拿到 containervar containerEl = boxEl.children[1]// 4. 拿到 pvar pEl = containerEl.children[0]// 5. 拿到 keywordvar spanEl = pEl.children[0]spanEl.style.color = 'red'// 2 通过getElementBy直接获取// 2.1 通过classname获取火速var keyword = document.getElementsByClassName("keyword")// 2.2 通过id获取元素var titleEl = document.getElementById('title')// 3 通过选择器查询var keyWordEL = document.querySelector('.keyword')var keywordEls = document.querySelectorAll('.keyword')// 是类数组对象但是是可迭代的,支持for of,有一个索引属性,不是数组//可迭代对象:String,数组,节点列表

10.10 节点的属性-nodeType

  • nodeType:节点的类型

    • 数值类型:
    • 10:DocumentType 节
    • 9:Document
    • 8:注释
    • 3:文字
    • 1:元素
  • nodeName:针对于节点,节点的名称

  • tagName:针对于元素,元素的标签名称

  • data/nodeValue:针对非元素的节点获取数据

  • innerHTML:对应的html元素也会获取,会直接进行替换,能够识别标签

  • textContent:只会获取文本内容,不能够识别标签

  • outerHTML

  • hidden属性:也是一个全局属性,可以用于设置元素隐藏,display

  • 总结

    • nodeName:获取node节点的名字
    • tagName:获取元素的标签名词
    • innerHTML:将元素中的 HTML 获取为字符串形式;设置元素中的内容
    • outerHTML:包含了元素的完整 HTML;innerHTML 加上元素本身
    • textContent:仅仅获取元素中的文本内容
    • nodeValue:用于获取非元素节点的文本内容
    • hidden:可以用于设置元素隐藏

10.11 元素的特性 attribute

  • 分类
    • 标准:html标准中原有的
    • 非标准:自定义的
  • 操作
    • elem**.hasAttribute(name) — 检查特性是否存在**。
    • elem.getAttribute(name) — 获取这个特性值,拿到字符串。
    • elem.setAttribute(name, value) — 设置这个特性值。
    • elem.removeAttribute(name) — 移除这个特性。
    • attributes:attr 对象的集合,具有name、value属性;

10.12 元素的属性 property

  • 对于标准的 attribute,会在DOM对象上创建与其对应的 property 属性:标准的attribute都有对应的 property
  • 在大多数情况下,它们是相互作用的
    • 改变property,通过attribute获取的值,会随着改变;
    • 通过attribute操作修改,property的值会随着改变;
    • 如果不支持就使用 setAttribute (比较标准)

10.13 动态修改样式

  • 选择一:在 CSS 中 编写好对应的样式,动态的添加 class
    • 比较固定的值
   boxEl.className = 'active'
  • 选择二:动态的修改style属性;
    • 精准的修改
 boxEl.style.color = 'red'boxEl.style.fontSize = '24px'

10.14 元素的 className 和 classList

  • 在 attribute 中对应为 class,对应的 property 为 className
  • className 会进行覆盖
  • 添加或者移除单个的class,那么可以使用classList属性,不会覆盖掉其他的
    • elem.classList 是一个特殊的对象
      • elem.classList.add (class) :添加一个类
      • elem.classList.remove(class):添加/移除类
      • elem.classList.toggle(class) :如果类不存在就添加类,存在就移除
      • elem.classList.contains(class):检查给定类,返回 true/false。
    • classList是可迭代对象,可以通过for of进行遍历

## 10.15 元素的 style 属性

  • 单独修改某一个 CSS 属性,那么可以通过 style 来操作:
  • 对于多词(multi-word)属性,使用驼峰式 camelCase
  • 将值设置为空字符串,那么会使用 CSS 的默认样式
  • 多个样式需要使用 cssText 属性

10.16 元素 style 的读取 - getComputedStyle

  • 对于内联样式,是可以通过style.*的方式读取到的
  • 对于 style、css 文件中的样式,是读取不到的
  • getComputedStyle 的全局函数来实现:getComputedStyle(boxEl).fontSize

10.17 data-自定义属性

  • HTML5 新增
  • 如果直接写的话就是 attributes 添加了一个 age 属性,不推荐这种写法
  • 推荐使用 data-*自定义属性
  • 标签中自定义:data-age = '19'
  • 在 script 中获取:boxEl.dataset.age

10.18 创建元素

  • 插入一个元素

    • 早期使用 document.write 方法写入

    • 后期

      • 步骤一:创建一个元素:document.createElement(tag)
      // 真实地创建一个 DOM 对象var h2El = document.createElement("h2")h2El.textContent = '我是标题'
      
      • 步骤二:插入元素到DOM的某一个位置;
          // 将元素加入boxboxElboxEl.append(h2El)

10.19 插入元素

  • node.append(…nodes or strings) —— 在 node 末尾 插入节点或字符串
  • node.prepend(…nodes or strings) —— 在 node 开头 插入节点或字符串
  • node.before(…nodes or strings) —— 在 node 前面 插入节点或字符串
  • node.after(…nodes or strings) —— 在 node 后面 插入节点或字符串
  • node.replaceWith(…nodes or strings) —— 将 node 替换为给定的节点或字符串

10.20 移除和克隆元素

  • 调用元素本身的 remove 方法
  • 复制一个现有的元素,可以通过 cloneNode 方法
    • 可以传入一个Boolean类型的值,来决定是否是深度克隆
    • 深度克隆会克隆对应元素的子元素,否则不会

10.21 元素的大小、滚动

  • clientWidth:contentWith+padding(不包含滚动条)内容的宽度加上 padding

  • clientHeight:contentHeight+padding

  • clientTop:border-top的宽度

  • clientLeft:border-left的宽度

  • offsetWidth:元素完整的宽度

  • offsetHeight:元素完整的高度

  • offsetLeft:距离父元素的x

  • offsetHeight:距离父元素的y

  • scrollHeight:整个可滚动的区域高度

  • scrollTop:滚动部分的高度

10.22 window 的大小、滚动

  • **window 的 width 和 height **
    • innerWidth、innerHeight:获取window窗口的宽度和高度(包含滚动条)
    • outerWidth、outerHeight:获取window窗口的整个宽度和高度(包括调试工具、工具栏)
    • documentElement.clientHeight、documentElement.clientWidth:获取html的宽度和高度(不包含滚动条)
  • window 的滚动位置:
    • scrollX:X轴滚动的位置(别名pageXOffset)
    • scrollY:Y轴滚动的位置(别名pageYOffset)
  • 也有提供对应的滚动方法:
    • scrollBy(x,y) :将页面滚动至 相对于当前位置的 (x, y) 位置:scrollBy(0,100)
    • 方法 scrollTo ( pageX,pageY ) 将页面滚动至 绝对坐标;

10.23 动态创建列表

<body><ul class="list"></ul><script>var ulEl = document.querySelector('.list')var isFlag = truewhile (isFlag) {var message = prompt('请输入待处理事件')if (!message) {isFlag = false} else {var liEl = document.createElement('li')liEl.textContent = messageulEl.append(liEl)}}</script>
</body>

10.24 倒计时

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.countdown {color: red;font-size: 40px;}.countdown .time {background-color: rgb(187, 119, 31);color: azure;display: inline-block;padding: 50px;border-radius: 3px;}</style>
</head><body><div class="countdown"><span class="time hour">03</span><span class="split"></span><span class="time minute">03</span><span class="split"></span><span class="time second">03</span></div><script>// 1. 获取元素var hourElement = document.querySelector('.hour')var minuteElement = document.querySelector('.minute')var secondElement = document.querySelector('.second')setInterval(function(){// 2. 获取倒计时的时间var nowDate = new Date()var endDate = new Date()endDate.setHours(24)endDate.setMinutes(24)endDate.setSeconds(24)endDate.setMilliseconds(24)// 间隔时间var interValTime = Math.floor((endDate.getTime() - nowDate.getTime()) / 1000)// 秒 ==》 小时 分钟 秒钟  按照六十进制var hour = Math.floor(interValTime / 3600)var minute = Math.floor((interValTime / 60) % 60)var second = interValTime % 60// 3. 设置内容hourElement.textContent = padLeft(hour)minuteElement.textContent = padLeft(minute)secondElement.textContent = padLeft(second)},1000)function padLeft(content, count, padStr) {count = count | 2padStr = padStr | '0'content = String(content)return content.padStart(count, padStr)}</script>
</body></html>

十一、JavaScript的事件处理

11.1 事件(Event)

  • Web页面需要经常和用户之间进行交互,而交互的过程中可能想要捕捉这个交互的过程
    • 比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置
    • 浏览器需要搭建一条JavaScript代码和事件之间的桥梁,浏览器进行调用
    • 当某个事件发生时,让JavaScript可以相应(执行某个函数),所以需要针对事件编写处理程序(handler)
  • 事件监听
    • 事件监听方式一:在script中直接监听(很少使用)
      • js 代码和 html 代码混合
    • 事件监听方式二:DOM 属性,通过元素的on来监听事件
      • 获取元素对象,onclick属性
      • 不能调用多个函数,只有最后的函数会生效
    • 事件监听方式三:通过 EventTarget 中的 addEventListener 来监听
      • 获取元素对象
      • btnEl.addEventListener (“click”,fn1)

11.2 事件冒泡和事件捕获

  • 事件冒泡:默认情况下事件是从最内层的span向外依次传递的顺序
  • 事件捕获:从外层到内层(body -> span)
  • 如果都监听,那么会按照如下顺序来执行:
    • 捕获阶段(Capturing phase):事件(从 Window)向下走近元素
    • 目标阶段(Target phase):事件到达目标元素
    • 冒泡阶段(Bubbling phase):事件从元素上开始冒泡
  • 事实上,可以通过event对象来获取当前的阶段:
    • eventPhase
  • 开发中通常会使用事件冒泡

## 11.3 事件对象

  • 当一个事件发生时,就会有和这个事件相关的很多信息
    • 比如事件的类型是什么,点击的是哪一个元素,点击的位置是哪里等等相关的信息
    • 那么这些信息会被封装到一个Event对象中,这个对象由浏览器创建,称之为event对象
  • 该对象提供了想要的一些属性,以及可以通过该对象进行某些操作
  • 获取这个 event 对象
    • event 对象会在传入的事件处理(event handler)函数回调时,被系统传入
    • 可以在回调函数中拿到这个event对象

## 11.4 event 常见的属性和方法

  • 常见的属性

    • type:事件的类型
    • target:当前事件发生的元素
    • currentTarget:当前处理事件的元素(父元素)
      • 事件冒泡会有区别
    • eventPhase:事件所处的阶段
      • 捕获:1
      • 目标:2
      • 冒泡:3
    • offsetX、offsetY:事件发生在元素内的位置
    • clientX、clientY:事件发生在客户端内的位置(可见的视口)
    • pageX、pageY:事件发生在客户端相对于document的位置(文档)
    • screenX、screenY:事件发生相对于屏幕的位置
  • 常见的方法

    • preventDefault:取消事件的默认行为
      var aEl = document.querySelector("a")aEl.onclick = function(event){event.preventDefault()}
    
    • stopPropagation:阻止事件的进一步传递(冒泡或者捕获都可以阻止)

11.5 事件处理中的this

  • this指向谁跟浏览器怎么调用有关
    • 绑定到谁身上就是指向谁
    • 绑定到处理的元素 currentTarget

11.6 EventTarget类

  • 所有的节点、元素都继承自EventTarget
    • Window也继承自EventTarget
  • EventTarget
    • EventTarget是一个DOM接口,主要用于添加、删除、派发Event事件
    • 可以实现类似于事件总线的效果
  • EventTarget常见的方法
    • addEventListener:注册某个事件类型以及事件处理函数
    • removeEventListener:移除某个事件类型以及事件处理函数
      • 移除要移除之前对应加进去的函数
    • dispatchEvent:派发某个事件类型到 EventTarget 上

11.7 事件委托

  • 利用事件的冒泡机制,以及事件对象中可以准确获知触发事件的元素机制(e.target),将子元素事件委托给父元素处理的现象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active {color: red;font-size: 20px;}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li></ul><script>// 1.每一个li都监听自己的点击,并且有自己的处理函数 var liEls = document.querySelectorAll("li")for (const liEl of liEls) {liEl.onclick = function (event) {event.currentTarget.classList.add('active')console.log("点击li");}}// 2. 统一在ul中进行监听var ulEl = document.querySelector("ul")ulEl.onclick = function (event) {event.target.classList.add('active')console.log("点击li");}// 3. 点击li变成active,其他取消activevar ulEl = document.querySelector("ul")// 3.1 变量记录的方式var activeLiEl = nullulEl.onclick = function (event) {// 边界判断if (activeLiEl && event.target !== ulEl) {activeLiEl.classList.remove("active")}// 3.2 给点击的元素添加activeif (event.target !== ulEl) {event.target.classList.add('active')}console.log("点击li");// 3.3 记录最新的active对应的liactiveLiEl = event.target}</script>
</body></html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="box"><button data-action="remove">移除</button><button data-action="new">新建</button><button data-action="search">搜索</button></div><script>var boxEl = document.querySelector(".box")boxEl.onclick = function (event) {var btnEl = event.targetvar action = btnEl.dataset.actionswitch (action) {case "remove":console.log("click remove");breakcase "new":console.log("click new");breakcase "search":console.log("click search");break}}</script>
</body></html>

11.8 常见的鼠标事件

  • click:当用户点击某个对象时调用的事件
  • contextmenu:在用户点击鼠标右键打开上下文菜单时触发
  • dblclick:当用户双击某个对象时调用的事件
  • mousedown :鼠标按钮被按下
  • mouseup:鼠标按键被松开
  • mousemove :鼠标被移动
  • mouseover :鼠标移到某元素之上(支持冒泡)
  • mouseout :鼠标从某元素移开(支持冒泡)
  • mouseenter :当鼠标指针移动到元素上时触发(不支持冒泡)
  • mouseleave :当鼠标指针移出元素时触发(不支持冒泡)

11.9 mouseover 和 mouseenter 的区别

  • mouseenter 和 mouseleave
    • 不支持冒泡
    • 进入子元素依然属于在该元素内,没有任何反应
  • mouseover和mouseout
    • 支持冒泡
    • 进入元素的子元素时
      • 先调用父元素的mouseout
      • 再调用子元素的mouseover
      • 因为支持冒泡,所以会将mouseover传递到父元素中
  • 应用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {display: flex;width: 300px;height: 300px;background-color: aquamarine;}button {flex: 1;height: 40px;}</style>
</head><body><div class="box"><button>删除</button><button>新增</button><button>搜索</button></div><script>// 方案一:监听的本身就是button元素// var btnEls = document.querySelectorAll('button')// for (var i = 0; i < btnEls.length; i++) {//   btnEls[i].onmouseenter = function (event) {//     console.log(event.target.textContent);//   }// }// 方案二:事件委托(只给父元素绑定一个元素)var boxEl = document.querySelector(".box")boxEl.onmouseover = function (event) {if (event.target.tagName === 'BUTTON')console.log(event.target.textContent);}</script>
</body></html>

11.10 常见的键盘事件

  • onkeydown :某个键盘按键被按下,down事件先发生

  • onkeypress :某个键盘按键被按下,press 发生在文本被输入

  • onkeyup :某个键盘按键被松开,up发生在文本输入完成

  • 可以通过 key 和 code 来区分按下的键

    • event.code:“按键代码”(

    “KeyA”,“ArrowLeft” 等),特定于键盘上按键的物理位置,不区分大小写

    • event.key:字符(“A”,“a” 等),对于非字符(non-character)的按键,通常具有与 code 相同的值
    • keyCode 已经遗弃
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text"><button>button</button>
</body>
<script>const btnEl = document.querySelector('button')const inputEl = document.querySelector('input')btnEl.onclick = function () {console.log("sousuo");}btnEl.onkeyup = function (event) {if (event.code == 'Enter') {console.log("search");}}// 按下s,搜索自动获取焦点document.onkeyup = function (event) {console.log("document键盘事件", event.key, event.code);if (event.code === 'KeyS') {inputEl.focus()}}
</script></html>

11.11 常见的表单事件

  • onchange 该事件在表单元素的内容改变时触发( <input>, , , 和 )

  • oninput :元素获取用户输入时触发

  • onfocus :元素获取焦点时触发

  • onblur :元素失去焦点时触发

  • onreset :表单重置时触发

  • onsubmit :表单提交时触发

11.12 文档加载事件

  • DOMContentLoaded:浏览器已完全加载 HTML,并构建了 DOM 树,但像 和样式表之类的外部资源可能尚未加载完成
  • load:浏览器不仅加载完成了 HTML,还加载完成了所有外部资源:图片,样式等

十二、DOM 相关

12.1 window 定时器方法

  • 计划调用:并不想立即执行一个函数,而是等待特定一段时间之后再执行
  • setTimeout 允许将函数推迟到一段时间间隔之后再执行
  • setInterval 允许重复运行一个函数,从一段时间间隔之后开始运行,之后以该时间间隔连续重复运行该函数
  • clearTimeout:取消setTimeout的定时器
  • clearInterval:取消setInterval的定时器

12.2 setTimeout 的使用

  • setTimeout的语法如下
    • func|code:想要执行的函数或代码字符串。
      • 一般传入的都是函数,由于某些历史原因,支持传入代码字符串,但是不建议这样做
    • delay:执行前的延时,以毫秒为单位(1000 毫秒 = 1 秒),默认值是 0
    • arg1,arg2…:要传入被执行函数(或代码字符串)的参数列表
  • clearTimeout方法
    • setTimeout 在调用时会返回一个“定时器标识符(timer identifier)”,可以使用它来取消执行

12.3 setInterval的使用

  • setInterval 方法和 setTimeout 的语法相同
    • 所有参数的意义也是相同的
    • 不过与 setTimeout 只执行一次不同,setInterval 是每间隔给定的时间周期性执行
  • clearInterval方法
    • etInterval也会返回一个“定时器标识符(timer identifier)”,可以通过clearInterval来取消这个定时器

十三、BOM

13.1 认识 BOM

  • BOM:浏览器对象模型
    • 由浏览器提供的用于处理文档之外的所有内容的其他对象
    • navigator、location、history
  • js 有一个非常重要的运行环境就是浏览器
    • BOM是链接js脚本与浏览器窗口的桥梁
  • BOM 主要包括以下对象模型
    • window
    • location
    • history
    • navigator
    • screen

13.2 window 对象

  • 全局对象
    • Node :global
    • 浏览器:window 对象
  • 浏览器窗口对象
  • 放在 window 对象上的所有属性都可以被访问
  • 使用 var 定义的变量会被添加到window对象中
  • 默认提供了全局的函数和类:setTimeout、Math、Date、Object
  • 作用
    • 包含大量的属性:console、location、history、localStorage(60+)
    • 包含大量的方法:alert、close、scrollTo、open(40+)
    • 包含大量的事件:focus、blur、load、hashchange(30+)
    • 包含大量从EventTarget继承过来的方法

13.3 location 对象

  • 用于表示 window 上当前链接到的 URL 信息
  • 常见的属性
 // 完整的URLconsole.log(location.href);// 获取URL信息console.log(location.hostname);console.log(location.host);console.log(location.protocol);console.log(location.pathname);console.log(location.search);console.log(location.hash);
  • 常见的方法
    • assign:赋值一个新的URL,并且跳转到新的URL 上
    • replace:替换,新的网页替换原来的网页
    • reload:重新加载这个网页

13.4 URLSearchParams

  • get方法:获取参数的值
  • set方法:设置一个搜索参数和值
  • append:追加一个搜索参数和值
  • has:判断是否有某个搜索参数
  • 中文会进行编码

13.5 history

  • 前端路由的核心:修改 url ,但是页面不刷新
    • 修改 hash 值
    • 修改 history
  • 属性
    • history.length
    • history.state
  • 方法
    • 添加新的历史:pushState(state,“,”/lili")
    • 返回历史:back()
    • 前进历史:forward()
    • 跳转层级:go(number)
    • 替换历史:replaceState()

13.6 navigator

  • 表示用户代理的状态和标识等信息
  • 属性
    • userAgent
    • vendor

13.7 screen

  • 获取屏幕对应的像素

十四、JSON

14.1 认识 Json

  • 是一种非常重要的数据格式,并不是编程语言,可以在服务器和客户端之间传递

    • 服务器基本上是以 json 格式给你数据
    • 基本上传递都是 json
  • 全称是 JavaScript Object Notation( js 对象符号)

  • 一种轻量级资料交换格式,算是 js 的一个子集

  • 目前已经独立于编程呢个语言,可以在各个编程语言中使用

  • 在 js 中可以直接使用

  • 其他数据交换格式,使用什么数据格式是一种架构

    • XML:在解析、传输等方面弱于 JSON
    • Protobuf:有可能替换 json
      • 即时通信
  • 应用场景

    • 网络数据的传输JSON 数据
    • 项目的某些配置文件
    • 非关系型数据库 NoSQL 将 json 作为存储格式

14.2 JSON 基本语法

  • 不能在 json 文件中写注释
  • 数据格式(双引号,不支持单引号)
    • 简单值
    • 数组
    • 对象

14.3 JSON 的序列化和反序列化

  • 希望将一个对象保存在 localStorage 中,如果直接将对象塞到里面去只能看到 object

    • 需要进行序列化JSON.stringify():将 obj 对象转成字符串再塞进来

      • 在转换的过程当中改值:replacer
      • JSON.stringify(obj,function(key,value){if(key==="lili" return "miao")})
      • space:转换输出格式,前面留几个空格
      • 自定义toJSON方法
    • 需要进行反序列化JSON.parse():将字符串转成 obj 对象拿到结果

      • 在解析的过程中进行修改
      • JSON.parse(item,function(key,value){if(key==="age")return value+2})
      var obj = {name: "lili",age: 99}// 1. 将 obj 对象进行序列化var objJSONString = JSON.stringify(obj)// 2. 将对象存储到LocalStoragelocalStorage.setItem("info", objJSONString)console.log(localStorage.getItem("info"));var item = localStorage.getItem("info")// 3. 将字符串转回对象(反序列化)var newObj = JSON.parse(item)
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/638160.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CTFhub-bak文件

CTFhub-Web-信息泄露-备份文件下载-bak文件 题目信息 解题过程 看到提示说和index.php有关&#xff0c;在url后面加index.php.bak&#xff0c;跳转到http://challenge-7a4da2076cfabae6.sandbox.ctfhub.com:10800/index.php.bak网址&#xff0c;即&#xff1a; 跳转到下载页…

清理docker 无用数据

df -h 查看 overlay 使用88% docker ps 我只要跑一个 把没有用的删除了去 让chatgpt 帮搞一搞 删除未使用的 Docker 镜像、容器、卷和网络&#xff0c;您可以按照以下步骤操作。请注意&#xff0c;在进行这些操作之前&#xff0c;确保您不再需要这些资源&#xff0c;因为删…

Elasticsearch的映射操作

本文来记录下Elasticsearch的映射操作 文章目录 映射的概述 映射的概述 Elasticsearch与mysql数据库对比 映射的概述 有了索引库&#xff0c;等于有了数据库中的 database。索引库(index)中的映射&#xff0c;类似于数据库(database)中的表结构(table)。创建数据库表需要设置字…

一文理解Python选择语句

在编程领域中&#xff0c;条件判断和选择是非常基础而且重要的一个部分。Python 作为一种被广泛应用的编程语言&#xff0c;提供了多种选择语句来满足不同的条件判断需求。本文将深入探讨 Python 中的选择语句&#xff0c;包括 if 语句、elif 语句、else 语句、简写的条件表达式…

有什么提高编程能力的书籍推荐吗?

数据密集型应用系统设计 原文完整版PDF&#xff1a;https://pan.quark.cn/s/d5a34151fee9 这本书的作者是少有的从工业界干到学术界的牛人&#xff0c;知识面广得惊人&#xff0c;也善于举一反三&#xff0c;知识之间互相关联&#xff0c;比如有个地方把读路径比作programming …

翻译: Anaconda 与 miniconda的区别

Anaconda 和 miniconda 是广泛用于数据科学的软件发行版&#xff0c;用于简化包管理和部署。 1. 主要有两个区别&#xff1a; packages包数量&#xff1a; Anaconda 附带了 150 多个数据科学包&#xff0c;而 miniconda 只有少数几个。Interface接口&#xff1a;Anaconda 有…

优先级队列(堆) PriorityQueue

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f4d5;格言&#xff1a;那些在暗处执拗生长的花&#xff0c;终有一日会馥郁传香欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 1.优先级队列 2.优先级队列的模拟实现 2.1 堆的概念 2.2 堆的创建 2.3 堆的插入和删除 2.…

MySQL(视图,存储函数,存储过程)

作业1&#xff1a; 作业实现&#xff1a; 首先创建学生表&#xff0c;课程表&#xff0c;以及学生选课表。 CREATE TABLE Student (Sno INT PRIMARY KEY,Sname VARCHAR(20) NOT NULL,Ssex CHAR(1) CHECK (Ssex IN (男, 女)),Sage INT,SDept VARCHAR(20) DEFAULT 计算机 );CRE…

4. seaborn-线性关系可视化

Seaborn本身并不是为了统计分析而生的&#xff0c;seaborn中的回归图主要用于添加视觉指南&#xff0c;以帮助在探索性数据分析EDA中强调存在于数据集的模式。 import numpy as np import matplotlib.pyplot as plt import seaborn as sns import warningssns.set(stylewhiteg…

JDK 版本切换工具 JEnv

1. 下载 JEnv 包 下载地址&#xff1a; JEnv-for-Windows 下载 JEnv.zip 然后解压缩&#xff0c;放到一个目录下&#xff0c;我这里放到了目录&#xff1a;D:\Program Files\JEnv 2. 将 JEnv 添加到环境变量 首先先在自己的电脑上去下载 JAVA 的各个版本&#xff0c;我这里…

二、简单控件

二、简单控件 #mermaid-svg-TR8KwIeb54zOjfmt {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-TR8KwIeb54zOjfmt .error-icon{fill:#552222;}#mermaid-svg-TR8KwIeb54zOjfmt .error-text{fill:#552222;stroke:#55222…

正反转控制电路图

1、倒顺开关正、反转控制电路图 倒顺开关直接接在主电路中&#xff0c;不适合用作大容量的电动机控制&#xff0c;一般用在额定电流10A、功率3kW以下的小容量电动机控制电路中。 2、接触器联锁正、反转控制电路图 接触器联锁正、反转控制电路的主电路中连接了两个接触器KM1和…

从零开始c++精讲:第四篇——模板初阶

文章目录 一、泛型编程二、函数模板2.1函数模板概念2.2函数模板格式2.3函数模板原理2.4函数模板实例化2.5函数模板匹配原则 三、类模板3.1类模板的定义格式3.2类模板的实例化 一、泛型编程 如何实现一个通用的交换函数呢&#xff1f; void Swap(int& left, int& righ…

linux内核源码编译2.6失败

centos7环境 iso选择 https://mirrors.tuna.tsinghua.edu.cn/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-2009.iso 自带qemu&#xff0c;未实测是否可用 选择编译版本2.6 下载地址 遇到的编译错误解决 yum list | grep curses yum install ncurses-devel.x86_64 -y yum i…

最优传输学习及问题总结

文章目录 参考内容lam0.1lam3lam10lam50lam100lam300画图线性规划matlabpython代码 参考内容 https://blog.csdn.net/qq_41129489/article/details/128830589 https://zhuanlan.zhihu.com/p/542379144 我主要想强调的是这个例子的解法存在的一些细节问题 lam0.1 lam 0.1P,…

[java基础揉碎]进制

目录 进制 进制的图示 进制的转换: 第一组 二进制转换成十进制示例 八进制转换成十进制示例 十六进制转换成十进制示例 ​第二组 十进制转换成二进制 十进制转换成八进制 十进制转换成十六进制 第三组 二进制转换成八进制 二进制转换成十六进制 第四组 八进制…

一文读懂JavaScript DOM节点操作(JavaScript DOM节点操作详解)

一、什么是节点 二、节点类型 1、元素节点 2、属性节点 3、文本节点 4、节点类型、名字、值表格 三、通过文档对象方法获取节点 1、通过id属性获取节点 2、通过标签名字获取节点 3、通过类名获取节点 4、通过name属性获取节点 四、通过层级关系获取节点 1、子节点 …

网络安全防护部署所需要注意的几点

顶层设计概念 考虑项目各层次和各要素&#xff0c;追根溯源&#xff0c;统揽全局&#xff0c;在最高层次上寻求问题的解决之道 顶层设计”不是自下而上的“摸着石头过河”&#xff0c;而是自上而下的“系统谋划” 网络安全分为 物理、网络、主机、应用、管理制度 边界最强 接…

【C++】List模拟实现过程中值得注意的点

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.List迭代器 2.适…

格密码基础:详解LWE问题(2)

目录 一. LWE问题的标准式 二. LWE单向函数与SIS单向函数 2.1 SIS问题的标准型 2.2 SIS与LWE标准型之间的关系 三. LWE问题有多难&#xff1f; 3.1 结论 3.2 归约过程 四. LWE归约性质 五. LWE问题的两个版本 一. LWE问题的标准式 系列文章&#xff1a; 格密码基础&…