苏州高端网站设计建设,鸿基建设工程有限公司网站,寻花问柳专注做一家男人最爱的网站,织梦网站后台如何做百度优化续 一 九、JavaScript常见内置类
9.1 原始类型的包装类
基本数据类型也可以调用属性 在理论上来说它们是没有办法获取属性或者调用方法的 原始类型是简单的值#xff0c;默认并不能调用属性和方法js 为了可以使其获取属性和调用方法#xff0c;对其封装了对应的包装… 续 一 九、JavaScript常见内置类
9.1 原始类型的包装类
基本数据类型也可以调用属性 在理论上来说它们是没有办法获取属性或者调用方法的 原始类型是简单的值默认并不能调用属性和方法js 为了可以使其获取属性和调用方法对其封装了对应的包装类型 普通字符串》包装类型 常见的包装类型 String、Number、Boolean、Symbol、BigInt
9.2 包装类型的使用过程
根据初始值创建一个原始类型对应的包装类型对象调用对应的属性或者方法返回一个新的值创建的包装类对象被销毁但是通常 js 引擎会进行优化跳过包装类的过程在内部直接完成属性的获取或者方法的调用
9.3 Number 类补充
具有自己的属性 类属性 具有实例方法 实例方法通过对象来调用toFixed()toString()
scriptvar 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.24Number(str)//不做区分浮点数和整数Number.parseInt(str)Number.parseFloat(str)// window对象上面console.log(parseInt(str));/script9.4 Math 对象
是一个对象类型不是构造函数
bodyscriptconsole.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,20var randomNum Math.floor(Math.random()*45)5/script
/body9.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])将字符串解析成整数也有对应的全局方法parseIntNumber. parseFloat(string)将字符串解析成浮点数也有对应的全局方法parseFloat
9.5.2 Math 的常见操作 属性 Math.PI圆周率 常见的方法 Math.floor向下舍入取整Math.ceil向上舍入取整Math.round四舍五入取整Math.random生成0~1的随机数包含0不包含1Math.pow(x, y)返回x的y次幂 公式: [a,b)的随机数 ya,xb-a, Math.floor(Math.random() * x) y
9.6 String 类的补充
属性 length:获取字符串长度 访问某一个位置对应的字符遍历
script// 属性var message liliconsole.log(message.length);// 访问某一个位置对应的字符console.log(message[3]);//超出范围undefinedconsole.log(message.charAt(3));//超出范围空字符串// 3. 字符串的遍历// 3.1 for普通遍历for(let i 0;imessage.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()查找字符串 indexOfincludesstartWithendWithreplace
// 判断一个字符串中是否有另外一个字符串
// 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
一系列的商品使用键值对访问并不方便需要一个有序的集合里面的元素是按照某一个顺序来排列的可以通过索引来获取到它----编程语言提供了一种数据结构数组[]
bodyscript// 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数组的基本操作 scriptvar 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,没有人这么做/scriptscriptvar 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. 新增元素:deleteCount0,后面可以添加新的元素names.splice(1,0,why,kebe)// 3. 替换元素:先移除再新增names.splice(1,2,lisssss,yejie)/scriptlength 属性 length属性是可写的可以扩容但是一般不需要扩容清空数组arr.length 0
scriptvar names [lilio, xiaoming, xiaohong]// 获取数组的长度console.log(names.length);// length属性可写的names.length10// 会自动对数组进行扩容// 设置的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 lilivar name2 jiaovar name3 dandan// 使用展开运算符const newNames []newNames.push(...name1,...name2,...name3)const newNamessname1.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;istudent.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 / falsefindIndex查找元素的索引找不到返回 -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才能对页面、浏览器进行操作 APIapplication programming interface DOM文档对象模型 浏览器将其抽取为一个个文档对象模型将网页里面的所有内容表示为可以修改的对象通过 api 去获取整个的文档为 documentjs 语法和浏览器之间的桥梁这些对象都可以通过JavaScript来对其进行访问 BOM浏览器对象模型 浏览器提供的用于处理文档之外的所有内容的其他对象navigator、location、history
10.2 DOM DOM tree:抽象成DOM对象的时候会形成一个树结构 学习顺序 DOM元素之间的关系获取DOM元素DOM节点的 type、tag、contentDOM 节点的attributes、properiesDOM 节点的创建、插入、克隆、删除DOM 节点的样式、类DOM 元素/window的大小、滚动、坐标 继承关系图
10.3 document 对象
document 节点表示的是整个载入的网页它的实例是全局的 document 对象 是DOM的入口点可以从document开始去访问任何节点元素 对于最顶层的 html、head、body 元素可以直接在 document 对象中获取到 html元素 document.documentElementbody元素 document.bodyhead元素 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节点的类型 数值类型10DocumentType 节9Document8注释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) — 移除这个特性。attributesattr 对象的集合具有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 redboxEl.style.fontSize 24px10.14 元素的 className 和 classList
在 attribute 中对应为 class对应的 property 为 classNameclassName 会进行覆盖添加或者移除单个的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 元素的大小、滚动 clientWidthcontentWithpadding不包含滚动条内容的宽度加上 padding clientHeightcontentHeightpadding clientTopborder-top的宽度 clientLeftborder-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 的滚动位置 scrollXX轴滚动的位置别名pageXOffsetscrollYY轴滚动的位置别名pageYOffset 也有提供对应的滚动方法 scrollBy(x,y) 将页面滚动至 相对于当前位置的 (x, y) 位置scrollBy(0,100) 方法 scrollTo ( pageX,pageY ) 将页面滚动至 绝对坐标
10.23 动态创建列表
bodyul classlist/ulscriptvar 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
/body10.24 倒计时
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classcountdownspan classtime hour03/spanspan classsplit/spanspan classtime minute03/spanspan classsplit/spanspan classtime second03/span/divscript// 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 | 0content 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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.active {color: red;font-size: 20px;}/style
/headbodyulli1/lili2/lili3/lili4/lili5/lili6/lili7/lili8/lili9/lili0/li/ulscript// 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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv classboxbutton data-actionremove移除/buttonbutton data-actionnew新建/buttonbutton data-actionsearch搜索/button/divscriptvar 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/html11.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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {display: flex;width: 300px;height: 300px;background-color: aquamarine;}button {flex: 1;height: 40px;}/style
/headbodydiv classboxbutton删除/buttonbutton新增/buttonbutton搜索/button/divscript// 方案一监听的本身就是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/html11.10 常见的键盘事件 onkeydown 某个键盘按键被按下down事件先发生 onkeypress 某个键盘按键被按下press 发生在文本被输入 onkeyup 某个键盘按键被松开up发生在文本输入完成 可以通过 key 和 code 来区分按下的键 event.code“按键代码” “KeyA”“ArrowLeft” 等特定于键盘上按键的物理位置不区分大小写 event.key字符“A”“a” 等对于非字符non-character的按键通常具有与 code 相同的值keyCode 已经遗弃
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyinput typetextbuttonbutton/button
/body
scriptconst 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/html11.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 秒默认值是 0arg1arg2…要传入被执行函数或代码字符串的参数列表 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 主要包括以下对象模型 windowlocationhistorynavigatorscreen
13.2 window 对象
全局对象 Node global浏览器window 对象 浏览器窗口对象放在 window 对象上的所有属性都可以被访问使用 var 定义的变量会被添加到window对象中默认提供了全局的函数和类setTimeout、Math、Date、Object作用 包含大量的属性console、location、history、localStorage60包含大量的方法alert、close、scrollTo、open40包含大量的事件focus、blur、load、hashchange30包含大量从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.lengthhistory.state 方法 添加新的历史pushState(state,“,”/lili)返回历史back()前进历史forward跳转层级gonumber替换历史replaceState()
13.6 navigator
表示用户代理的状态和标识等信息属性 userAgentvendor
13.7 screen
获取屏幕对应的像素
十四、JSON
14.1 认识 Json 是一种非常重要的数据格式并不是编程语言可以在服务器和客户端之间传递 服务器基本上是以 json 格式给你数据基本上传递都是 json 全称是 JavaScript Object Notation js 对象符号 一种轻量级资料交换格式算是 js 的一个子集 目前已经独立于编程呢个语言可以在各个编程语言中使用 在 js 中可以直接使用 其他数据交换格式使用什么数据格式是一种架构 XML在解析、传输等方面弱于 JSONProtobuf有可能替换 json 即时通信 应用场景 网络数据的传输JSON 数据项目的某些配置文件非关系型数据库 NoSQL 将 json 作为存储格式
14.2 JSON 基本语法
不能在 json 文件中写注释数据格式双引号不支持单引号 简单值数组对象
14.3 JSON 的序列化和反序列化 希望将一个对象保存在 localStorage 中如果直接将对象塞到里面去只能看到 object 需要进行序列化JSON.stringify()将 obj 对象转成字符串再塞进来 在转换的过程当中改值:replacerJSON.stringify(obj,function(key,value){if(keylili return miao)})space:转换输出格式前面留几个空格自定义toJSON方法 需要进行反序列化JSON.parse()将字符串转成 obj 对象拿到结果 在解析的过程中进行修改JSON.parse(itemfunction(key,value){if(keyage)return value2}) 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)
