python全栈-JavaScript

news2025/4/13 12:50:09

python全栈-js

文章目录

  • js基础
    • 变量与常量
    • JavaScript引入到HTML文件中
    • JavaScript注释与常见输出方式
  • 数据类型
    • typeof 显示数据类型
    • 算数运算符之加法运算符
    • 运算符之算术运算符
    • 运算符之赋值运算符
    • 运算符之比较运算符
    • 运算符之布尔运算符
    • 运算符之位运算符
    • 运算符优先级
    • 类型转换
  • 控制语句
    • if
    • if...else
    • if..else if...else
    • switch
    • 三元运算符 (条件) ? 正确 : 错误
    • for
    • while
    • break,continue
  • 字符串
    • 转义
    • length 属性
    • 字符串转码
    • charAt()
    • concat()
    • slice(start[,end]) 左闭右开
    • substring()
    • substr(index,len)
    • indexOf()/lastIndexOf()
    • trim()
    • toLowerCase()/toUpperCase()
    • search(子串)/replace()
    • split(要分隔的字符[,返回数量])
  • 数组
    • 遍历
    • 构造函数
    • Array.isArray()检测数组
    • push()/pop() 栈
    • shift()/unshift() 队列
    • join()
    • concat() 合并
    • reverse() 翻转数组
    • slice(start,end) 截取数组，左闭右开
    • splice(index,len,新元素1，元素2...)
    • sort() 字典顺序排序
    • indexOf()/lastIndexOf() 查找
  • 函数
    • 函数的重复声明
    • 函数名的提升
    • 函数的属性和方法
    • 函数作用域
    • 函数参数
    • 函数返回值
    • 立即调用的函数(IIFE)
    • eval 命令
  • 对象
    • 对象属性
    • 对象方法
  • Math对象 数学
    • 静态属性
    • 静态方法
    • 借Math的方法
    • 三角函数方法
    • 生成随机颜色
  • Date对象 日期
    • 日期的运算
    • 静态方法
    • 实例方法/to类
    • 实例方法/get类
    • 实例方法/set类
    • 唯一id
  • DOM
    • Node.nodeType属性
    • 属性
    • 获取元素
    • 创建元素
    • Element对象_属性
    • Element获取元素位置一
    • Element对象_方法
    • Attribute属性的操作
    • Text 节点
    • Text节点属性
    • Text节点方法
    • DocumentFragment 节点（了解）
    • Node 节点属性
    • CSS操作
  • 事件处理
    • 鼠标事件
    • 事件流
    • Event事件对象
    • 键盘事件
    • 表单事件
    • 窗口事件
    • 焦点/剪贴板事件
    • 网页状态事件
    • Touch事件
    • 事件代理(事件委托)
    • this关键字
    • 函数_闭包概念
    • 闭包特点
    • 闭包应用场景
    • 闭包中的this关键字
  • DOM实操
    • 为什么没有闭包的时候，总是越界访问呢
      • 为什么闭包可以解决这个问题
    • Tab切换
    • 瀑布流
      • 页面布局
      • 动态设置内容居中
      • 动态设置图片位置
      • 页面触底
      • 上拉加载
    • 轮播图
      • 动态切换
    • 放大镜
    • 回到顶部
  • 浏览器环境BOM
    • script 元素工作原理
    • 回流和重绘
    • 定时器
      • setTimeout()延迟执行
      • setInterval()重复间隔执行
      • 定时器应用
    • 防抖(debounce)
    • 节流(throttle)
    • window 对象_属性
    • window 对象_方法
    • Navigator 对象
    • Screen 对象
    • History 对象
    • Cookie 对象
    • Cookie 属性
    • 封装cookie操作
    • apply、call和bind函数
  • 面向对象
    • 学习面向对象
    • new 命令
    • prototype原型
    • 实例方法、静态方法、实例属性、静态属性
    • \__proto__ (了解即可)
    • constructor （了解）
    • 原型 链
    • instanceof 检测对象
    • Object 对象的相关方法
    • 对象的继承
    • 多重继承
    • 严格模式
  • 正则表达式
    • 字符串方法
    • 匹配规则
      • 字面量字符和元字符
      • 转义符
      • 字符类
      • 预定义模式和重复类
      • 量词符和贪婪模式
      • 修饰符和组匹配
    • 正则应用场景
  • jQuery
    • jQuery简介
    • 选择器之基础选择器
    • 选择器之属性选择器
    • 选择器之jQuery扩展
    • DOM操作
    • CSS操作
    • 事件
    • 鼠标事件
    • 表单事件
    • 键盘事件
    • 浏览器事件
    • 事件对象
    • 遍历
    • 层级关系（树遍历）
    • 动画
  • jQuery实操
    • 菜单功能
    • 淡入淡出轮播图
    • 自动折叠面板
    • 回到顶部

js中一切皆对象，都是object的子类。

JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。

JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，只能用来做一些数学和逻辑运算。

  • 为什么学习 JavaScript
    • 操控浏览器的能力
    • 广泛的使用领域
    • 易学性

html是设计结构，css是美化结构，js是让结构动起来。nodejs是写服务器的，语言是js

  • JavaScript与ECMAScript的关系

    • ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

  • 关于JavaScript版本

在学习这门语言的初期，使用的是ES5版本。新版本后期讲。

js基础

  • 语句

JavaScript 程序的单位是行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句

写js语言，可以在html里面的body使用script标签，里面写js语言，就像css在style里面一样。

var num=10; var是关键字，是声明语句的，num是名字/变量，=是赋值。10是值。

语句以分号结尾，一个分号就表示一个语句结束

  • 标识符/命名规则

标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名

标识符是由：字母、美元符号($)、下划线(_)和数字组成，其中数字不能开头

中文是合法的标识符，可以用作变量名（不推荐）

  • JavaScript保留关键字

以下关键字不需要强行记忆！

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

js里面有大小写的区别。

变量与常量

变量，常量，变量提升

  • console.log(变量) 可以在浏览器的终端输出变量的值

  • 变量提升

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

说白了，就是不管你在什么位置创建的变量，在代码执行的时候，所有的声明变量语句都会被放到代码开头。

但是只有声明放在开头var num；但是num没有赋值。赋值还是在原来的位置，所以在声明变量之前可以访问，但是只有空值。

  • 常量

使用const定义常量后，常量无法改变(扩展知识,ES6新特性)

JavaScript引入到HTML文件中

嵌入html中，引入本地js，引入网络js

  • 嵌入到HTML文件中
<body>
	<script>
		var age = 20
	</script>
</body>
  • 引入本地独立JS文件

script标签一定要放在body的最下面，所有容器的底部

<body>
     <script src="js路径">   </script>
</body>
  • 引入网络来源文件
<body>
     <script src="http://code.jquery.com/jquery1.2.1.min.js"> </script>
</body>

为什么要使用网络js呢？因为很多设计用的人多了，就有人去整理js文件。比如轮播图效果，直接在网上搜，，然后把人家提供的网络js文件导入进去。因为人家是写好的js，不会出什么大错误，我们可以直接放在head里面

引入过来的代码按照人家说的方式用就可以Swiper CDN - Swiper中文网

cdn是人家的网络js数据包

使用教程Swiper使用方法 - Swiper中文网

JavaScript注释与常见输出方式

  • JavaScript注释

    • 源码中注释是不被引擎所解释的，它的作用是对代码进行解释。
    • Javascript 提供两种注释的写法：一种是单行注释，用//起头；另一种是多行注释，放在/*和*/之间。
    • 虽然js在html里面，但是注释方式不一样，html只能使用尖括号的那种。js必须在script标签里面，只能使用js自己的注释方式。

  • JavaScript输出方式

    • JavaScript有很多种输出方式，都可以让我们更直观的看到程序运行的结果
    • // 在浏览器中弹出一个对话框,然后把要输出的内容展示出来,alert都是把要输出的内容首先转换为字符串然后在输出的
    • alert(“要输出的内容”); 弹窗
    • document.write(“要输出的内容”); 类似html的标签
    • // 在控制台输出内容
    • console.log(“要输出的内容”);

数据类型

数值，字符串，布尔，null，undefined，对象，symbol

// 数值
var num= 10;
// 字符串
var str1= '你好'
var str2= "hi"
// 布尔
var flat=true;
var flat1=false;
// null
// undefined
var a1;
console.log(num); // 输出的就是undefined。null也是一样的，null是旧版本的输出
// 对象  里面都是键值对
var teacher1={
    age:19,
    name:'lily'
}
// symbol

上面是所有的数据类型。这些数据类型有不同的分类方式

  • 原始类型(基础类型)

数值，字符串，布尔

  • 合成类型(复合类型)

对象：因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器

至于undefined和null，一般将它们看成两个特殊值

typeof 显示数据类型

JavaScript 有三种方法，可以确定一个值到底是什么类型。而我们现在需要接触到的就是typeof

跟python的type一样

  • 数值返回number

  • 字符串返回string

  • 布尔值返回boolean

  • 对象返回object

  • unll和undefined的区别

    • null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。既然含义与用法都差不多，为什么要同时设置两个这样的值，这不是无端增加复杂度，令初学者困扰吗？这与历史原因有关
    • 当基本数据类型没有想要给他的值的时候，就用undefined赋值。
    • 当对象没有数据的时候给他null赋值。

  • 使用方式：typeof 变量

  • 输出：console.log(typeof num);

算数运算符之加法运算符

数值相加，非数值相加，与字符串相加

任何类型和字符串相加，都是字符串类型

  • 加法运算符（+）是最常见的运算符，用来求两个数值的和
  • 非数值相加 主要是布尔类型相加，布尔与数值相加。布尔值是真就是数值1，假是数值0
  • 与字符串相加
    • 比较特殊的是，如果是两个字符串相加，这时加法运算符会变成连接运算符，返回一个新的字符串，将两个原字符串连接在一起。

运算符之算术运算符

  • 加减乘除运算符
  • 余数运算符 就是取余
  • 自增和自减运算符 ++ –

运算符之赋值运算符

有：=，+=，-=，*=，/=，%=

=是赋值，不是等于

运算符之比较运算符

有：<，>，<=，>=，==，!=，!==，===

小于，大于，小于等于，大于等于，等于，不等于，严格不等于，严格等于

严格等于是有类型的限制。不能是类型不同。两个等于只需要值相等，三个等于是有类型和值同时相等。

运算符之布尔运算符

把表达式变成布尔值，真假值。

取反！，且&&，或||

  • 布尔值是假，对于非布尔值，取反运算符会将其转为布尔值。可以这样记忆，以下六个值取反后为true，其他值都为false。
  • undefined，null，false，0，NaN，空字符串（‘’）

空格也是字符，空格不算假

运算符之位运算符

位运算符直接处理每一个比特位（bit），是非常底层的运算，好处是速度极快，缺点是很不直观，许多场合不能使用它们，否则会使代码难以理解和查错

  • 快速计算位移方案
    左移运算符<< 就是*2的n次方（n代表位移次数）
    右移运算符>> 就是/2的n次方 (n代表位移次数，不同点，出现小数时要取整）

运算符优先级

查文档就行了

如果多个运算符混写在一起，常常会导致令人困惑的代码,所以一般我们可以通过多条语句完成，记住所有运算符的优先级，是非常难的，也是没有必要的

  • 解决方案
    添加小括号()
    分离开来，写成多条语句

类型转换

自动转换，强制转换

  • 自动转换，遇到以下两种情况时，JavaScript 会自动转换数据类型，即转换是自动完成的，用户不可见。
  • 就是刚刚的字符串加法运算的情况
    • 第一种情况：不同类型的数据互相运算
    • 第二种情况：对非布尔值类型的数据求布尔值
  • 强制转化
    • 强制转换主要指使用Number、String和Boolean三个函数，手动将各种类型的值，分布转换成数字、字符串或者布尔值。
    • 使用Number函数，可以将任意类型的值转化成数值
    • String函数可以将任意类型的值转化成字符串，
    • Boolean函数可以将任意类型的值转为布尔值

控制语句

if

  • if语句语法规范

if (布尔值){ 语句; } if (布尔值) 不加大括号，只能跟一条语句 语句;

和c语言一样

if…else

if (m === 3) { // 满足条件时，执行的语句 } else if(m===2){ // 不满足条件时，执行的语句 }else{ }

if…else if…else

switch

switch (fruit) {
  case "banana":
    // ...
    break;
  case "apple":
    // ...
    break;
  default:
    // ...
}

和c语言一模一样

三元运算符 (条件) ? 正确 : 错误

for

for (初始化表达式; 条件; 迭代因子) {
  语句
}
for (var i=0;i<10;i++){
    console.log(i);
}
//c++
for (int i=0;i<10;i++){
    printf(i);
}
//python
for i in range(10)
	print(i)

while

while (条件) {
  语句;
}

break,continue

字符串

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中

单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号

如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此

字符串默认只能写在一行内，分成多行将会报错。如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠

如果真的有多行文本的需求，可以使用字符串拼接的方式实现。使用加号连接。

转义

反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符

\0 ：null（\u0000）
\b ：后退键（\u0008）
\f ：换页符（\u000C）
\n ：换行符（\u000A）
\r ：回车键（\u000D）
\t ：制表符（\u0009）
\v ：垂直制表符（\u000B）
’ ：单引号（\u0027）
" ：双引号（\u0022）
\ ：反斜杠（\u005C）

length 属性

length属性返回字符串的长度，该属性也是无法改变的

str1.length

字符串转码

  • Base64转码

所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理.JavaScript 原生提供两个 Base64 相关的方法

btoa()：任意值转为 Base64 编码

atob()：Base64 编码转为原来的值

var string = 'Hello World!'; btoa(string) // "SGVsbG8gV29ybGQh" atob('SGVsbG8gV29ybGQh') // "Hello World!"

中文是不可以进行处理的.如果非要处理中文，需要在增加两个方法encodeURIComponent(), decodeURIComponent()

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}
function b64Decode(str) {
  return decodeURIComponent(atob(str));
}
b64Encode('你好') //"JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

charAt()

charAt 方法返回指定位置的字符，参数是从 0 开始编号的

人话：把字符串看成一个字符串数组，按照下标取数组的元素。

var s = new String('itbaizhan');
s.charAt(1) // "t"    取下标为1的元素
s.charAt(s.length - 1) // "n"      取最后一个元素

如果参数为负数，或大于等于字符串的长度， charAt 返回空字符串

concat()

concat 方法用于连接两个字符串，返回一个新字符串，不改变原字符串,s1.concat(s2)

该方法可以接受多个参数,console.log(‘’.concat(one, two, three) )

如果参数不是字符串， concat 方法会将其先转为字符串，然后再连接

和使用加号拼接字符串的效果是一样的

slice(start[,end]) 左闭右开

slice 方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）

就是从字符串里面取子串

'itbaizhan'.slice(0, 4) // "it"

如果省略第二个参数，则表示子字符串一直到原字符串结束

如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度

'itbaizhan'.slice(-7) // "baizhan"

substring()

和slice一样，但是slice不支持，第二个参数比第一个参数靠前。

substring在发现第二个参数比第一个参数靠前的时候，会自动交换两个参数的位置，属于是slice的修复版

如果参数是负数， substring 方法会自动将负数转为0

由于这些规则违反直觉，因此不建议使用 substring 方法，应该优先使用 slice

substr(index,len)

和slice，substring的作用是一样的

但是参数的意义不一样了，第一个参数是子串截取的下标，第二个参数是子串要截取的长度

如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串

第二个参数为0，就是空字符串拉

indexOf()/lastIndexOf()

  • 就是找子串的起始位置。可以有第二个参数，第二个参数是从字符串第几位元素开始寻找子串。

  • indexof是正着找子串，lastindexof是反着找子串。

indexOf 方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回 -1 ，就表示不匹配

indexOf 方法还可以接受第二个参数，表示从该位置开始向后匹配

lastIndexOf 方法的用法跟 indexOf 方法一致，主要的区别是 lastIndexOf 从尾部开始匹配， indexOf 则是从头部开始匹配

trim()

trim 方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串

  • 使用方式：字符串.trim()

该方法去除的不仅是空格，还包括制表符（ \t 、 \v ）、换行符（ \n ）和回车符（ \r ）

  • ES6扩展方法， trimEnd() 和 trimStart() 方法
    • trimEnd() 只去尾部空格
    • trimStart() 只去头部空格

toLowerCase()/toUpperCase()

toLowerCase 方法用于将一个字符串全部转为小写， toUpperCase 则是全部转为大写。它们都返回一个新字符串，不改变原字符串

  • 将字符串首字母变为大写

itbaizhan'.charAt(0).toUpperCase() +'itbaizhan'.substr(1);

search(子串)/replace()

search 方法确定原字符串是否匹配某个子字符串,返回值为匹配的第一个位置。如果没有找到匹配，则返回 -1 。

search和indexof作用类型。都是找子串的。目前他们的效果作用都是一样的，在学了正则表达式之后就不一样了。

replace 方法用于替换匹配的子字符串'sxtbaizhan'.replace('sxt', 'it')

replace多处用在删除子串。就是根据我们提供的子串1，和一个空字符串的子串2，就能完成字符串删除子串的操作

  • 如果replace的第二个参数是空，就是删除子串1。
  • 如果replace的第一个参数是空，就是在字符串的最前面添加子串2. 只能在字符串的开头添加

split(要分隔的字符[,返回数量])

split 方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组

如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。

如果省略参数，则返回数组的唯一成员就是原字符串

split 方法还可以接受第二个参数，限定返回数组的最大成员数。

  • 如果只写一个参数，就是对原字符串进行分隔的位置
  • 如果写了第二个参数，就会返回分隔后的子串。填写数字几，就返回几个子串。如果你填写的数字多余分隔的子串数量，也不报错。就是有几个返回几个。

返回的是子串数组。

数组

数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。

var arr = ['it',10,true,{}];

数组也可以先定义后赋值。

任何类型的数据，都可以放入数组

数组可以嵌套数组arr[1][2]

数组的本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object

  • length 属性
  • 数组的length属性，返回数组的成员数量

length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员会自动减少到length设置的值.数据丢失

var arr = ['sxt', 'baizhan', 'it']; arr.length = 2; // ['sxt', 'baizhan']

  • 清空数组的一个有效方法，就是将length属性设为0

如果访问数组的时候，指定下标，下标超过数组的最大长度，就会返回undefined

遍历

  • 使用for循环或while循环

for(var i = 0; i < a.length; i++) { console.log(a[i]); }

  • for…in遍历数组

for (var i in arr) { console.log(arr[i]); }

构造函数

  • 数组的空位

当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位.空位的打印结果是undefined

var a = ['sxt', , 'it']; a.length // 3

如果参数是一个正整数，返回数组的成员都是空位。虽然读取的时候返回 undefined ，但实际上该位置没有任何值。虽然可以取到 length 属性，但是取不到键名

  • 构造函数new Array

new就是构造方法

Array 是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组

var arr = new Array(2); arr.length // 2

如果没有使用 new ，运行结果也是一样的。var arr = Array(2);

不建议使用它生成新数组，直接使用数组字面量是最简约的做法.字面量：var arr=[];

Array.isArray()检测数组

这个方法就是Array.isArray()，参数写检测的变量c

Array.isArray 方法返回一个布尔值，表示参数是否为数组。它可以弥补typeof 运算符的不足.

字符串不是数组

使用typeof对一个数组进行检测，只会得到一个object的对象类型

  • 静态方法：Array.isArray(arr1)
  • 实例方法：[].pop()

push()/pop() 栈

push 方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组

pop 方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组

对空数组使用 pop 方法，不会报错，而是返回 undefined

push 和 pop 结合使用，就构成了“后进先出”

shift()/unshift() 队列

  • shift 方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组

shift 方法可以遍历并清空一个数组

while (item = list.shift()) { console.log(item); }

  • unshift 方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组

unshift 方法可以接受多个参数，这些参数都会添加到目标数组头部

join()

join 方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔

如果数组成员是 undefined 或 null 或空位，会被转成空字符串

数组的 join 配合字符串的 split 可以实现数组与字符串的互换

concat() 合并

concat 方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变

除了数组作为参数， concat 也接受其他类型的值作为参数，添加到目标数组尾部。

  • 应用场景
    • 上拉加载，合并数据

[1, 2, 3].concat(4, 5, 6,[7,8,9])本来是只接收数组对象的，但是数值也可以转换成数组类型使用，如果是数组，就会直接合并到原数组

reverse() 翻转数组

reverse 方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组

因为字符串没法直接翻转，可以使用split把字符串切割成单字符数组，再使用reverse翻转，再使用join拼接

str1.split(“”).reverse().join()

slice(start,end) 截取数组，左闭右开

和字符串的截取方式一样

slice 方法用于提取目标数组的一部分，返回一个新数组，原数组不变

它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一
直返回到原数组的最后一个成员

如果 slice 方法的参数是负数，则表示倒数计算的位置

如果第一个参数大于等于数组长度，或者第二个参数小于第一个参数，则返回空数组

如果无参，就把数组全都打印出来

splice(index,len,新元素1，元素2…)

splice 方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组

splice 的第一个参数是删除的起始位置（从0开始），第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素

起始位置如果是负数，就表示从倒数位置开始删除

如果只是单纯地插入元素， splice 方法的第二个参数可以设为 0

如果只提供第一个参数，等同于将原数组在指定位置拆分成两个数组

sort() 字典顺序排序

sort 方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变

sort 方法不是按照大小排序，而是按照字典顺序。也就是说，数值会被先转成字符串，再按照字典顺序进行比较，所以101排在11的前面

indexOf()/lastIndexOf() 查找

indexOf 方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回 -1

indexOf 方法还可以接受第二个参数，表示搜索的开始位置

lastIndexOf 方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回 -1

这两个方法不能用来搜索 NaN 的位置，即它们无法确定数组成员是否包含 NaN

这是因为这两个方法内部，使用严格相等运算符（ === ）进行比较，而 NaN 是唯一一个不等于自身的值

函数

  • 函数的声明

JavaScript 有三种声明函数的方法

  • function 命令： function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。
    • function print(s) { console.log(s);}
  • 函数表达式 除了用function命令声明函数，还可以采用变量赋值的写法
    • var print = function(s) { console.log(s);};
  • Function 构造函数 第三种声明函数的方式是Function构造函数。 几乎无人使用
    • var add = new Function( ‘x’, ‘y’, ‘return x + y’); 这种声明函数的方式非常不直观，几乎无人使用

函数的重复声明

如果同一个函数被多次声明，后面的声明就会覆盖前面的声明

函数名的提升

JavaScript 引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。

但是，如果采用赋值语句定义函数，JavaScript 就会报错.赋值语句没有变量提升

// 会报错，因为赋值定义的函数，不能提升
test():
var test(a,b){
    console.log(a,b);
}

不能在条件语句中声明函数

根据 ES5 的规范，不得在非函数的代码块中声明函数，最常见的情况就是if语句

函数的属性和方法

  • name 属性
    • 返回函数的名字
    • 如果是通过变量赋值定义的函数，那么name属性返回变量名
  • length 属性
    • 返回函数参数个数
  • toString()
    • 返回函数的源码

函数作用域

Javascript 有两种作用域：一种是全局作用域，变量在整个程序中一直存在；另一种是函数作用域，变量只在函数内部存在

函数外部声明的变量就是全局变量

在函数内部定义的变量，外部无法读取，称为“局部变量”

函数内部定义的变量，会在该作用域内覆盖同名全局变量

  • 局部变量只能在函数内部声明，在其他区块中声明，一律都是全局变量

  • 函数内部的变量提升

    • 与全局作用域一样，函数作用域内部也会产生“变量提升”现象。var命令声明的变量，不管在什么位置，变量声明都会被提升到函数体的头部

只要不在函数体内声明的变量，都是全局变量，比如for，if语句里面的都是全局变量

函数参数

  • 参数的省略，函数参数不是必需的，Javascript 允许省略参数
    • 函数参数如果是原始类型的值（数值、字符串、布尔值），传递方式是传值传递。
    • 在函数体内修改参数值，不会影响到函数外部
  • 同名参数，如果有同名的参数，则取最后出现的那个值。就是我们设计函数参数的时候，给两个参数取的别名是一样的，就以后面的参数为准。function add(x,x)

如果全局变量是以参数传入函数，或者是重新使用var声明的变量。在函数内部修改变量，在函数体外部不受影响。

如果全局变量是在函数体内部直接使用，就会被修改。

  • arguments 对象

由于 JavaScript 允许函数有不定数目的参数，所以需要一种机制，可以在函数体内部读取所有参数。这就是arguments对象的由来

var list = function (one) {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
}
list(1, 2, 3)
  • arguments 与数组的关系
    • 需要注意的是，虽然arguments很像数组，但它是一个对象。数组专有的方法（比如slice和forEach），不能在arguments对象上直接使用。如果要让arguments对象使用数组方法，真正的解决方法是将arguments转为真正的数组

函数返回值

JavaScript函数提供两个接口实现与外界的交互，其中参数作为入口，接收外界信息；返回值作为出口，把运算结果反馈给外界

在函数体内，使用 return 语句可以设置函数的返回值。

如果return语句后不跟任何值就相当于返回一个undefined

如果函数中不写return，则也会返回undefined

在函数中return后的语句都不会执行

立即调用的函数(IIFE)

在 Javascript 中，圆括号()是一种运算符，跟在函数名之后，表示调用该函数。比如，print()就表示调用print函数。那如何让函数自己执行呢

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();
  • 自执行函数传递参数
var a = 10;
var b = 20;
(function (x,y){console.log(x+y);})(a,b);

eval 命令

将字符串当作语句执行，一般用作代码加密。

eval('var a = 1;');

对象

JavaScript 语言中，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合

  • 声明一个对象
var user = {
  name: 'itbaizhan',
  age: '13'
};
  • 如果键名不符合标识名的条件（比如第一个字符为数字，或者含有空格或运算符），则必须加上引号，否则会报错，比如，‘1p’, ‘h w’, ‘p+q’,

对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用

如果属性的值还是一个对象，就形成了链式引用user.container.frontEnd

对象属性

  • 读取属性

读取对象的属性，有两种方法，一种是使用点运算符，还有一种是使用方括号运算符

user.hello
user[‘hello’]

如果使用方括号运算符，键名必须放在引号里面，否则会被当作变量处理

  • 属性的赋值

点运算符和方括号运算符，不仅可以用来读取值，还可以用来赋值

  • JavaScript 允许属性的“后绑定”，也就是说，你可以在任意时刻新增属性，没必要在定义对象的时候，就定义好属性

  • 查看一个对象本身的所有属性，可以使用 Object.keys(对象名) 方法

  • delete 命令用于删除对象的属性，删除成功后返回 true。。。。delete user.name

删除一个不存在的属性， delete 不报错，而且返回 true

只有一种情况， delete 命令会返回 false ，那就是该属性存在，且不得删除(使用率极低)

  • for…in 循环 用来遍历一个对象的全部属性
for (var i in user) {
	console.log(user[i]); 
}

对象方法

Object 对象的方法分成两类： Object 本身的方法与 Object 的实例方法

跟python的类一样。有类方法，和类的实例方法两种。

  • Object 对象本身的方法，就是直接定义在 Object 对象的方法

  • Object 的实例方法，就是定义在 Object 原型对象 Object.prototype 上的方法。它可以被 Object 实例直接使用

Object.prototype.print = function (name) {
    console.log(name);
};
var user = {
    name:'itbaizhan'
}
user.print(user.name);

就行数组的方法一样，Array.isArray(num1)和num1.pop() 这两种形式。第一种是对象方法，第二种是实例方法。

Math对象 数学

静态属性

Math是 JavaScript 的原生对象，提供各种数学功能。

该对象不是构造函数，不能生成实例，所有的属性和方法都必须在Math对象上调用

  • 提供以下一些数学常数

Math.E：常数e。
Math.LN2：2 的自然对数。
Math.LN10：10 的自然对数。
Math.LOG2E：以 2 为底的e的对数。
Math.LOG10E：以 10 为底的e的对数。
Math.PI：常数 PI。
Math.SQRT1_2：0.5 的平方根。
Math.SQRT2：2 的平方根。

Math.E // 2.718281828459045
Math.LN2 // 0.6931471805599453
Math.LN10 // 2.302585092994046
Math.LOG2E // 1.4426950408889634
Math.LOG10E // 0.4342944819032518
Math.PI // 3.141592653589793
Math.SQRT1_2 // 0.7071067811865476
Math.SQRT2 // 1.4142135623730951

这些属性都是只读的，不能修改

静态方法

  • Math.abs() 取绝对值
  • Math.max() 取最大值 接收一组数据
  • Math.min() 取最小值 接收一组数据
    • 如果参数为空, Math.min 返回 Infinity , Math.max 返回 -Infinity 。
  • Math.floor() 向下取整 返回小于参数值的最大整数，math.floor(12.9) =12
  • Math.ceil() 向上取整
  • Math.round() 四舍五入
    • Math.round(-1.5) // -1
    • Math.round(0.5) // 1
  • Math.pow(a,b) 求次方，求a的b次方
  • Math.sqrt() 求根，开方，
    • 返回参数值的平方根。如果参数是一个负值，则返回NaN
  • Math.log 以 e 为底的自然对数值
  • Math.exp(n) e 的n次方
  • Math.random() 返回0到1之间的一个伪随机数，可能等于0，但是一定小于1

借Math的方法

因为Math的方法在某些场合下比较适用，我们想要直接适用Math的一些方法，比如求最大值的max

但是，Math.max不接受一个数组作为参数。所以需要使用其他方法使用这个方法。

Math.max.apply(null,arr); apply方法，可以借用math里面的方法，第一个参数为null，第二个参数是数组。然后就可以求出数组的最大值了。

三角函数方法

Math.sin()：返回参数的正弦（参数为弧度值）
Math.cos()：返回参数的余弦（参数为弧度值）
Math.tan()：返回参数的正切（参数为弧度值）
Math.asin()：返回参数的反正弦（返回值为弧度值）
Math.acos()：返回参数的反余弦（返回值为弧度值）
Math.atan()：返回参数的反正切（返回值为弧度值）

生成随机颜色

利用random生成随机数，然后我们自定义一个字符串，也就是十六进制的所有位0123456789abcdef。

利用随机数乘以16，然后取整，再从字符串提取字符。最后把字符拼接。得到随机颜色。

要向下取整，防止超过最大值。

Date对象 日期

  • Date 对象可以作为普通函数直接调用，返回一个代表当前时间的字符串
Date()
'Tue Oct 26 2022 10:31:34 GMT+0800 (中国标准时间)'

即使带有参数， Date 作为普通函数使用时，返回的还是当前时间

Date(2000, 1, 1)
// 'Tue Oct 26 2022 10:31:34 GMT+0800 (中国标准时间)'
  • Date 还可以当作构造函数使用。对它使用 new 命令，会返回一个 Date对象的实例。如果不加参数，实例代表的就是当前时间

var today = new Date();

作为构造函数时， Date 对象可以接受多种格式的参数，返回一个该参数对应的时间实例

// 参数为时间零点开始计算的毫秒数
new Date(1635215676627)
// Tue Oct 26 2021 10:34:36 GMT+0800 (中国标准时间)
// 参数为日期字符串
new Date('January 6, 2020');
// Mon Jan 06 2020 00:00:00 GMT+0800 (中国标准时间)
// 参数为多个整数，
// 代表年、月、日、小时、分钟、秒、毫秒
new Date(2020, 0, 1, 0, 0, 0, 0)
// Wed Jan 01 2020 00:00:00 GMT+0800 (中国标准时间)
  • 各种类型的参数
new Date('2022-2-15')
new Date('2022/2/15')
new Date('02/15/2022')
new Date('2022-FEB-15')
new Date('FEB, 15, 2022')
new Date('FEB 15, 2022')
new Date('Feberuary, 15, 2022')
new Date('Feberuary 15, 2022')
new Date('15 Feb 2022')
new Date('15, Feberuary, 2022')

日期的运算

传两个日期，做差，得到毫秒

var d1 = new Date(2000, 2, 1);
var d2 = new Date(2000, 3, 1);
d2 - d1     // 2678400000   毫秒

静态方法

  • Date.now 方法返回当前时间距离时间零点（1970年1月1日 00:00:00 UTC）的毫秒数，相当于 Unix 时间戳乘以1000

    • 就是时间戳
    • 时间戳是前端用来和服务器交互的

  • Date.parse 方法用来解析日期字符串，返回该时间距离时间零点（1970年1月1日 00:00:00）的毫秒数

    • 如果解析失败，返回 NaN

Date.parse(‘Aug 9, 2022’)
Date.parse(‘January 26, 2022 13:51:50’)
Date.parse(‘Mon, 25 Dec 2022 13:30:00 GMT’)
Date.parse(‘Mon, 25 Dec 2022 13:30:00 +0430’)
Date.parse(‘2022-10-10’)
Date.parse(‘2022-10-10T14:48:00’)

实例方法/to类

Date 的实例对象，有几十个自己的方法，分为三类

  • to 类：从 Date 对象返回一个字符串，表示指定的时间。
    get 类：获取 Date 对象的日期和时间。
    set 类：设置 Date 对象的日期和时间。

  • toUTCString 方法返回对应的 UTC 时间，也就是比北京时间晚8个小时

  • toDateString 方法返回日期字符串（不含小时、分和秒）

  • toTimeString 方法返回时间字符串（不含年月日）

  • toLocaleDateString 方法返回一个字符串，代表日期的当地写法（不含小时、分和秒）

  • toLocaleTimeString 方法返回一个字符串，代表时间的当地写法（不含年月日）

实例方法/get类

Date 对象提供了一系列 get* 方法，用来获取实例对象某个方面的值

getTime()：返回实例距离1970年1月1日00:00:00的毫秒数
getDate()：返回实例对象对应每个月的几号（从1开始）
getDay()：返回星期几，星期日为0，星期一为1，以此类推
getYear()：返回距离1900的年数
getFullYear()：返回四位的年份
getMonth()：返回月份（0表示1月，11表示12月）
getHours()：返回小时（0-23）
getMilliseconds()：返回毫秒（0-999）
getMinutes()：返回分钟（0-59）
getSeconds()：返回秒（0-59）

实例方法/set类

Date 对象提供了一系列 set* 方法，用来设置实例对象的各个方面

setDate(date) ：设置实例对象对应的每个月的几号（1-31）
setYear(year) : 设置距离1900年的年
setFullYear(year [, month, date]) ：设置四位年份
setHours(hour [, min, sec, ms]) ：设置小时（0-23）
setMilliseconds() ：设置毫秒（0-999）
setMinutes(min [, sec, ms]) ：设置分钟（0-59）
setMonth(month [, date]) ：设置月份（0-11）
setSeconds(sec [, ms]) ：设置秒（0-59）
setTime(milliseconds) ：设置毫秒时间戳

唯一id

因为时间戳是不可重复的，所以，一般使用随机数拼接时间戳。创建唯一的id。只要时间戳不一样，id就永远不一样。所以id越长越安全。

三十六进制：0123456789abcdefghijklmnopqrstuvwxyz

使用tostring(36) 可以把时间戳变成三十六进制的字符串。这样就是随机数+时间戳的三十六进制的超级防伪了。

DOM

是js与页面交互的桥梁

js通过DOM操作浏览器

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删内容）

浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言

  • 节点
    DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子

    • 就像爬虫分析网页的元素一样

  • 节点的类型有七种

Document：整个文档树的顶层节点，就是html文件
DocumentType：doctype标签，html的声明
Element：网页的各种HTML标签，所有的元素
Attribute：网页元素的属性（比如class=“right”）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段

  • 节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树

  • 除了根节点，其他节点都有三种层级关系

    • 父节点关系（parentNode）：直接的那个上级节点

    • 子节点关系（childNodes）：直接的下级节点

    • 同级节点关系（sibling）：拥有同一个父节点的节点

Node.nodeType属性

不同节点的nodeType属性值和对应的常量如下

文档节点（document）：9，对应常量Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE
属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE

属性

  • document.doctype

指向 DOCTYPE 节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成 !DOCTYPE html 。如果网页没有声明 DTD，该属性返回null

var doctype = document.doctype; // "<!DOCTYPE html>"

  • document.documentElement 文档的根节点（root）html

  • document.body，document.head

  • document.forms 属性返回所有 form 表单节点

  • document.images 属性返回页面所有 img 图片节点

  • document.scripts 属性返回所有 script 节点

    • 一般是判断页面有没有js文件

    • var scripts = document.scripts;
if (scripts.length !== 0 ) {
	console.log('当前网页有脚本');
}

  • document.domain 属性返回当前文档的域名

获取元素

  • document.getElementsByTagName() 通过元素类型获取

document.getElementsByTagName 方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection 实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集

通过这种方法可以获取页面中的元素，也可以使用innerHTML修改元素里面的内容

document.getElementsByTagName(‘p’);

  • document.getElementsByClassName() 通过类名获取，常用

包括了所有 class 名字符合指定条件的元素，元素的变化实时反映在返回结果中

由于 class 是保留字，所以 JavaScript 一律使用 className 表示 CSS 的class

参数可以是多个 class ，它们之间使用空格分隔

  • document.getElementsByName() 通过name属性定位

  • document.getElementById() 通过id获取

  • document.querySelector() 通过css的选择器，就是.box等等，这个是只返回一个

  • document.querySelectorAll() 和上面的用法一样，这里是返回符合的所有元素

创建元素

  • document.createElement 生成元素节点

  • document.createTextNode 生成文本

  • document.createAttribute 生成属性

    • className.value=‘box’ 赋值

  • 添加元素，父元素.appendChild(子元素)

Element对象_属性

Element对象对应网页的 HTML 元素。每一个 HTML 元素，在DOM 树上都会转化成一个Element节点对象（以下简称元素节点）

  • Element.id 属性返回指定元素的 id 属性，该属性可读写
  • Element.className 属性用来读写当前元素节点的 class 属性。它的值是一个字符串，每个 class 之间用空格分割
  • Element.classList
    • add() ：增加一个 class。
    • remove() ：移除一个 class。
    • contains() ：检查当前元素是否包含某个 class。
    • toggle() ：将某个 class 移入或移出当前元素。没有就添加，有就移除
    • div.classList.add('foo', 'bar');
  • Element.innerHTML 该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括 HTML 和 body 元素
  • Element.innerText innerText 和 innerHTML 类似,不同的是 innerText 无法识别元素，会直接渲染成字符串

Element获取元素位置一

clientHeight 获取元素高度包括 padding 部分，但是不包括 border 、 margin
clientWidth 获取元素宽度包括 padding 部分，但是不包括 border 、 margin
clientLeft 元素节点左边框（left border）的宽度
clientTop 元素节点上边框（top border）的高度
scrollHeight 元素总高度，它包括 padding ，但是不包括 border 、 margin 包括溢出的不可见内容
scrollWidth 元素总宽度，它包括 padding ，但是不包括 border 、 margin 包括溢出的不可见内容
scrollLeft 元素的水平滚动条向右滚动的像素数量
scrollTop 元素的垂直滚动条向下滚动的像素数量
offsetHeight 元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border
offsetWidth 元素的 CSS 水平宽度（单位像素），包括元素本身的高度、padding 和 border
offsetLeft 到定位父级左边界的间距
offsetTop 到定位父级上边界的间距

Element对象_方法

  • Element.focus 方法用于将当前页面的焦点，转移到指定元素上

document.getElementById('my-span').focus();

类似百度网页，一打开百度，默认就点击了搜索框。

  • Element.blur 方法用于将焦点从当前元素移除 移除焦点
  • Element.remove 方法用于将当前元素节点从它的父节点移除
  • Element.getBoundingClientRect 方法返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的所有信息
    • getBoundingClientRect 方法返回的 rect 对象，具有以下属性（全部为只读）
      • x ：元素左上角相对于视口的横坐标
      • y ：元素左上角相对于视口的纵坐标
      • height ：元素高度
      • width ：元素宽度
      • left ：元素左上角相对于视口的横坐标，与 x 属性相等
      • right ：元素右边界相对于视口的横坐标（等于 x + width ）
      • top ：元素顶部相对于视口的纵坐标，与 y 属性相等
      • bottom ：元素底部相对于视口的纵坐标（等于 y + height ）

Attribute属性的操作

HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）

  • 元素节点提供四个方法，用来操作属性

    • getAttribute()
    • setAttribute()
    • hasAttribute()
    • removeAttribute()

  • Element.getAttribute 方法返回当前元素节点的指定属性。如果指定属性不存在，则返回 null

    • div.getAttribute('align')

是返回属性的值。

  • Element.setAttribute 方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性

    • d.setAttribute('align', 'center');
    • myImage.setAttribute('src','images/girl.png');

  • Element.hasAttribute 方法返回一个布尔值，表示当前元素节点是否包含指定属性

    • d.hasAttribute('align')

  • Element.removeAttribute 方法用于从当前元素节点移除属性

    • d.removeAttribute('class');

  • dataset 属性

    • <div id="box" data-itbaizhan="itbaizhan"> 比如data-itbaizhan
    • var n = document.getElementById(‘box’);
    • n.dataset.itbaizhan 定位了data-itbaizhan.对，就是可以省略前面的data前缀，当然，在设置属性的时候，要手动添加这个前缀

Text 节点

文本节点（ Text ）代表元素节点（ Element ）和属性节点（ Attribute ）的文本内容。

使用率很低

Text节点属性

  • data 属性用来设置或读取文本节点的内容
// 读取文本内容
document.querySelector('p').firstChild.data
// 设置文本内容
document.querySelector('p').firstChild.data ='Hello World';

文本写在标签里面，这个文本是标签的子元素。文本和元素本身不是平级的。

  • length 属性返回当前文本节点的文本长度

Text节点方法

就是对text节点进行增删查改

  • appendData() 在 Text 节点尾部追加字符串
  • deleteData(index,len) 删除 Text 节点内部的子字符串，第一个参数为子字符串开始位置，第二个参数为子字符串长度
  • insertData() 在 Text 节点插入字符串，第一个参数为插入位置，第二个参数为插入的子字符串
  • replaceData() 用于替换文本，第一个参数为替换开始位置，第二个参数为需要被替换掉的长度，第三个参数为新加入的字符串
  • substringData() 用于获取子字符串，第一个参数为子字符串在 Text 节点中的开始位置，第二个参数为子字符串长度
  • remove 方法用于移除当前 Text 节点

DocumentFragment 节点（了解）

本质是一个临时文件，存放我们想要创建的标签。然后一次性插入页面

DocumentFragment 节点本身不能被插入当前文档，插入文档中的是他里面的子元素

多次操作DOM，可以使用 DocumentFragment 变成一次操作，节省了内存的消耗

Node 节点属性

所有 DOM 节点都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础

节点的类型有七种

Document：整个文档树的顶层节点
DocumentType：doctype标签 (用不到)
Element：网页的各种HTML标签
Attribute：网页元素的属性（比如class=“right”）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段

  • nodeName 属性返回节点的名称

  • 不同节点的 nodeName 属性值如下

    • 文档节点（document）： #document
    • 元素节点（element）：大写的标签名
    • 属性节点（attr）：属性的名称
    • 文本节点（text）： #text
    • 文档片断节点（DocumentFragment）： #document-fragment
    • 文档类型节点（DocumentType）：文档的类型
    • 注释节点（Comment）： #comment

  • nodeValue 属性返回一个字符串，表示当前节点本身的文本值，该属性可读写

  • textContent 属性返回当前节点和它的所有后代节点的文本内容

  • nextSibling 属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回 null

  • previousSibling 属性返回当前节点前面的，距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回 null

  • parentNode 属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）

  • firstChild/lastChild

    • firstChild 属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回 null
    • lastChild 属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回 null 。用法与 firstChild 属性相同

  • childNodes 属性返回一个类似数组的对象（ NodeList 集合），成员包括当前节点的所有子节点

    • 可以使用数组的方法去读取，但是不能使用数组的方式去修改
    • 使用该属性，可以遍历某个节点的所有子节点

  • appendChild 方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点

    • 动态增加内容

  • hasChildNodes 方法返回一个布尔值，表示当前节点是否有子节点

  • cloneNode 方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点

  • insertBefore 方法用于将某个节点插入父节点内部的指定位置

    • insertBefore 方法接受两个参数，第一个参数是所要插入的节点newNode ，第二个参数是父节点 parentNode 内部的一个子节点referenceNode 。 newNode 将插在 referenceNode 这个子节点的前面。返回值是插入的新节点 newNode 。

  • removeChild 方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点

  • replaceChild 方法用于将一个新的节点，替换当前节点的某一个子节点

    • replaceChild 方法接受两个参数，第一个参数 newChild 是用来替换的新节点，第二个参数 oldChild 是将要替换走的子节点。返回值是替换走的那个节点 oldChild

CSS操作

  • HTML 元素的 style 属性
    操作 CSS 样式最简单的方法，就是使用网页元素节点的 setAttribute 方法直接操作网页元素的 style 属性

div.setAttribute( 'style', 'background-color:red;' + 'border:1px solid black;' );

  • 元素节点的 style 属性
var divStyle =
document.querySelector('div').style;
divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';
  • cssText 属性
var divStyle = document.querySelector('div').style;
divStyle.cssText = 'background-color: red;border: 1px solid black;height: 100px;width: 100px;';

事件处理

就是控件与槽函数之间的桥梁，事件

  • 事件处理程序分为：
    1 HTML事件处理
    2 DOM0级事件处理
    3 DOM2级事件处理
    4 IE事件处理 （弃用）

  • HTML事件

    • 优点：简单
    • 缺点：html和js写在一个文件里面，不利于后期维护
    • 移除事件，只能删掉槽函数或者覆盖槽函数（弃用）
<!DOCTYPE html>
<html>
     <head lang="en">
        <meta charset="UTF-8">
        <title>Js事件详解--事件处理</title>
    </head>
    <body>
        <div id="div">
            <button id="btn1" onclick="demo()">按钮</button>
        </div>
        <script>
            function demo(){
                alert("hello html事件处理");
           }
        </script>
    </body>
</html>

就是在元素里面增加onclick属性，后面写要执行的事件。

  • DOM0级事件处理
    • 优点：html和js分离
    • 缺点：同名槽函数会覆盖，以最后一个为准。如果没有同名函数就没问题了
    • 使用οnclick=null移除事件
<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        var btn1=document.getElementById("btn1");
        btn1.onclick=function(){alert("HelloDOM0级事件处理程序1");}//被覆盖掉
        btn1.onclick=function(){alert("HelloDOM0级事件处理程序2");}
    </script>
</body>

和html事件一样，就是不用特意添加onclick属性了。

  • DOM2级事件处理
    • 优点：html与js分离，事件不覆盖
    • 缺点：复杂
    • 移除事件removeEventListener(“click”,demo2);，第一个参数是事件，第二个是槽函数
<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        var btn1=document.getElementById("btn1");
        btn1.addEventListener("click",demo1);
        btn1.addEventListener("click",demo2);
        btn1.addEventListener("click",demo3);
		function demo1(){
            alert("DOM2级事件处理程序1")
        }
        function demo2(){
            alert("DOM2级事件处理程序2")
        }
        function demo3(){
            alert("DOM2级事件处理程序3")
        }      
        btn1.removeEventListener("click",demo2);
    </script>
</body>

使用addEventListener方法，不用onclick了，第一个参数是事件，比如click，第二个是槽函数

  • IE事件处理程序（基本没人用）

    • IE实现了与DOM中类似的两个方法： attachEvent() 和 detachEvent()

  • 常见事件类型

1 鼠标事件
2 键盘事件
3 表单事件
4 窗口事件
5 焦点/剪贴板事件
6 网页状态事件
7 Touch事件 手机或者pad端的点击，触摸事件

鼠标事件

鼠标事件指与鼠标相关的事件，具体的事件主要有以下一些

1 click：按下鼠标时触发
2 dblclick：在同一个元素上双击鼠标时触发
3 mousedown：按下鼠标键时触发
4 mouseup：释放按下的鼠标键时触发
5 mousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。
6 mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
7 mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
8 mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
9 mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件
10 wheel：滚动鼠标的滚轮时触发

这些方法在使用的时候，除了DOM2级事件，都需要添加前缀on，比如onclick，ondblclick

鼠标的按下和抬起的应用：如果我们点错了某个东西，想要挽回的时候，会把鼠标按住移开。不触发鼠标抬起函数。有一定的容错率。

mousemove在使用的时候，被调用的次数特别高，以像素为单位，每移动超过像素，就会触发，导致对应的函数每秒几百次的执行。后期通过优化减少函数的执行次数。

事件6，7在鼠标移动到容器内部的子节点时，就是鼠标已经在容量里面了，然后再移动到内部的子节点，就不会触发事件。

事件8，9，当鼠标在容器内移动到子节点的时候，会触发一次函数。进入子节点的时候，会触发两个事件，一个是离开父节点，一个是进入子节点

事件1，5的使用频率比较高

事件流

处理子父容器的函数执行顺序。

场景：一个按钮在盒子里面，按钮和盒子都有鼠标点击事件。按下按钮的时候，是先触发按钮点击，还是先触发盒子点击呢？

在浏览器刚兴起的时代，有两家公司，微软IE和网景Net

微软的执行顺序是----事件冒泡流。先子元素再父元素。

网景是—事件捕获流，先父元素再子元素。

  • 事件冒泡

    • IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
    • 就是由内到外的顺序执行。从子子子子元素，一级级往上执行

  • 事件捕获

    • 事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件
    • 跟冒泡反着来
    • 只能使用dom2级事件处理，才能触发

  • 使用事件捕获的方法：

    • 首先是使用addEventListener(“type”,callback,boolean)
      • 第三个参数为true的时候，使用事件捕获流，为false 的时候，就是事件冒泡流了。默认是false。
      • 第二个参数是槽函数
    • d.addEventListener('click', function(){ console.log('div被点击') },true); 后面的true就是使用事件捕获流

Event事件对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数。

事件对象：event

监听函数：就是我们写的网站或者app，是一个巨大的无限循环。这个无限循环一直在等待用户的输入。比如按下鼠标等等，等待的过程，也就是监听的过程。一旦某个事件和我们写的槽函数对应上了。就会执行这个槽函数。这个过程叫监听过程，整体叫监听函数

  • Event对象属性
    1 Event.currentTarget
    2 Event.Target
    3 Event.type

  • Event.currentTarget属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点

    • 返回触发函数的元素本身。比如按钮标签。

  • Event.target属性返回原始触发事件的那个节点，即事件最初发生的节点。事件传播过程中，不同节点的监听函数内部的Event.target与Event.currentTarget属性的值是不一样的，前者总是不变的，后者则是指向监听函数所在的那个节点对象

  • Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读

    • 就是事件类型，我们写的是盒子点击触发函数，事件类型就是点击。如果是盒子双击，事件类型就是双击

  • currentTarget与target的区别

    • 前者永远指向会调用槽函数的元素。后者是指向用户点击的元素。
    • 就是我们设计一个盒子，盒子里面有一个按钮。我们只给盒子添加点击事件。当用户点击盒子里面的按钮的时候，随着事件冒泡流。这个点击的行为会传到盒子上，进而触发盒子的槽函数。currentTarget就指向盒子，而target指向的是按钮。因为用户点击的是按钮，按钮才是事件真正的触发者。

  • event方法

  • Event.preventDefault方法取消浏览器对当前事件的默认行为。阻止默认行为。

    • 比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了

  • stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数

    • 阻止事件冒泡，阻止事件逐级上传

键盘事件

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件

1 keydown：按下键盘时触发。
2 keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
3 keyup：松开键盘时触发该事件

当我们按下一个按键的时候，事件12会不停的被触发。事件1的按键按下，事件2是按键被持续按下。

按下ctrl，只有事件1被触发。抬起只有事件3触发，没有事件2，因为ctrl没有值

  • event对象 keyCode:唯一标识
    • 我们在上面可以获取按键的事件，但是无法定位是那个按键被按下。需要通过keycode来获取按下的是什么按键
    • 然后可以监听这个按键，执行对应的槽函数。
    • e.keycode == 65 用户按下的a按键

表单事件

用于搜索框

  • 表单事件是在使用表单元素及输入框元素可以监听的一系列事件

    1 input事件
    2 select事件
    3 Change事件
    4 reset事件
    5 submit事件

  • input事件

    • 当 input、select、textarea 的值发生变化时触发。对于复选框（ input type=checkbox ）或单选框（ input type=radio ），用户改变选项时，也会触发这个事件。input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。
    • 就是我们在输入框输入的每一个字，都会被监听。类似我们在搜索框，输入关键词，弹出一堆相关的话题。
    • 可以打印输入框的内容，e.target.value

  • select事件 当在 input、textarea 里面选中文本时触发

    • 在输入框里面输入内容之后，再用鼠标选中就可以触发了
    • 还可以打印选中的文本

  • Change 事件 当 input、select、textarea 的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发

    • 就是我们输入文本的时候，按下回车，表名我们已经结束输入了，就会触发
    • 或者是我们输入完文本，鼠标的焦点离开了输入框，也会触发。
    • input是按键按下就触发了。

  • reset 事件，submit 事件 这两个事件发生在表单对象 form 上，而不是发生在表单的成员上。

    • reset事件当表单重置（所有表单成员变回默认值）时触发。
    • submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是 form 元素，而不是 button 元素，因为提交的是表单，而不是按钮

​

input和change常用

窗口事件

scroll 事件
resize 事件

  • scroll 事件在文档或文档元素滚动时触发，主要出现在用户拖动滚动条
    • 也可以指定元素滚动触发，使用率很少
    • window.addEventListner
    • 触发次数太高了，以后还要优化
    • 获取页面的滚动高度：document.documentElement.scrolltop;
  • resize 事件在改变浏览器窗口大小时触发

焦点/剪贴板事件

  • 焦点事件

    • 在元素节点和document对象上面，与获得或失去焦点相关。
    • 就是鼠标点击了输入框

    四个事件

    1 focus：元素节点获得焦点后触发，该事件不会冒泡。
    2 blur：元素节点失去焦点后触发，该事件不会冒泡。
    3 focusin：元素节点将要获得焦点时触发，发生在focus事件之前。该事件会冒泡。(少用)
    4 focusout：元素节点将要失去焦点时触发，发生在blur事件之前。该事件会冒泡。(少用)

username.onfocus = function(e){
   console.log("获得焦点",e.target.value);
}
username.onblur = function(e){
   console.log("失去焦点",e.target.value);
}
username.focus();打开页面的时候，默认获得焦点
  • 剪贴板事件

cut：剪贴
copy：复制
paste：粘贴

password.oncut = function(e){
    console.log("剪切");
}
password.oncopy = function(e){
    console.log("复制");
}

比如学习通考试的时候阻止拷贝

网页状态事件

1 load
2 DOMContentLoaded 事件
3 readystatechange 事件

  • Load事件

    • 资源加载完成之后触发，包含DOM和图片等资源都加载完成后，才会触发load
    • 应用场景：加载一张超大图片，等图片资源全部加载完成，再显示

  • DOMContentLoaded 事件

    • 网页下载并解析完成以后，浏览器就会在document对象上触发DOMContentLoaded 事件。
    • 这时，仅仅完成了网页的解析（整张页面的 DOM 生成了），所有外部资源（样式表、脚本、iframe 等等）可能还没有下载结束。也就是说，这个事件比load事件，发生时间早得多

  • readystatechange 事件

    • 此事件我们会放在网络请求部分讲解

Touch事件

只能用dom2级事件处理

只能是手机和pad上才能触发

触摸引发的事件，有以下几种。可以通过TouchEvent.type属性，查看到底发生的是哪一种事件

1 touchstart：用户开始触摸时触发
2 touchend：用户不再接触触摸屏触发
3 touchmove：用户移动触摸点时触发，高频触发
4 touchcancel：系统取消touch事件的时候触发（使用率低）就是我们的手指移到屏幕外。系统自动干掉了

事件代理(事件委托)

让父元素处理子元素的事件

  • 利用的是事件冒泡流

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）

应用场景：超多列表项的控件，在之前我们是给每个列表项添加函数，每个列表项有自己的方法。当列表项足够多的时候，一个个添加就很麻烦，便有了事件代理。

通过js动态添加的元素，不能预先写函数，只能使用这种事件代理

获取用户点击的列表项：e.target.innerHTML

this关键字

  • 事件中的this 监听函数内部的this指向触发事件的那个元素节点
  • 对象中的this 永远指向调用者，而难的就是你是否可以找到调用者
btn.onclick = function () {
  console.log(this); //this==e.target
};

var username = 'sxt';
var user = {
    username:"itbaizhan",
    getName:function(){
		console.log(username);  打印的是sxt，因为没有指定对象user
        console.log(this.username);
   }
}

函数_闭包概念

闭包（closure）是 Javascript 语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现

理解闭包，理解变量作用域

  • 要理解闭包，首先必须理解Javascript特殊的变量作用域
    • 变量的作用域无非就是两种
      1 全局变量（全局作用域）
      2 局部变量（函数级作用域）

在其他语言里面，是一个大括号是一个作用域。

在js语言里面，除了函数里面声明的变量都是全局变量，哪怕是循环里面创建的变量，或者if语句里面的变量，都是全局作用域。

在函数外部自然无法读取函数内的局部变量

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量

  • 如何从外部读取局部变量, 出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。那就是在函数的内部，再定义一个函数。
function getNum(){
    var n = 100;
    function getN(){   
        alert(n); // 100
	}
    return getN;
}

既然 getN 可以读取 getNum 中的局部变量，那么只要把 getN 作为返回值，我们不就可以在 getNum 外部读取它的内部变量了吗

闭包就是能够读取其他函数内部变量的函数 getn就是闭包

闭包特点

  • 读取函数内部的变量

  • 变量的值始终保持在内存中

  • 使用闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题

闭包应用场景

为了储存临时变量

遇到的问题：我们调用count，拿到的返回值都是16，也就是循环结束的结果。我们没有办法得到中间值

function count() {
    var arr = [];
    for (var i = 1; i <= 3; i++) {
        arr.push(function (){return i * i;});
   }
    return arr;
}

解决方法：

function count() {
    var arr = [];
    for (var i = 1; i <= 3; i++) {
        arr.push(    (function (n){return (function (){return n * n;})})(i)   );
   }
    return arr;
}

就是把循环体内的函数外部再套一层函数。(function (n){return 原来的函数})(i)

闭包中的this关键字

在闭包里面使用this，this永远指向的是window

除非在闭包里面给this重新赋值。var aaa = this,return aaa.name

DOM实操

创建两个文件夹css和js。要和html分离开来。

导入js：<script src="test.js"></script>

为什么没有闭包的时候，总是越界访问呢

在 JavaScript 中，尤其是在使用 var 声明变量时，如果没有采用闭包，确实会导致越界访问的问题。这个现象主要是由于变量作用域和事件处理程序的异步特性引起的。

  1. 变量的作用域和提升

当你使用 var 声明一个变量时，变量具有函数作用域，而不是块作用域。这意味着在同一个函数内部，无论你在哪里声明了这个变量，它都是可见的。而在 for 循环中，i 被定义在函数的作用域下，所以所有的事件处理程序实际上都是引用同一个 i 变量。

  1. 循环和事件处理程序的执行时机

在 for 循环中，迭代会快速完成，随着每一次迭代，i 的值都会增加。

事件处理程序的执行是异步的，也就是说，事件处理程序不是在 for 循环运行时立即执行的，而是在循环完成后，当用户与界面进行交互（例如鼠标悬停时）时才会被调用。

为什么闭包可以解决这个问题

当你使用闭包时，它会创建一个新的作用域，每次循环迭代捕获当时的 i 值。这意味着每个事件处理程序会有自己独立的 i 值，确保它能正确地引用到对应的列表项。

for (var i = 0; i < lis.length; i++) {
    (function(i) { // 创建闭包
        lis[i].onmouseenter = function() {
            console.log(i); // 这里输出的是当前的 i 值
        };
    })(i); // 立即执行函数，把当前的 i 值传入
}

在这里的流程是：

  1. 每次迭代时，你创建了一个新的函数，并且将当前的 i 作为参数传入。
  2. 对于每一次的 onmouseenter，它都“记住”了当时的 i 的值。
  3. 因此，当你悬停在某个 li 元素上时，输出的 i 是在其各自上下文中存在的值，而不是循环结束后的 i 值。

  • 总结

  • 越界访问的原因：循环结束后使用的同一个 i 变量，导致所有事件处理程序都引用最后的值（即 lis.length），这是一个无效索引，造成越界。

  • 闭包的优势：通过使用闭包，可以为每次迭代创建一个新作用域，捕获当时的 i 值，从而使得每个事件处理程序可以正确地使用它们各自的值，避免了越界访问。

  • 有循环和事件处理的时候，使用闭包包一下就完了。

  • 也可以使用this解决作用域问题，在对象里面重新设定一个属性。因为this只能在对象里面访问变量，变相的开辟新的作用域。也能实现闭包的功能。

Tab切换

鼠标移动到列表项刷新盒子内容。

类似css里面的hover

网页的效果：

请添加图片描述

网页源代码效果：

在这里插入图片描述

  • js部分
// 获取页面元素
var lis = document.querySelector(".box-up").querySelectorAll("li");
var divs = document.querySelector(".box-down").querySelectorAll("div");
// 给列表项添加事件
for (var i = 0; i < lis.length; i++) {
    (function (i){
        lis[i].onmouseenter = function() {
        for (var j =0;j<lis.length; j++) {
            lis[j].removeAttribute("class");
            divs[j].removeAttribute("class");
        }
        lis[i].setAttribute("class", "tab-li");
        divs[i].setAttribute("class", "tab-div");
        }
    }(i))
}

看似是for循环，每循环一次就执行一次内部的方法。实际上是事件处理部分，也就是内部的方法，会比for循环慢一拍。导致内部的方法，每次都只能拿无效的数据。所以，使用了闭包，强制给传进去的参数i提供一个作用域。来让这个方法生效。

使用for循环的目的：给每个列表项都添加鼠标事件。

<div class="box">
    <div class="box-up">
        <ul>
            <li class="tab-li">百度</li>
            <li>新浪</li>
            <li>淘宝</li>
            <li>京东</li>
            <li>网易</li>
        </ul>
    </div>
    <div class="box-down">
        <div class="tab-div">百度内容</div>
        <div>新浪内容</div>
        <div>淘宝内容</div>
        <div>京东内容</div>
        <div>网易内容</div>
    </div>
</div>

需要先给一个列表项，或者div容器设定class属性。只需要一个就行。我们使用js通过事件，把这个class属性再移到对应的列表项。就完成了鼠标滑动效果。

瀑布流

页面布局

  • 瀑布流

    • 瀑布流是一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部
    • 就是我们使用壁纸网站的时候，因为一个页面只能放几张壁纸，需要不断下滑页面，才能查看更多。

  • 瀑布流特点
    1 多列布局
    2 每列等宽
    3 上拉加载

动态设置内容居中

使用场景：之前设计小米网页的时候，使用的是固定距离，或者响应式布局。都是通过css实现的。还是有点不尽人意。现在通过js来实现内容居中操作。

考虑的问题：内容居中，两边空余多少。使用js获取页面宽度，然后除以图片的宽度，得到一行最多几张图片。然后用最大值向下取整，减一。余出一张图片的宽度作为两边的留白。

效果：这样设计的网页，在多大的屏幕上都可以适配，小屏幕可能一行显示两三张图片，大一点的屏幕就五六页。超大屏幕看具体尺寸，一行就几十页了。更灵活。

  • 步骤

    获取所有需要操作的元素

    ​ 获取父元素，为了设置宽度和左右的外边距（利用的还是css的特性）

    ​ 获取子元素，方便计算单个图片容器的宽度（包括外边距）

    获取屏幕的宽度

    获取一个图片元素容器的宽度

    动态计算页面横向最多可放置的图片数量

    动态设置样式，让内容左右居中

// 设置页面左右居中效果
function waterFlow(){
    // 获取页面盒子
    var box = document.getElementsByClassName("box")[0];
    // 获取图片容器
    var boximg = document.getElementsByClassName("boximg");
    // 获取屏幕宽度
    var screenWidth = document.documentElement.clientWidth;
    // 获取图片容器宽度
    var chlidWidth = boximg[0].offsetWidth; // 要使用offsetWidth，内边距和边框也算进去
    // 计算一行图片个数
    var number1 = Math.floor(screenWidth/chlidWidth)-1;
    // 设置页面盒子的左右宽度和居中效果
    box.style.cssText = "width:" + number1*chlidWidth + "px;margin:0 auto;";
}
waterFlow();

在获取父级容器的时候，我使用的是class属性，但是这个页面里面貌似有两个box容器。必须选第一个，也就是我们创建的那个。不然就定位不到了。

动态设置图片位置

获取一列中最小高度，后续每张图片都是放在一列中最小高度的下面

1 获取第一行图片高度，放入到数组中
2 获取后续图片，放入到数组高度最小的对应图片下面

  • 步骤：

设置一个数组，数组元素的个数，就是列数。越过第一行图片的处理，然后从第二行图片开始，进行图片摆放

把第一行图片的高度进入数组。然后使用Math对象，求数组最小值。然后把新图片放在最小高度的列上，再更新最小高度列的高度，就是把新图片的高度加上去。

因为在上一步，我们已经得到了全部的图片元素了。只需要给他们设置对应绝对定位的相对位置，就ok了。

思路：假设是三列图片，那么数组里面就有三个元素，每一个元素代表这一列的高度。后面的图片，只需要根据第一行图片的左边距对齐，和这一列的高度对齐，然后放图片上去，再更新这一列的高度即可。

// 设置页面左右居中效果
function waterFlow() {
    // 获取页面盒子
    var box = document.getElementsByClassName("box")[0];
    // 获取图片容器
    var boximg = document.getElementsByClassName("boximg");
    // 获取屏幕宽度
    var screenWidth = document.documentElement.clientWidth;
    // 获取图片容器宽度
    var chlidWidth = boximg[0].offsetWidth; // 要使用offsetWidth，内边距和边框也算进去
    // 计算一行图片个数
    var number1 = Math.floor(screenWidth / chlidWidth) - 1;
    // 设置页面盒子的左右宽度和居中效果
    box.style.cssText = "width:" + number1 * chlidWidth + "px;margin:0 auto;";
    setimg(boximg, number1)
}

waterFlow();

// 放置图片
function setimg(boximg, number1) {
    // 生成一个存放每列高度的数组
    var arr = [];
    // 使用循环给每个图片设置位置
    for (var i = 0; i < boximg.length; i++) {
        if (i < number1) {
            arr[i] = boximg[i].offsetHeight; // 第一行不用设置位置，但是要把高度记录
        } else {
            // 获取最矮列
            var minheight = Math.min.apply(null, arr);
            console.log(minheight);
            // 获取最矮列是第几列
            var minheightIndex = arr.indexOf(minheight);
            console.log(minheightIndex);
            // 设计绝对定位
            boximg[i].style.position = "absolute";
            boximg[i].style.top =minheight +'px';
            boximg[i].style.left = boximg[minheightIndex].offsetLeft + 'px';
            // 更新最矮列的高度
            arr[minheightIndex] += boximg[i].offsetHeight;
        }
    }
}

现在还有一个问题，由于图片资源加载的比dom结构慢很多，页面都已经布局好了还没有图片，等图片加载出来的时候，由于页面结构已经固定，导致图片重叠。所以，我们要把dom的加载放在图片加载之后。

  • 把dom加载放在图片加载完之后，就是把整个瀑布流函数的调用放在window.onload方法里面

就可以解决图片重叠的问题了，这个是网络问题，不是代码结构问题。还好有办法可以解决。

window.onload = function(){
    waterFlow();
}
// 设置页面左右居中效果
function waterFlow() {}
// 放置图片
function setimg(boximg, number1) {}

页面触底

就是判断用户是不是把网页滑到了最底部，意味着我们该增加新的图片了。

记得使用window.onscroll一直监听页面的高度，然后判断页面是否触底

  • 逻辑：用户页面滚动的高度+浏览器窗口的高度=整个文件的高度 触发

  • 解决方案1：滚动高度+窗口高度 > 文件高度 - 100px (用户快看完的时候，就加载资源，不要让用户看到底)

  • 解决方案2：滚动高度+窗口高度 > 文件高度 - 最后一张图片的高度

需要获取的高度：

  1. 窗口高度：document.documentElement.clienHeight
  2. 滚动高度：document.documentElement.scrollTop
  3. 页面高度-最后一张图片高度，也就是最后一个图片的offsetTop的值。
window.onload = function(){
    waterFlow();

    // 监听页面滑动高度
    window.onscroll = function(){
        if (checkbottom()){
            console.log('页面触底了')
        }
    }
}

// 设置页面左右居中效果
function waterFlow() {}

// 放置图片
function setimg(boximg, number1) {}

// 页面触底测试
function checkbottom(){
    // 滚动高度
    var scrollheight = document.documentElement.scrollTop;
    // 窗口高度
    var pagesheight = document.documentElement.clientHeight;
    // 获取最后一个图片
    var boximg = document.getElementsByClassName("boximg");
    // 获取最后一个图片的offsetTop的值
    var lastTop = boximg[boximg.length-1].offsetTop;
    // 返回布尔值，告诉外面页面触底了
    return lastTop < scrollheight + pagesheight ? true : false;
}

上拉加载

事先准备好新的图片数据。（学了前后端交互之后，就是后端提供数据了）

动态创建元素，使用append添加到现有的图片里面

重新加入瀑布流效果

window.onload = function(){
    waterFlow();

    // 提取准备好新图片资源
    dataimg=[
        {src:'img/1.jpeg'},
        {src:'img/2.jpeg'},
        {src:'img/3.jpeg'},
        {src:'img/4.jpeg'},
        {src:'img/5.jpeg'},
        {src:'img/6.jpeg'},
        {src:'img/7.jpeg'},
        {src:'img/8.jpeg'},
        {src:'img/9.jpeg'},
        {src:'img/10.jpeg'},
        {src:'img/11.jpg'},
    ]

    // 监听页面滑动高度
    window.onscroll = function(){
        if (checkbottom()){
            // console.log('页面触底了')
            // 获取盛放所有图片的元素box
            var box = document.getElementsByClassName("box")[0];
            //循环创建新图片
            for (var i = 0; i < dataimg.length; i++) {
                // 创建图片容器
                var boximg = document.createElement("div");
                // 设置图片容器的属性
                boximg.setAttribute('class','boximg');
                // 创建图片节点
                var img = document.createElement("img");
                // 设置图片属性，添加图片的路径
                img.setAttribute('src',dataimg[i].src);
                // 把图片放进图片容器div
                boximg.appendChild(img);
                // 把图片容器放进页面
                box.appendChild(boximg);
            }
            // 再次对页面排序
            waterFlow();
        }
    }
}

轮播图

轮播图是用一套图片以一定时间间隔（如5秒）进行循环播放，一段时间内呈现给用户不同的内容展示方式

  • 轮播图特点
    1 自动循环播放
    2 指示器聚焦导航（就是轮播图下面的点）

动态切换

var imgs = document.querySelectorAll('.imgbox>img');
var btnleft = document.getElementsByClassName('btnleft')[0];
var btnright = document.getElementsByClassName('btnright')[0];
var navli = document.querySelectorAll('.navli li');
// 设置显示图片序号
var index = 3; // 默认是0，显示第一张

btnright.onclick = function () {
    index++;
    if (index > imgs.length - 1) {
        index = 0;
    }
    findimg();
}
btnleft.onclick = function () {
    index--;
    if (index < 0) {
        index = imgs.length - 1;
    }
    findimg();
}

function findimg() {
    console.log(index)
    // 清空图片的属性，以便显示想要显示的图片
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].removeAttribute('class');
    }
    imgs[index].setAttribute('class', 'selectimg');
    // 清空指示器的属性
    for (var j = 0; j < imgs.length; j++) {
        navli[j].removeAttribute('class');
    }
    navli[index].setAttribute('class', 'selectli');
}

.navbar{
    width: 100%;
    height: 320px;
    margin: 200px 200px;
}
.imgbox{
    width: 672px;
    height: 320px;
    position: relative;
}
.imgbox>img{
    position: absolute;
    width: 672px;
    height: 320px;
    display: none;
    z-index: 6;
}
.imgbox>.selectimg{
    display: block;
}
.btn img{
    position: absolute;
    width: 55px;
    height: 55px;
    top: 50%;
    margin-top: -27.5px;
    z-index: 8;
}
.btnleft{
    left: 10px;
}
.btnright{
    right: 10px;
}
.navli{
    height: 20px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
}
.navli li{
    list-style: none;
    width: 20px;
    height: 20px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    float: left;
    margin-left: 10px;
}
.navli .selectli{
    background-color: rgba(255,255,255,0.8);
}

<div class="navbar">
    <div class="imgbox">
        <img class="selectimg" src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <div class="btn">
            <img class="btnleft" src="img/left.png" alt="">
            <img class="btnright" src="img/right.png" alt="">
        </div>
        <div class="navli">
            <ul>
                <li class="selectli"><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>
</div>

放大镜

通过鼠标滑动，对页面某个部分的区域放大

需要需要准备两种图片，一个是网站的展示图片，一张是展示图片的放大版

请添加图片描述

  • 页面结构
<div class="sbox" >
    <div class="sbox1"></div>
</div>
<div class="mbox"></div>
  • css样式设计
*{
    margin:0;
    padding:0;
}
body{
    background: rgba(0,0,0,0.02);
}
.sbox{
    position: absolute;
    left: 100px;
    top: 100px;
    width: 450px;
    height: 450px;
    background-image: url('../img/xiao.jpg');
    border: 1px solid black;
}
.mbox{
    position: absolute;
    left: 550px;
    top: 100px;
    width: 500px;
    height: 500px;
    background-image: url('../img/da.jpg');
    border: 1px solid black;
}
.sbox1{
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 300px;
    background-color: rgba(188, 208, 22, 0.77);
}

现在是一个静态的放大镜效果，后面就是使用js让它动起来。

  • js

让内部的黄色预览块跟随鼠标移动，首先是使用class定位各个元素。

使用event.clientX event.clientY获取鼠标相对于页面的坐标

// 找元素
var sbox = document.getElementsByClassName("sbox")[0];
var sbox1 = document.getElementsByClassName("sbox1")[0];
var mbox = document.getElementsByClassName("mbox")[0];
// console.log(sbox);  打印一下节点，看看是不是成功匹配
// console.log(sbox1);
// console.log(mbox);
// 添加鼠标事件：鼠标移动到图片的时候，触发鼠标悬浮事件，鼠标离开图片，触发离开事件
sbox.onmouseenter = function(){
    sbox1.style.display = "block";
    mbox.style.display = "block";
}
sbox.onmouseleave = function(){
    sbox1.style.display = "none";
    mbox.style.display = "none";
}
// 添加鼠标事件，鼠标在图片上移动的时候获取鼠标的位置。
sbox.onmousemove = function(e){
    var mx = e.clientX - sbox.offsetLeft - sbox1.offsetWidth/2;
    var my = e.clientY - sbox.offsetTop - sbox1.offsetHeight/2;
    console.log(mx,my);
    console.log(sbox.offsetLeft+sbox.offsetWidth);
    console.log(sbox.offsetTop);
    // 处理边界问题
    if (mx<0){
        mx=0;
    }
    if (my<0){
        my=0;
    }
    if (mx>sbox1.offsetWidth/2 ){
        mx=sbox1.offsetWidth/2;
    }
    if (my>sbox1.offsetHeight/2 ){
        my=sbox1.offsetHeight/2;
    }

    // 移动预览块
    sbox1.style.left = mx+"px";
    sbox1.style.top = my+"px";
    // 因为大小图片的差异，大图片在移动的时候，要乘以图片之间的比值。大/小。图片的大小是已知的，就不使用属性拿到图片容器大小了
    var rate = 800/450;
    mbox.style.backgroundPositionX = - mx * rate+"px";  // 需要使用backgroundPositionX设置背景图片的位置
    mbox.style.backgroundPositionY = - my * rate+"px";
}
  • 在调试代码的时候遇到的情况（感觉挺有趣的，分析一下）

请添加图片描述

这个是给mbox的绝对定位left和top使用了和sbox1一样的鼠标轨迹处理方式。

请添加图片描述

这个是在处理mbox 的top，我以mbox自己的offsetTop和鼠标移动距离作为新的top值。就导致top只有累加。同样的，刚开始处理mbox的left时，也有这个现象，一直往右跑。上传这些动画有点麻烦，就不放了。

也是因为使用的mbox.style.left才导致这个问题，要使用mbox.style.backgroundPositionX和mbox.style.backgroundPositionY

回到顶部

对于比较长的网页，在用户浏览位置时刻有一个回到顶部这个按钮，可以增加用户体验。

触发条件：页面滚动高度超出窗口高度

总算是用到了position：fixed 这个定位了。。。

因为这个功能很简单，就不独立js和css文件了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        .box{
            height: 500px; /*把页面撑开*/
        }
        .btn{
            width: 60px;
            height: 60px;
            background-color: black;
            color: white;
            position: fixed;
            bottom: 50px;
            right: 50px;
            padding: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">第1个</div>
    <div class="box">第2个</div>
    <div class="box">第3个</div>
    <div class="box">第4个</div>
    <div class="box">第5个</div>
    <button class="btn">回到顶部</button>
    <script>
        // 获取按钮元素
        var btn = document.getElementsByClassName("btn")[0];
        // 获取浏览器窗口高度
        var yemianheight = document.documentElement.clientHeight;
        // 获取浏览位置高度
        window.onscroll = function () {
            var scrollheight = document.documentElement.scrollTop;
            console.log(scrollheight);
            if (yemianheight > scrollheight) {
                btn.style.display = "none";
            }else {
                btn.style.display = "block";
            }
        };
        btn.onclick = function () {
            document.documentElement.scrollTop=0;
        }
    </script>
</body>
</html>

浏览器环境BOM

JavaScript 是浏览器的内置脚本语言，一旦网页内嵌了 JavaScript脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果

  • 代码嵌入网页的方法

    • script 元素直接嵌入代码（练习
    • script 标签加载外部脚本（工作 src=“https://www.example.com/script.js”
      • 引入别人写好的js，也叫CDN

  • 加载使用的协议

    • http协议 script src=“http://example.js”
    • https协议 script src=“https://example.js”
    • 但是有时我们会希望，根据网站本身的协议来决定加载协议，这时可以采用下面的写法 script src=“//example.js”

  • Swiper CDN

如果你不想将Swiper文件放在你的项目中，可以使用Swiper的CDN服务。

风险提示：CDN由于不稳定性，在生产环境中请谨慎使用。

未压缩版本 压缩之后的 map文件

script 元素工作原理

浏览器加载 JavaScript 脚本，主要通过 script 元素完成。正常的网页加载流程是这样的

1 浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析

2 解析过程中，浏览器发现 script 元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎

3 如果 script 元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码

如果script元素的位置靠上，网站在解析html代码的时候，先执行script的js文件，但是scriipt下面的网页结构还没加载，就会造成js的失败

4 JavaScript 引擎执行完毕，控制权交还渲染引擎，恢复往下解析 HTML 网页

加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成后，再继续渲染。原因是 JavaScript 代码可以修改 DOM，所以必须把控制权让给它，否则会导致复杂的线程竞赛的问题。

如果外部脚本加载时间很长（一直无法完成下载），那么浏览器就会一直等待脚本下载完成，造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。

为了避免这种情况，较好的做法是将 script 标签都放在页面底部，而不是头部。这样即使遇到脚本失去响应，网页主体的渲染也已经完成了，用户至少可以看到内容，而不是面对一张空白的页面。

  • 把script放在靠上的位置，还不出问题的解决方法

  • defer 属性
    为了解决脚本文件下载阻塞网页渲染的问题，一个方法是对

<script src="./js/index.js" defer></script>

defer 属性的运行流程如下

1 浏览器开始解析 HTML 网页
2 解析过程中，发现带有 defer 属性的 script 元素
3 浏览器继续往下解析 HTML 网页，同时并行下载 script 元素加载的外部脚本
4 浏览器完成解析 HTML 网页，此时再回过头执行已经下载完成的脚本

有了 defer 属性，浏览器下载脚本文件的时候，不会阻塞页面渲染

  • async 属性

解决“阻塞效应”的另一个方法是对 script 元素加入 async 属性

<script src="./js/index1.js" async></script>

async 属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染

1 浏览器开始解析 HTML 网页
2 解析过程中，发现带有 async 属性的 script 标签
3 浏览器继续往下解析 HTML 网页，同时并行下载 script 标签中的外部脚本
4 脚本下载完成，浏览器暂停解析 HTML 网页，开始执行下载的脚本
5 脚本执行完毕，浏览器恢复解析 HTML 网页

async 属性可以保证脚本下载的同时，浏览器继续渲染。需要注意的是，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本

  • 一般来说，如果脚本之间没有依赖关系，就使用 async 属性，如果脚本之间有依赖关系，就使用 defer 属性。如果同时使用 async 和 defer 属性，后者不起作用，浏览器行为由 async 属性决定

回流和重绘

渲染树转换为网页布局，称为“布局流”（flow）；布局显示到页面的这个过程，称为“绘制”（paint）。它们都具有阻塞效应，并且会耗费很多时间和计算资源

页面生成以后，脚本操作和样式表操作，都会触发“回流”（reflow）和“重绘”（repaint）。

  • 什么是回流和重绘
    回流：当节点树中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建
    重绘：当节点数中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的

  • 回流和重绘并不一定一起发生，回流必然导致重绘，重绘不一定需要回流。比如改变元素颜色，只会导致重绘，而不会导致回流；改变元素的布局，则会导致重绘和回流

  • 什么时候会造成回流和重绘

    • 回流
      1 页面初始加载
      2 改变字体，元素尺寸（width，height，border，position），改变元素内容
      3 添加或删除元素，如果元素本身被display:none(隐藏不占位)会回流，visibility:hidden(隐藏且占位)则会发生重绘
      4 定位为fixed的元素，滚动条拖动时会回流
      5 调整窗口大小

    • 重绘

      text-decoration

      backgtound-image

      background-repeat

      background-position
      outline-color

      outline

      outline-style

      border-radius
      outline-width

      box-shadow

      background-size

  • 优化技巧
    1 读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点（就是一个元素尽可能就获取一次，然后一直使用。操作相同的步骤放在一起，比如给某个容器改变大小。）
    2 缓存 DOM 信息
    3 不要一项一项地改变样式，而是使用 CSS class 一次性改变样式（就是事先写好所有的class样式，但是不给元素添加上，在js里面动态添加，就是一次性改变样式，不是一点点增加样式）
    4 使用documentFragment操作 DOM
    5 动画使用absolute定位或fixed定位，这样可以减少对其他元素的影响
    6 只在必要时才显示隐藏元素
    7 使用虚拟DOM（virtual DOM）库 （目前了解即可）

// 引发两次回流
box.style.top = '100px';
console.log(box.style.top);//=>'100px'
box.style.left = '100px';
// 引发一次回流  // 相同的操作放在一起
box.style.top = '100px';
box.style.left = '100px';
console.log(box.style.top);//=>'100px'

定时器

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由 setTimeout() 和 setInterval() 这两个函数来完成。它们向任务队列添加定时任务

window对象提供的window.setTimeout(); 因为是浏览器提供的，可以不写window参数即可调用

  • 定时器可以进行取消clearTimeout(定时器)

setTimeout()延迟执行

setTimeout 函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器

setTimeout 函数接受两个参数，第一个参数 func|code 是将要推迟执行的函数名或者一段代码，第二个参数 delay 是推迟执行的毫秒数

还有一个需要注意的地方，如果回调函数是对象的方法，那么setTimeout 使得方法内部的 this 关键字指向全局环境，而不是定义时所在的那个对象。this默认指向window，可以修改。

哪怕是在对象里面使用this，如果不是特意给this赋值，this一直指向window

setInterval()重复间隔执行

setInterval 函数的用法与 setTimeout 完全一致，区别仅仅在于 setInterval 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

  • 通过setInterval方法可以实现网页动画

因为是重复执行，需要类似一个break来终止定时器，直接使用清除定时器就可以

定时器应用

当我们给列表项设置鼠标悬浮事件的时候，我们可能会查看不止一个列表项，但也不是每个列表项都查看。我们可能看完第一个内容想直接看第五个内容。但是我们的鼠标经过了234列表项，页面也进行了渲染，浪费了一定的资源。

所以，要解决的事件：当鼠标的悬浮时间足够短的时候，不触发鼠标悬浮事件

var timer = null;  //定时器
var delay = 300;  // 设置停留时间
for (var i = 0; i < lis.length; i++) {
   (function (i) {
        lis[i].onmouseenter = function () {  
            timer = setTimeout(function () {   // 当鼠标悬浮的时候，启动定时器
                for (var j = 0; j <lis.length; j++) {
                  lis[j].removeAttribute("class");
                  divs[j].removeAttribute("class")
               }
              lis[i].setAttribute("class","select")
              divs[i].setAttribute("class", "div-select")
           }, delay)   //  delay是定时器等待时间
       }}(i));
    lis[i].onmouseout = function () {  // 当鼠标离开的时候，清除定时器
        clearTimeout(timer);  
   }
}

防抖(debounce)

  • 防抖定义
    对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次

防抖严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。

  • 从滚动条监听的例子说起

先说一个常见的功能，很多网站会提供这么一个按钮：用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现，那么我们现在抽象出这个功能需求-- 监听浏览器滚动事件，返回当前滚条与顶部的距离这个需求很简单，直接写

在运行的时候会发现存在一个问题：这个函数的默认执行频率，太高了！。 高到什么程度呢？以chrome为例，我们可以点击选中一个页面的滚动条，然后点击一次键盘的【向下方向键】，会发现函数执行了8-9次！

然而实际上我们并不需要如此高频的反馈，毕竟浏览器的性能是有限的，不应该浪费在这里，所以接着讨论如何优化这种场景。基于上述场景，首先提出第一种思路：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后

1 如果在200ms内没有再次触发滚动事件，那么就执行函数
2 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

效果：如果短时间内大量触发同一事件，只会执行一次函数

理论上，当用户快速上下滚动页面，就会一直不触发函数。当用户停止滑动的时候，才会触发。

var timer = null;
var delay = 300;
function debounce(){
    if(timer){    // 如果定时器存在就清除定时器，如果是第一次，就跳过
        clearTimeout(timer)
    }
    timer = setTimeout(function(){
        console.log(111);
    },delay)   // 设置定时器
}
debounce();

实现：既然前面都提到了计时，那实现的关键就在于setTimeout这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现

  1. 定时器
  2. 闭包
  3. 事件机制 事件只触发一次，在触发之后，事件内部的代码在反复执行
function debounce(fn,delay){   // 抽象成独立的函数，可以复用
    var timer = null //借助闭包，局部作用域，不污染全局
    return function() {
        if(timer){
            clearTimeout(timer)
       }
        timer = setTimeout(fn,delay) // 简化写法
   }
}
function backTop(){
    console.log(111);
}
//window.onscroll = function(){
//    debounce(bcakTop,300);
//}
window.onscroll = debounce(bcakTop,300);

节流(throttle)

持续触发的时候，一定间隔执行一次。停止触发，就执行最后一次。

节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死

继续思考，使用上面的防抖方案来处理问题的结果是如果在限定时间段内，不断触发滚动事件（比如某个用户闲着无聊，按住滚动不断的拖来拖去），只要不停止触发，理论上就永远不会输出当前距离顶部的距离

但是如果产品同学的期望处理方案是：即使用户不断拖动滚动条，也能在某个时间间隔之后给出反馈呢？

其实很简单：我们可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）

效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效

实现

这里借助setTimeout来做一个简单的实现，加上一个状态位valid来表示当前函数是否处于工作状态

function throttle(fn, delay) {
    var valid = true
    return function () {
        if (!valid) {
            //休息时间 暂不接客
            return
        }
        // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(function () {
            fn()
            valid = true;
        }, delay)
    }
}

function showTop() {
    var scrollTop = document.documentElement.scrollTop;
    console.log('滚动条位置：' + Math.floor(scrollTop));
}

window.onscroll = throttle(showTop, 500)

分析代码：首先，有三个方法，一个是抽象出来的节流定时器throttle，一个是我们需要使用定时器的高频触发方法showTop，还有一个是触发的事件。

关于节流定时器的原理：

  1. 首先使用的是事件机制，也就是事件触发和事件执行的机制。
  2. 我们使用window.onscroll页面滚动来作为事件触发的条件。事件触发之后，要执行的是throttle方法，这个方法的内部是我们想要实现节流的函数showTop。由于js的事件机制是方法只需要执行一次，后续再次使用该方法的时候，直接 使用方法的函数体。
  3. 直白来说，就是虽然界面滚动调用了throttle方法，后续随着界面滚动也在不断的调用throttle方法。但是js的事件机制，就是方法只会调用一次，后续再调用方法，实际是直接调用方法内部的代码。就像缓存一样，拿到了这个方法执行后的结果，下次再遇到这个方法，直接使用结果。
  4. 在throttle里面使用了闭包，保证了节流的标识符的唯一性，后续不论如何调用这个节流方法，标识一直是一个。
  5. 第一次进入闭包的时候，由于valid是true，不会被if判断拦住。可以顺利的进入if后面的代码，也就是定时器，在后面的代码修改了valid的值为false。此时的结果就是，valid为false，定时器工作。
  6. 第二次进入闭包的时候，valid拿着false，被if条件拦住，无法触发定时器。也就是用于无法在闭包外面修改valid的值了。
  7. 直到定时器开始工作，执行了内部的fn函数，也就是showTop方法。此时，valid才被调为true。也就是可以开启下次的定时器了。
  • 讲完了这两个技巧，下面介绍一下平时开发中常遇到的场景:
    • 搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，具体使用哪种方案要看业务需求
    • 页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）

window 对象_属性

浏览器里面， window 对象（注意， w 为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属

在js里面创建的所有变量，都是在window对象底下。比如var a=10；a实际是window.a。

由于window对象是浏览器默认窗口，自带超多子变量和方法。我们若是一直使用直接声明的方式，全都是全局变量，很容易造成变量冲突。为了不总是使用全局变量，我们只能使用js 的作用域。因为js 的作用域分为两个，全局作用域和函数级作用域。

我们只能构造一个自执行函数，并且把我们要声明的变量放进去。

在自执行函数内部声明的变量，不在window里面。

(function (){
    var a=10;  
})();

也可以使用闭包，声明变量，但是闭包相对比较麻烦。推荐使用自执行函数

  • window常用属性
  • window.screenX 和 window.screenY 属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读。是整个浏览器软件的左上角和显示屏的左上角的距离。
  • window.innerHeight 和 window.innerWidth 属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读。这两个属性值包括滚动条的高度和宽度。不包含控制台的大小。
  • window.outerHeight 和 window.outerWidth 属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。这两个属性只读。不包含window的导航栏。就是整个浏览器软件界面的大小。
  • window.scrollX 属性返回页面的水平滚动距离， window.scrollY 属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读，不可以设置。
  • window.pageXOffset 属性和 window.pageYOffset 属性，是 window.scrollX 和window.scrollY 别名（适配旧版本）

window 对象_方法

  • window.alert() 、 window.prompt() 、 window.confirm() 都是浏览器与用户互动的全局方法。它们会弹出不同的对话框，要求用户做出回应。注意，这三个方法弹出的对话框，都是浏览器统一规定的式样，无法定制
    • window.alert() 方法弹出的对话框，只有一个“确定”按钮，往往用来通知用户某些信息
    • window.prompt() 方法弹出的对话框，提示文字的下方，还有一个输入框，要求用户输入信息，并有“确定”和“取消”两个按钮。它往往用来获取用户输入的数据。第一个参数是文本内容，在输入框前面做提示。第二个参数是输入框的默认值。返回值是用户输入的结果。
    • window.confirm() 方法弹出的对话框，除了提示信息之外，只有“确定”和“取消”两个按钮，往往用来征询用户是否同意。返回值是一个布尔值。
  • window.open 方法用于新建另一个浏览器窗口，类似于浏览器菜单的新建窗口选项。它会返回新窗口的引用，如果无法新建窗口，则返回null

Navigator 对象

window.navigator 属性指向一个包含浏览器和系统信息的 Navigator 对象。（就像我们直接声明的a变量一样，可以使用window.a调用，也可以直接使用a调用。）

脚本通过这个属性了解用户的环境信息，浏览器版本，用户使用的设备信息

  • navigator.userAgent 属性返回浏览器的 User Agent 字符串，表示用户设备信息，包含了浏览器的厂商、版本、操作系统等信息

    • 就是爬虫表头里面的user-agent键值对

    • useragent主要是打印用户设备信息，可以大致准确地识别手机浏览器，方法就是测试是否包含mobi 字符串

    • var ua = navigator.userAgent.toLowerCase();  //由于浏览器版本或者使用环境的差异，会有大小写的不同，所以统一转成小写
if (ua.indexOf("mobi") > -1) {
  // 手机浏览器
} else {
  // 非手机浏览器
}

  • Navigator.plugins 属性返回一个类似数组的对象，成员是 Plugin 实例对象，表示浏览器安装的插件，比如 Flash、ActiveX 等。由于是一个数组，需要使用循环遍历。

  • Navigator.platform 属性返回用户的操作系统信息，比如 MacIntel 、 Win32 、Linux x86_64 等

  • Navigator.language 属性返回一个字符串，表示浏览器的首选语言。该属性只读

  • Navigator.languages 属性返回一个数组，表示用户可以接受的语言

Screen 对象

Screen 对象表示当前窗口所在的屏幕，提供显示设备的信息。window.screen 属性指向这个对象

  • Screen.height 浏览器窗口所在的屏幕的高度（单位像素）。除非调整显示器的分辨率，否则这个值可以看作常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率
  • Screen.width 浏览器窗口所在的屏幕的宽度（单位像素）
  • Screen.availHeight 浏览器窗口可用的屏幕高度（单位像素）。因为部分空间可能不可用，比如系统的任务栏或者 Mac 系统屏幕底部的 Dock 区，这个属性等于 height 减去那些被系统组件的高度
  • Screen.availWidth 浏览器窗口可用的屏幕宽度（单位像素）
  • Screen.pixelDepth 整数，表示屏幕的色彩位数，比如 24 表示屏幕提供24位色彩
  • Screen.orientation 返回一个对象，表示屏幕的方向。该对象的 type 属性是一个字符串，表示屏幕的具体方向， landscape-primary 表示横放， landscape-secondary表示颠倒的横放， portrait-primary 表示竖放， portrait-secondary 表示颠倒的竖放。

History 对象

window.history 属性指向 History 对象，它表示当前窗口的浏览历史

History 对象保存了当前窗口访问过的所有页面网址

  • window.history.length 获取你的历史记录
  • History.back() ：移动到上一个网址，等同于点击浏览器的后退键。对于一个访问的网址，该方法无效果
  • History.forward() ：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果
  • History.go() ：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址，比如 go(1) 相当于 forward() ， go(-1) 相当于 back() 。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为 0 ，相当于刷新当前页面
    • 参数里面写1或-1，也能实现前进和后退。参数就是页面数量的意思，2是前进两个页面

移动到以前访问过的页面时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。

Cookie 对象

有cookie之前，所有的数据只能存储在服务器，现在有了cookie浏览器也可以储存一定的数据量。

Cookie 是服务器保存在浏览器的一小段文本信息，每个 Cookie 的大小一般不能超过4KB。浏览器每次向服务器发出请求，就会自动附上这段信息

  • Cookie 的目的就是区分用户，以及放置状态信息，它的使用场景主要如下
    1 对话（session）管理：保存登录状态、购物车等需要记录的信息
    2 个性化信息：保存用户的偏好，比如网页的字体大小、背景色等等
    3 追踪用户：记录和分析用户行为

Cookie 不是一种理想的客户端存储机制。它的容量很小（4KB），缺乏数据操作接口，而且会影响性能。客户端存储建议使用 Web storage API 。只有那些每次请求都需要让服务器知道的信息，才应该放在 Cookie 里面

  • 每个 Cookie 都有以下几方面的元数据/字段
    Cookie 的名字/键
    Cookie 的值（真正的数据写在这里面）
    到期时间（超过这个时间会失效）

    所属域名（默认为当前域名）
    生效的路径（默认为当前网址）

不同浏览器对 Cookie 数量和大小的限制，是不一样的。一般来说，单个域名设置的 Cookie 不应超过30个，每个 Cookie 的大小不能超过 4KB。超过限制以后，Cookie 将被忽略，不会被设置

  • 读取cookie document.cookie

Cookie 属性

直接使用document.cookie就是获取cookie。如果使用等号赋值，就可以设置cookie新的键值对。比如，document.cookie = “name=zhao” ，在浏览器的cookie里面就有了一个name:zhao的键值对了

  • Expires 属性指定一个具体的到期时间，到了指定时间以后，浏览器就不再保留这个 Cookie。它的值是 UTC 格式，可以使用Date.prototype.toUTCString() 进行格式转换
    • 如果不设置该属性，或者设为 null ，Cookie 只在当前会话（session）有效，浏览器窗口一旦关闭，当前 Session 结束，该Cookie 就会被删除。另外，浏览器根据本地时间，决定 Cookie 是否过期，由于本地时间是不精确的，所以没有办法保证 Cookie 一定会在服务器指定的时间过期。
    • 设置过期时间：document.cookie = "name=iwen;Expires=Fri, 31 Dec 2021 16:00:00 GMT"
    • 只要在过期时间之内，网站的cookie数据就会一直在浏览器缓存
  • Max-Age 属性指定从现在开始 Cookie 存在的秒数，比如 60 * 60 * 24 * 365（即一年）。过了这个时间以后，浏览器就不再保留这个 Cookie
  • Domain 属性指定 Cookie 属于哪个域名，以后浏览器向服务器发送HTTP 请求时，通过这个属性判断是否要附带某个 Cookie
  • Path （几乎不用）属性指定浏览器发出 HTTP 请求时，哪些路径要附带这个Cookie。只要浏览器发现， Path 属性是 HTTP 请求路径的开头一部分，就会在头信息里面带上这个 Cookie。比如， Path 属性是 / ，那么请求 /docs 路径也会包含该 Cookie。当然，前提是 Domain 属性必须符合条件
  • Secure （无用） 属性指定浏览器只有在加密协议 HTTPS 下，才能将这个Cookie 发送到服务器。另一方面，如果当前协议是 HTTP，浏览器会自动忽略服务器发来的 Secure 属性。该属性只是一个开关，不需要指定值。如果通信是 HTTPS 协议，该开关自动打开
  • HttpOnly （无用）属性指定该 Cookie 无法通过 JavaScript 脚本拿到，主要是document.cookie 属性、 XMLHttpRequest 对象和 Request API 都拿不到该属性。这样就防止了该 Cookie 被脚本读到，只有浏览器发出 HTTP请求时，才会带上该 Cookie

封装cookie操作

由于浏览器只会给有网络请求的网站储存cookie，所以，我们本地的html网站是无法创建自己的cookie

使用xampp搭建自己的服务器，在xampp的安装文件夹里面打开htdocs目录，并在xampp里面点击apache后面的start启动服务器。

htdocs就是服务器的根目录了，我们要把根目录当成开发目录

xampp是一个php服务器。集成式服务器。

我们需要在pycharm里面打开文件，打开这个根目录，自己配置一下python解释器。

然后新建一个文件夹，这里是cookie_test，推荐使用纯英文，防止出现bug。然后在这个文件夹里面创建一个html文件。

去浏览器输入：localhost/cookie_test/index.html 就可以以网络请求的方式，打开一个本机域名的网站了。localhost是本机域名。不可以在pycharm里面直接使用右键打开文件。

使用网络请求方式打开的文件，浏览器就有cookie缓存了。

使用document.cookie="name=it;"就可以在浏览器看到cookie缓存了

必须以服务器的形式创建html。

  • 对cookie操作，增删查改
    • 设置
    • 获取
    • 删除

cookie的键值对有三个重要属性：key，value，time（过期时间）

过期时间设置成负数，就是过期了，变相的删除cookiejs

var cookie = {
    set: function (name, value, days) {
        var d = new Date();
        d.setDate(d.getDate() + days);
        document.cookie = name + "=" + value + ";expires=" + d + ";";
    },
    get: function (name) {
        var cookiesArr = document.cookie.split("; ")
        for (var i = 0; i < cookiesArr.length; i++) {
            var newArr = cookiesArr[i].split("=");
            if (name === newArr[0]) {
                return newArr[1]
            }
        }
    },
    unset: function (name) {
        this.set(name, "", -1)
    }
}
cookie.set('lily','abcd',5)
console.log(cookie.get('lily'));
cookie.unset('lily');

必须在服务器上运行，才可以让浏览器缓存cookie。退出这个服务器先点stop，然后点quit。一般会有一点提示内容，不用管。

apply、call和bind函数

无论是apply、call还是bind其实都是改变this的指向

之前的this指向：

  1. 事件中的this，指向当前DOM元素
  2. 对象中的this，指向当前调用者
  3. 闭包中的this，指向window
  4. 定时器中的this，指向window
  5. call、apply、bind改变this指向
var obj = {
    name:"小张",
    getName:function(){
        console.log(this.name)
   }
}
var newObj = {
    name:'小王'
}
obj.getName.call(newObj); // 小王
obj.getName.apply(newObj); // 小王
obj.getName.bind(newObj)(); // 小王

我们调用的是obj对象里面的getname方法

如果是直接调用的方式，输出的是obj里面的name

现在使用了call和apply，bind方法。这些方法的特点是，第一个参数都是this指针，默认指向的是调用这些方法的对象，也就是obj。

我们可以人为传参，把newobj作为新的对象传进去。反正getname都是从对象里面取出name的值。obj有name，newobj也有name属性。所以可以成功调用。

其中bind是返回要执行的函数，需要再次作为方法去执行一次。就是在后面再加一个括号。

  • apply和call的区别
obj.getName.call(newObj,'北京');
obj.getName.apply(newObj,['上海']);
obj.getName.bind(newObj,'深圳')();

call接收参数的类型是基本类型，也就是参数可以直接写在this指针后面。

apply接收的参数类型必须是数组类型，参数必须写在数组里面，把这个数组放在this指针后面。

var arr = [10,20,30,40,50];
console.log(Math.max.apply(null, arr));
console.log(Math.max.call(null, 10,20,30,40,50));
console.log(Math.max(10, 20, 30, 40, 50));

这是我们之前使用Math的max方法，对数组求最大值。

首先是第一种，使用了apply方法，第一个参数是this指针，写null，默认就是window，第二个参数是数组参数

然后是第二种，使用了call方法，由于call方法只能写基本类型的参数。所以只能把数组拆开，作为参数传进去。但是Math.max方法本身就可以接收基本类型的数据作为参数。所以Math.max.call方法基本不用。

null代表指向window对象，这里是因为Array本身时候window对象的子元素

面向对象

在构造函数中的 this 指向当前实例对象

面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式(编写代码的风格)

  • 对象是什么

要了解面向对象编程，要先了解对象是什么？

对象其实是一个抽象概念的具体实例，例如：
1 人类：张三
2 动物：猫

抽象概念：人类、动物 特别常见称呼：类、模板

对象：张三、猫 特别常见称呼：实例对象

  • 生成对象

对象是一个抽象概念的具体实例，那么我们要生成一个对象，需要有一个模板，表示某一类实物的共同特征，然后对象根据这个模板生成。JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成实例对象的函数。

构造函数就是一个普通的函数，但具有自己的特征和用法

function People(){
    this.name = "张三"
}

构造函数的首字母大写：例如 People 中的 P 是大写的

  • 构造函数的特点有两个
    1 函数体内部使用了 this 关键字，代表了所要生成的对象实例
    2 生成对象的时候，必须使用 new 命令
function People(){
    this.name = "张三"
}
var p = new People();  // 实例对象
p.name // 张三

就是因为js里面，对象的创建方式和函数的创建方式是一样的。只能通过名称来区分对象和普通函数。

规定：第一个参数首字母大写是对象，第一个单词首字母小写，第二个单词首字母大写是函数

在js里面构造函数就是对象。function People(){}

学习面向对象

  • 需要从两个方向入手
    • 为什么要使用面向对象
      • 易维护
      • 可复用
      • 可扩展
      • 灵活
    • 面向对象的代码如何编写
      • 面向对象的模板/构造函数
      • 如何生成实例对象

new 命令

new 命令的作用，就是执行构造函数，返回一个实例对象.

new就是类似var的声明对象关键字

function People(name) {
    this.name = name;
}
var p1 = new People("张三");
var p2 = new People("李四");
p1.name // 张三
p2.name // 李四

在构造函数中的 this 指向当前实例对象

prototype原型

  • 构造函数的缺点

JavaScript 通过构造函数生成新对象，因此构造函数可以视为对象的模板。实例对象的属性和方法，可以定义在构造函数内部

function People(name,age) {
    // 属性
    this.name = name;
    this.age = age;
    // 方法;
    this.sayHello = function(){
        console.log("Hello");
   }
}
var p1 = new People("张三",20);
var p2 = new People("李四",30);
console.log(p1.sayHello === p2.sayHello); //false

通过构造函数为实例对象定义属性和方法，虽然很方便，但是有一个缺点。同一个构造函数的多个实例之间，无法共享属性和方法，从而造成对系统资源的浪费

这个问题的解决方法，就是 JavaScript 的原型对象（prototype）

  • prototype 原型的作用

prototype 原型对象的所有属性和方法，都能被实例对象共享。

也就是说，如果属性和方法定义在原型上，那么所有实例对象就能共享，节省了内存。

怎么为对象指定原型呢，JavaScript 规定，每个函数都有一个prototype 属性，指向一个对象

function People() { }
console.log(People.prototype);

对于普通函数来说，该属性基本无用。但是，对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型。

function People(name,age) {
    // 属性
    this.name = name;
    this.age = age;
}
// 原型属性
People.prototype.color = "黄种人";
// 原型方法
People.prototype.sayHello = function(){
    console.log("Hello");
}
var p1 = new People("张三",20);
var p2 = new People("李四",30);
console.log(p1.sayHello === p2.sayHello); //true
console.log(p1.color === p2.color); // true
  • p1 和 p2 共享了原型属性和方法

原型对象的属性不是实例对象自身的属性。只要修改原型对象，变动就立刻会体现在所有实例对象上。

People.prototype.color = "白种人";
p1.color  // 白种人
p2.color  // 白种人

如果实例对象自身就有某个属性或方法，它就不会再去原型对象prototype寻找这个属性或方法

p1.color = "白种人"  // 实例对象自带的属性，优先级高于prototype的属性
console.log(p1.color); // "白种人"
console.log(p2.color); // "黄种人"

总结一下，原型对象的作用，就是定义所有实例对象共享的属性和方法。

实例方法、静态方法、实例属性、静态属性

  • 实例方法和静态方法
    在JavaScript中有静态方法和实例方法，静态方法是函数自己定义的，而实例方法是通过原型来定义。它们的区别是静态方法是可以直接用 类名.方法名 去调用的，而实例方法是不可以的，它必须要用实例才可以去调用 实例.方法名 。
function Person(name){
	this.name = name;
}
// 实例方法
Person.prototype.getName = function(){
	console.log(this.name);
}
// 静态方法
Person.getAge = function(age){
    console.log(age);
}
var p = new Person("it");
p.getName();  // 实例方法，用实例对象调用
Person.getAge(10); // 静态方法，用类名调用

JavaScript内置的Array方法则分为实例方法和静态方法

var arr = [10,20,30];
// 实例方法
arr.push(40);
// 静态方法
Array.isArray(arr);
  • 实例属性和静态属性

实例属性和静态属性与方法类似，实例属性是通过实例对象调用的实例对象.属性 ，静态属性是通过类名调用的 类名.属性

function Person(name){
    // 实例属性
    this.name = name;
}
// 静态属性
Person.age = 20;
var p = new Person("itbaizhan");
console.log(p.name);
console.log(Person.age);

_proto_ (了解即可)

实例对象的 _proto_ 属性（前后各两个下划线），返回该对象的原型。该属性可读写

function People(){}
var p = new People();
console.log(p.__proto__ === People.prototype); // true

就是实例对象，可以通过这种方式找到实例对象的原型

根据语言标准， _proto_ 属性只有浏览器才需要部署，其他环境可以没有这个属性

在app里面不能使用proto，主要是验证实例对象的关系

constructor （了解）

prototype 对象有一个 constructor 属性，默认指向 prototype 对象所在的构造函数

function Person(){}
console.log(Person.prototype.constructor === Person);  // true

就是使用类和类方法prototype，可以看到类的实例对象的原型

实例对象的原型可以使用constructor方法，看到类本身，也就是类自己

  • constructor 属性的作用是什么呢
    通俗的讲，就是为了将实例原型对象暴露出来, 比如你写了一个插件,别人得到的都是你实例化后的对象, 如果别人想扩展下对象,就可以用 constructor.prototype 去修改或扩展原型对象
  • 问题：如果声明了一个类对象Person，里面只有一个getname一个方法，现在想给这个类再增加一个方法，但是这个类已经完成了封装。我们只能在类的外面使用类的接口，无法访问类本身。所以只能使用类的实例化对象的constructor属性，得到类对象本身了
var p;
(function(){
    function Person(){ // 函数级作用域，外部不可访问
        this.name = "张三";
        this.age = 20;
   }
    Person.prototype.getName = function(){
        console.log(this.name);
   }
    p = new Person(); // 给外面的p实例化一个对象
})();
console.log(Person); //Person无法在函数作用域之外访问。
console.log(p.constructor);   // 使用实例化对象的constructor属性，可以得到类对象
// 通过实例对象扩展方法
p.constructor.prototype.getAge = function(){
    console.log(this.age);
}
p.getName();
p.getAge();

原型 链

JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。

因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型…

如果一层层地上溯，所有对象的原型最终都可以上溯到Object.prototype ，即 Object 构造函数的 prototype 属性。也就是说，所有对象都继承了 Object.prototype 的属性。这就是所有对象都有 valueOf 和toString 方法的原因，因为这是从 Object.prototype 继承的。

那么， Object.prototype 对象有没有它的原型呢？回答是 Object.prototype 的原型是 null 。 null 没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是 null 。

读取对象的某个属性时，JavaScript 引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的 Object.prototype 还是找不到，则返回undefined 。如果对象自身和它的原型，都定义了一个同名属性，那么优先读取对象自身的属性，这叫做“覆盖”，就近原则。

instanceof 检测对象

检测对象类型的：

  1. typeof 检测是不是基本类型，字符串，数值，布尔
  2. isArray 检测是不是数组
  3. instanceof 检测是不是类的实例对象

instanceof 运算符返回一个布尔值，表示对象是否为某个构造函数的实例

function Person(){}
var p = new Person();
console.log(p instanceof  Person); // true
console.log(p instanceof  object); // true

由于 instanceof 检查整个原型链，因此同一个实例对象，可能会对多个构造函数都返回 true 。

instanceof 运算符的一个用处，是判断值的类型

var arr = [10,20,30];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Object);

数组是一个对象，可以使用instanceof检测。基本类型的变量不可以使用。

Object 对象的相关方法

  • Object.getPrototypeOf() 实例对象的原型。这是获取原型对象的标准方法
    • 和Person.prototype得到的结果是一样的
  • Object.setPrototypeOf 方法为参数对象设置原型，返回该参数对象。它接受两个参数，第一个是现有对象，第二个是原型对象
  • Object.create() 方法，让一个对象继承另一个对象的属性和方法
    • Object.create() 方法生成的新对象，动态继承了原型。在原型上添加或修改任何方法，会立刻反映在新对象之上
    • 除了对象的原型， Object.create() 方法还可以接受第二个参数。该参数是一个属性描述对象，它所描述的对象属性，会添加到实例对象，作为该对象自身的属性
var sxt = {
    java: {
        value: "全体系"
   },
    web: {
        value: '大前端'
   }
};
var itbaizhan = Object.create(sxt, {
    python:{
        value:"全方向"
   }
});
console.log(itbaizhan.java.value);
console.log(itbaizhan.python);
  • Object.getOwnPropertyNames 方法返回一个数组，成员是参数对象本身的所有属性的键名，不包含继承的属性键名
  • Object.prototype.hasOwnProperty() 对象实例的 hasOwnProperty 方法返回一个布尔值，用于判断某个属性定义在对象自身，还是定义在原型链上

对象的继承

面向对象编程很重要的一个方面，就是对象的继承。A 对象通过继承 B 对象，就能直接拥有 B 对象的所有属性和方法。这对于代码的复用是非常有用的。

大部分面向对象的编程语言，都是通过“类”（class）实现对象的继承。传统上，JavaScript 语言的继承不通过 class，而是通过“原型对象”（prototype）实现

传统语言，c语言等，都是通过class来继承。但是js里面是通过prototype继承。

在ES6里面也支持class继承了。ES6版本已经提供了 class 语法，我们会在讲解ES6的时候单独讲解使用方式

function Person(name, age) {   // 父类
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function () {
    console.log(this.name);
}
Person.prototype.getAge = function(){
    console.log(this.age);
}

function Student(name, age, major) {  // 子类
    //调用父类的构造函数
    Person.call(this, name, age);     // 使用call继承父类属性
    this.major = major;              // 使用this，添加子类独有的属性
}

for (var p in Person.prototype) {  // 以循环的方式继承父类原型中的方法
    Student.prototype[p] = Person.prototype[p];
}

Student.prototype.showMajor = function () {   // 子类的方法
    console.log(this.major);
}
Student.prototype.getName = function(){  // 重写父类的方法
    console.log("Student:" + this.name);
}

var student = new Student("itbaizhan", "20","it");
student.showMajor();
student.getName();
student.getAge();

多重继承

JavaScript 不提供多重继承功能，即不允许一个对象同时继承多个对象。但是，可以通过变通方法，实现这个功能

就是一个子类继承多个父类。

  1. 在子类里面依次使用call方法，继承父类的属性。
  2. 使用for循环可以继承父类的方法。还是依次继承。
function Sxt() {
    this.hello = 'hello';
}
function Itbaizhan() {
    this.world = 'world';
}
function Sum() {
    Sxt.call(this);  // 继承两个父类的属性
    Itbaizhan.call(this);
}
// 继承 Sxt
Sum.prototype = Object.create(Sxt.prototype);  // 和使用for循环继承的效果是一样的
// 继承链上加入 Itbaizhan
Object.assign(Sum.prototype, Itbaizhan.prototype);    // assign是合并两个原型
// 重新指定构造函数
Sum.prototype.constructor = Sum;

var s = new Sum();
console.log(s.hello); // 'hello'
console.log(s.world); // 'world'

严格模式

除了正常的运行模式，JavaScript 还有第二种运行模式：严格模式（strict mode）。顾名思义，这种模式采用更加严格的 JavaScript语法。

同样的代码，在正常模式和严格模式中，可能会有不一样的运行结果。一些在正常模式下可以运行的语句，在严格模式下将不能运行。

  • 设计目的
    早期的 JavaScript 语言有很多设计不合理的地方，但是为了兼容以前的代码，又不能改变老的语法，只能不断添加新的语法，引导程序员使用新语法。
  • 严格模式是从 ES5 进入标准的，主要目的有以下几个。
    • 明确禁止一些不合理、不严谨的语法，减少 JavaScript 语言的一些怪异行为。
    • 增加更多报错的场合，消除代码运行的一些不安全之处，保证代码运行的安全。
    • 提高编译器效率，增加运行速度。
    • 为未来新版本的 JavaScript 语法做好铺垫。

总之，严格模式体现了 JavaScript 更合理、更安全、更严谨的发展方向。

  • 启用方法
    进入严格模式的标志，是一行字符串 use strict

  • 可以放在两个位置：
    1 use strict 放在脚本文件的第一行，整个脚本都将以严格模式运行
    2 use strict 放在函数体的第一行，则整个函数以严格模式运行

  • 显式报错

    • eval、arguments 不可用作标识名
      严格模式下，使用 eval 或者 arguments 作为标识名，将会报错。
    • 函数不能有重名的参数
      正常模式下，如果函数有多个重名的参数，可以用 arguments[i] 读取。严格模式下，这属于语法错误
    • 全局变量显式声明
      正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明

  • 禁止 this 关键字指向全局对象

    • 禁止Math.min.apply(window,arr),只能是Math.min.apply(null,arr)

  • 禁止使用 with 语句(没讲)

  • arguments 不再追踪参数的变化

    • 不能使用arguments来获取参数了

  • 保留字

为了向将来 JavaScript 的新版本过渡，严格模式新增了一些保留字（implements、interface、let、package、private、protected、public、static、yield等）。使用这些词作为变量名将会报错

正则表达式

在前端，正则表达式主要应用在输入框的验证上。比如让用户输入密码，需要有特殊格式。还有手机号的验证。

正则表达式（regular expression）用来按照“给定模式”匹配文本。比如，正则表达式给出一个 Email 地址的模式，然后用它来确定一个字符串是否为 Email 地址。

  • 创建正则表达式有两种方法。

一种是使用字面量，以斜杠表示开始和结束

var regex = /xyz/;

另一种是使用RegExp构造函数 (不推荐)

var regex = new RegExp('xyz');

  • 正则表达式执行方法

正则的执行的方法主要有两种，一种是 test() 方法，另一种是 exec() 方法

如果正则模式是一个空字符串，则匹配所有字符串（无意义）

  • test()
    • 正则对象的test方法返回一个布尔值，表示当前模式是否能匹配参数字符串。如果test后面的字符串符合正则表达式，就返回true，否则就返回false
    • /it/.test('itbaizhan') // true
  • exec()
    • 正则对象的exec方法，用来返回匹配结果。如果发现匹配，就返回一个数组，成员是匹配成功的子字符串，否则返回null。
    • 还有很多参数可以使用，0是正则表达式，index是子串位于字符串的那个位置/下标，input是原字符串，

之后的正则表达式会特别复杂，而不是现在是字符匹配

字符串方法

  • 字符串方法之中，有4种与正则表达式有关
    • 1 String.prototype.match() 返回一个数组，成员是所有匹配的子字符串.和exec的结果是一样的，有index和0等等
    • 2 String.prototype.search() 按照给定的正则表达式进行搜索，返回一个整数，表示匹配开始的位置。没有找到就是-1
    • 3 String.prototype.replace() 按照给定的正则表达式进行替换，返回替换后的字符串
      • 它接受两个参数，第一个是正则表达式，表示搜索模式，第二个是替换的内容
    • 4 String.prototype.split() 按照给定规则进行字符串分割，返回一个数组，包含分割后的各个成员
      • 接受两个参数，第一个参数是正则表达式，表示分隔规则，第二个参数是返回数组的最大成员数。第二个参数可不写
var str = 'itbaizhan';
var reg1 = /it/;
console.log(str.search(reg1));  // 返回0

匹配规则

字面量字符和元字符

正则表达式和字符串的最大区别是，字符串只能匹配一个字符串，而正则表达式可以匹配多个字符串。

  • 字面量字符
    大部分字符在正则表达式中，就是字面的含义，比如/a/匹配a，/b/匹配b。如果在正则表达式之中，某个字符只表示它字面的含义（就像前面的a和b），那么它们就叫做“字面量字符”

  • 元字符
    除了字面量字符以外，还有一部分字符有特殊含义，不代表字面的意思。它们叫做“元字符”（metacharacters），主要有以下几个
    1 点字符（.)
    2 位置字符
    3 选择符（|）

  • 点字符（.)
    点字符（.）匹配除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外的所有字符。类似通配符

    • /c.t/ 匹配c和t之间包含任意一个字符的情况，只要这三个字符在同一行，比如cat、c2t、c-t等等，但是不匹配coot

  • 位置字符
    位置字符用来提示字符所处的位置，主要有两个字符
    ^ 表示字符串的开始位置
    $ 表示字符串的结束位置

/^it/.test('itbaizhan');
/it$/.test('learn it');
/^it$/.test('it'); // 既有开头又有结尾，只能严格匹配it自己了。
  • 选择符（|）
    竖线符号（|）在正则表达式中表示“或关系”（OR），即cat|dog表示匹配cat或dog
    • 是包含关系，只要有就行

转义符

类似^在正则表达式里面是一种匹配规则，想要匹配字符串里面的^，必须加上反斜杠，取消转义

正则表达式中那些有特殊含义的元字符，如果要匹配它们本身，就需要在它们前面要加上反斜杠。比如要匹配+，就要写成 +

正则表达式中，需要反斜杠转义的，一共有12个字符： ^、.、[、$、(、)、|、*、+、?、{和\

有12个含有特殊函数的字符

  • 使用new 关键字生成正则对象，转义需要使用两个斜杠，因为字符串内部会先转义一次，比如\\+

字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内，比如 [xyz] 表示x、y、z之中任选一个匹配

字符类分为两类
1 脱字符（^）
2 连字符（-）

  • 脱字符（^）
    如果方括号内的第一个字符是[^]，则表示除了字符类之中的字符，其他字符都可以匹配。比如， [^xyz] 表示只要不都是由xyz，就可以匹配

    • /[^abc]/.test('hello world'); // true
    • /[^abc]/.test('abcapp'); // true 因为不是完全由abc构成的
    • /[^abc]/.test('abcabc'); // false 因为这个字符串完全由abc三个字符构成
    • /[^abc]/.test('aabbcc') 内容必须全部都为abc才是false，否则为true

  • 连字符（-）
    某些情况下，对于连续序列的字符，连字符（-）用来提供简写形式，表示字符的连续范围。比如，[abc]可以写成[a-c]，[0123456789]可以写成[0-9]，同理[A-Z]表示26个大写字母

    • 合法的字符类简写形式

    • [0-9.,]   所有数字还有点和逗号
[0-9a-fA-F]  所有数字，所有大小写字母a到f
[a-zA-Z0-9-] 所有数字，所有大小写字母，还有杠
[1-31] ！！！！！是数字1到3！！！！！

预定义模式和重复类

  • 预定义模式

预定义模式指的是某些常见模式的简写方式

\d 匹配0-9之间的任一数字，相当于[0-9]。
\D 匹配所有0-9以外的字符，相当于[^0-9]。
\w 匹配任意的字母、数字和下划线，相当于 [A-Za-z0-9_] 。
\W 除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]。
\s 匹配空格（包括换行符、制表符、空格符等），相等于 [\t\r\n\v\f] 。
\S 匹配非空格的字符，相当于 [^ \t\r\n\v\f] 。
\b 匹配词的边界。
\B 匹配非词边界，即在词的内部。

  • 重复类

模式的精确匹配次数，使用大括号（{}）表示。{n}表示恰好重复n次，{n,}表示至少重复n次，{n,m}表示重复不少于n次，不多于m次。

/lo{2}k/.test('look'); // true  两个字符o，只能是两个
/lo{2,5}k/.test('looook'); // true   2到5个字符o

量词符和贪婪模式

  • 量词符

量词符用来设定某个模式出现的次数

? 问号表示某个模式出现0次或1次，等同于{0, 1}。

星号表示某个模式出现0次或多次，等同于{0,}。

加号表示某个模式出现1次或多次，等同于{1,}。

  • 贪婪模式

贪婪模式默认情况下量词符 + 和 * 都是最大可能匹配，即匹配直到下一个字符不满足匹配规则为止。

模式是/a+/，表示匹配1个a或多个a，那么到底会匹配几个a呢？因为默认是贪婪模式，会一直匹配到字符a不出现为止，所以匹配结果是3个a
如果想将贪婪模式改为非贪婪模式，可以在量词符后面加一个问号。

模式结尾添加了一个问号/a+?/，这时就改为非贪婪模式，一旦条件满足，就不再往下匹配。

修饰符和组匹配

修饰符（modifier）表示模式的附加规则，放在正则模式的最尾部

  • 修饰符有三个：
    1 g修饰符
    2 i修饰符
    3 m修饰符

  • g 修饰符
    默认情况下，第一次匹配成功后，正则对象就停止向下匹配了。g修饰符表示全局匹配（global），加上它以后，正则对象将匹配全部符合条件的结果，主要用于搜索和替换。

还有一个使用特点：多次匹配问题

var regex = /b/;
var str = 'abba';
regex.test(str); // true
regex.test(str); // true
regex.test(str); // true

没有g的时候，都是匹配第一个b

正则模式不含g修饰符，每次都是从字符串头部开始匹配。所以，连续做了三次匹配，都返回true

var regex = /b/g;
var str = 'abba';
regex.test(str); // true
regex.test(str); // true
regex.test(str); // false

正则模式含有g修饰符，每次都是从上一次匹配成功处，开始向后匹配。因为字符串abba只有两个b，所以前两次匹配结果为true，第三次匹配结果为false

有g的时候，在从上一次匹配结束的位置继续匹配

  • i 修饰符
    默认情况下，正则对象区分字母的大小写，加上i修饰符以后表示忽略大小写（ignorecase）

  • m修饰符
    m 修饰符表示多行模式（multiline），会修改 ^ 和 $ 的行为。默认情况下（即不加 m 修饰符时）， ^ 和 $ 匹配字符串的开始处和结尾处，加上 m 修饰符以后， ^ 和 $ 还会匹配行首和行尾，即 ^ 和 $ 会识别换行符（ \n ）

  • 修饰符组合
    常见的就是i和g的组合"ABBA".replace(/b/ig,"t"); // AttA 既忽略大小写，又全局匹配

  • 组匹配
    正则表达式的括号表示分组匹配，括号中的模式可以用来匹配分组的内容

/fred+/.test(‘fredd’); // true
/(fred)+/.test(‘fredfred’); // true

第一个模式没有括号，结果+只表示重复字母d
第二个模式有括号，结果+就表示匹配fred这个词。

正则应用场景

身份证正则验证
1 老版本：15位全数字组成
2 新版本：18位，前17位全数字，第十八位数字或者 x.因为有大小写x，所以加i

/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|x)$)/i

手机号

第一位是1，第二个是3456789.然后是9位数

/^1(3|4|5|6|7|8|9)\d{9}$/

大部分的正则表达式是不需要我们自己编写的，我们需要做的是能读懂即可

由于正则表达式的应用次数也比较多。早就有人整理好了。我们能看懂，会用就行。

正则表达式在线测试 | 菜鸟工具

jQuery

简化js

  • 现在是否还需要学习jQuery，毫无疑问到目前为止，我们仍然需要学习jQuery，原因如下：
    1 各大网站还在应用（京东、百度）
    2 一些广告页面、落地页还在应用
    3 源码非常优秀，有助于理解JavaScript
    4 其实对DOM操作并不能完全移除，只要涉及到DOM操作，jQuery是非常方便的

  • 说人话：

    • 就是大厂还在用
    • 一些静态网页，广告页，不需要频繁的来回跳转页面，不需要vue等网站框架（大材小用）。
    • 优化js里面对DOM方面的代码量

jQuery简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画操作更加简单。

jQuery最大的优点就是简化DOM操作

下载jQuery jQuery

下载下来就是一个js文件。

有三个版本，map版本忽略。剩俩，一个是源码未压缩uncompressed。一个是压缩后的源码。压缩之后，用法不变，但是体积小。

  • Download the uncompressed development version of jQuery 3.7.1
  • Download the map file for jQuery 3.7.1
  • jQuery 3.7.1 blog post with release notes

一般是使用压缩过的jQuery源代码，这样用户访问的时候，加载更快。

  • jQuery版本说明

jQuery分为三个大版本：1.x 2.x 3.x

  • 1.x版本
    兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)

  • 2.x版本
    不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4(2016年5月20日)

  • 3.x版本
    不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.6.0

  • jQuery重点讲解知识点
    1 选择器
    2 DOM操作
    3 CSS操作
    4 事件处理
    5 遍历
    6 动画

选择器之基础选择器

  • 类选择器(“.box”)
  • 元素选择器(“span”)
  • ID选择器(“#it”)

首先，这个html结构，我们要用js操作，分别是一个类选择器，一个元素选择器，一个id选择器.

在js里面定位这些元素：

<div class="box">类选择器</div>
<div class="box">类选择器</div>
<span>元素选择器</span>
<a id="it" href="#">ID选择器</a>

这是js的操作

// 类选择器
var div1 =document.getElementsByClassName("box")[0]
var div2 =document.getElementsByClassName("box")[1]     // 需要重新起名，还有
// 元素选择器
var span =document.getElementsByTagName("span")[0]
// ID选择器
var a =document.getElementById("it");

使用jQuery优化：

// 类选择器
$(".box")
// 元素选择器
$("span")
// ID选择器
$("#it")
  • 子元素选择器 (“parent > child”)
    • $(“.topnav > li”).css(“border”, “3px double red”);
    • 括号里面就像css的直接子元素选择器一样
  • 后代元素选择器（“parent child”）
    • $(“.topnav li”).css(“border”, “3px double red”);

选择器之属性选择器

  • Attribute Selector [name=“value”] 选择指定属性是给定值的元素

attribute: 属性
Selector: 选择器
name: 选中的属性
value: 属性值

<div>
    <input type="radio" name="user" value="name" />
    <span>name</span>
</div>
<div>
    <input type="radio" name="user" value="age" />
    <span>age</span>
</div>
<script>
    // 想要选中第一个div里面的span标签，并修改文本
	$('input[value="name"]').next().html("username");
</script>

首先使用$(‘input’) 定位到input标签，这时候还不太严谨。有两个input。

再使用属性选择器，$(‘input[value=“name”]’) 现在定位到了第一个input标签

然后选择与input同级的span标签，$(‘input[value=“name”]’).next()

修改span标签里面的内容$(‘input[value=“name”]’).next().html(“username”);

在jQuery里面的html() 就是js里面的 innerhtml()

  • Attribute Selector [name|=“value”]
    选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素
<a href="#" alt="sxt">尚学堂</a>
<a href="#" alt="sxt-web">尚学堂-前端</a>
<a href="#" alt="sxtitbaizhan">itbaizhan</a>
$('a[alt|="sxt"]')

在属性里面杠，代表单词连接的意思，在杠前面的，是前缀。

比如第二个a标签里面的alt的sxt就是整个属性值的前缀。

这个管道符的匹配规则是，要么完全匹配value值，要么是以value值开头的属性值。即第一个a标签是完美匹配，第二个a标签是前缀匹配

  • Attribute Selector [name*=“value”]
    选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）

是包含value值的属性，都可以匹配上。只要bao’h

  • Attribute Selector [name~=“value”]

选择指定属性用空格分隔的值中包含一个给定值的元素

<input name="sxt web" />  name属性有多个值，用空格隔开的
<script>$('input[name~="sxt"]');</script>
  • Attribute Selector [name$=“value”]

选择指定属性是以给定值结尾的元素。这个比较是区分大小写的

<input name="sxt-web" />
<input name="sxt web" />
<input name="bjsxtweb" />
<script>$('input[name$="web"]')</script>

不论是空格还是连字符以及完整单词，只要结尾可以匹配就行。

  • Attribute Selector [name^=“value”]

选择指定属性是以给定字符串开始的元素

$是匹配任意结尾，这个是匹配任意开头词汇

选择器之jQuery扩展

  • :eq(index) Selector

在匹配的集合中选择索引值为index的元素。index下标计算是从0开始的

<ul class="nav">
    <li>List 1, item 1</li>
    <li>List 1, item 2</li>
    <li>List 1, item 3</li>
</ul>

$(“li:eq(2)”)

  • :even Selector

选择所引值为偶数的元素

这是基于0的索引，所以 :even 选择器是选择第一个元素，第三个元素，依此类推在匹配。

$(“tr:even”)

  • :odd Selector

选择索引值为奇数元素

这是基于0的索引，所以 :odd 选择器是选择第二个元素，第四个元素，依此类推在匹配。

  • :first Selector

选择第一个匹配的元素$(“tr:first”)

  • :last Selector

选择最后一个匹配的元素$(“tr:last”)

  • :gt(index) Selector

选择匹配集合中所有大于给定index（索引值）的元素。$(“td:gt(4)”)

  • :lt(index) Selector

选择匹配集合中所有索引值小于给定index参数的元素

DOM操作

  • addClass()追加新属性

给元素添加class，值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

$(“p”).addClass(‘myClass yourClass’);

在js里面是使用classname给标签添加属性。如果一个标签本来就有class属性，在js里面使用class重新赋值会覆盖标签本身的class属性。

但是jQuery的这个addclass方法，不会覆盖，只会追加新属性

也可以添加多个class属性

  • removeClass()

移除元素中每个匹配元素上一个，多个或全部样式，通过class名字移除元素

$(‘p’).removeClass(‘myClass yourClass’) 如果有指定的属性，就删除指定属性

移除全部class，，，$(‘p’).removeClass() 如果没有指定的属性，就清空全部属性

  • toggleClass()

这是一个开关方法，如果class存在则删除，如果class不存在则添加

  • hasClass()

判断一个元素上是否具有某个class,存在返回true，不存在返回false

var flag = $('#mydiv').hasClass('foo')
if(flag){
    $('#mydiv').html("div具有foo")
}
  • html()

获取元素中的HTML内容$(‘div.demo-container’).html();

元素的html内容$(‘div.demo-container’).html(‘111’);

  • text()

用于获取标签中的内容$(“input”).text();

也可以设置标签内容$(“input”).text(“username”)

  • html 和 text的区别 ：

    • html可以填充标签放入元素
    • text不会识别标签，都是字符串的形式放入

  • val()

用于获取标签中的内容$(“input”).val();

也可以设置标签内容$(“input”).val(“username”)

！！！var只能获取输入框的的内容，或者多行文本框

  • attr()

获取匹配的元素的属性的值 或 设置匹配元素的一个或多个属性

$("img").attr({
    src: "images/1.jpeg",
    title: "jQuery",
    alt: "jQuery Logo"
});
  • removeAttr()

为匹配的元素集合中的每个元素中移除一个属性img.removeAttr("title")

  • .wrap()

在每个匹配的元素外层包上一个任意类型的html元素$("p").wrap("<div class='container'></div>");

可以自动识别标签，还能在标签里面写属性

  • .unwrap()

将匹配元素集合的父级元素删除，保留自身在原来的位置 $(“p”).unwrap();

  • .wrapAll()

在所有匹配元素外面包一层HTML结构 $("p").wrapAll("<div></div>");

是把所以的p标签同时放在一个div容器里面。wrap是给每个p标签分别套一个div容器

如果p标签很分散，根本不在一起，这个操作也会把p标签集合到一起。夹在p中间的标签会被剔除去

  • .wrapInner()

在匹配元素里的内容外包一层结构$("p").wrapInner("<b></b>");

是给p标签里面的内容，包裹一个标签

  • .append()

在每个匹配元素里面的末尾处插入参数内容 $("p").append("<i>Hello</i>");

放在p标签里面的，最后一个元素的后面

  • .prepend()

将参数内容插入到每个匹配元素的前面（元素内部）

放在一个元素里面的第一个元素前面

  • .after()

在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点

在选中元素的后面插入。和被选中元素是同级的。

  • .before()

根据参数设定，在匹配元素的前面插入内容，作为其兄弟节点

  • .empty()

从DOM中移除集合中匹配元素的所有子节点

把这个元素里面所有的子元素清空.这个元素不会删除

  • .remove()

将匹配元素集合从DOM中删除。把选中的元素移除。$("p").remove();

  • .replaceAll()

用集合的匹配元素替换每个目标元素$("<b>World</b>").replaceAll("p");

用前面括号的内容，替换选中的元素。这个是先写替换内容，再找

  • .replaceWith()

用提供的内容替换集合中所有匹配的元素 $("p").replaceWith("<div>Hello</div>");

先是选中元素，然后用后面括号的内容替换。这个是先找再替换

CSS操作

  • .css()

获取和设置匹配元素的样式。

var color =$("div").css("background-color"); 通过这种方式可以获取div元素的背景颜色的值

$("p").css("color", "red"); 如果在属性后面写了属性值，就是给元素设置属性。

没写属性值，就是获取。写了属性值，就是设置。

也可以同时设置多个样式：

$("p").css( width:"200px", height:"200px", color:"red" );

  • .height()，.width()

获取当前元素的高度值宽度值或设置元素的高度值宽度值

  • .innerHeight()，.innerWidth()

当前元素的计算高度值和宽度值,包括padding，但是不包括border

  • .outerHeight()，.outerWidth()

获取当前元素的宽度值和高度值,包括padding，border和选择性的margin

参数里面可以写布尔值true，当参数是true的时候，会算上外边距margin。

  • .offset()

获取元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档

设置元素位置$("div").offset({ top: 100, left: 100 });

没有参数的时候，就是获取

  • .position()

获取元素的当前坐标，相对于 offset parent 的坐标

.position() 方法可以取得元素相对于父元素的偏移位置。

与 .offset()不同, .offset() 是获得该元素相对于 documet 的当前坐标

当把一个新元素放在同一个容器里面另一个元素附近时，用 .position() 更好用。

  • .scrollLeft(), .scrollTop()

获取元素的当前水平和垂直滚动条的位置。设置每个匹配元素的水平和垂直滚动条位置

就是把一个容器设置的很小，但是他内部的元素设置的很大。所以外部的容器就有一个滚动条，来滚动查看内部的元素。

这个属性可以设置滚动条的初始位置。 $(".container").scrollLeft(300);

无参的时候，就是获取滚动条的位置。

事件

  • .on() 在选定的元素上绑定一个或多个事件处理函数

可以是事件绑定

$("#button").on("click", function(event){
	console.log("事件处理器")
});

也可以是事件委托，第一个参数是事件触发，第二个参数是代理的子元素类型，这里是ul标签下面的li标签。第三个参数是触发的事件

$("#ul").on("click", "li", function(e){
	console.log(e.target); // 打印点击的li标签
});
  • .one() 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次。只能一次。
$("#btn").one("click", function() {console.log("这是一个只能触发一次的事件.");});
  • .off() 移除一个事件处理函数，主要移除on事件，第一个参数是事件触发条件，第二个参数是事件函数名

鼠标事件

和js的种类一样，但是用起来方便

  • .click() 为 JavaScript 的"click" 事件绑定一个处理器，或者触发元素上的"click" 事件，就是增加点击事件

$("#btn").click(function() { alert("点击事件");});

  • .hover() 将两个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行

    • 这个方法可以直接加两个槽函数。不用起函数名，直接声明就可以。它会自动给第一个函数分配鼠标移入事件

  • .mouseenter() 鼠标进入事件 从父元素进入子元素的时候，不会触发事件

  • .mouseleave() 鼠标离开事件

  • .mousemove() 鼠标滑动事件

  • .mouseover() 鼠标进入事件（支持事件冒泡）从父元素进入子元素的时候，会触发离开父元素事件和进入子元素事件

  • .mouseout() 鼠标离开事件（支持事件冒泡）

表单事件

  • .focus() 获取焦点处理函数，或者触发元素上的 “focus” 事件
  • .blur() 失去焦点处理函数
  • .change() 表单改变处理函数，失去/获得焦点都会触发，内容被改变也会触发
  • .submit()当用户提交表单时，就会在这个表单元素上触发submit事件。它只能绑定在 form 元素上

键盘事件

  • keydown() 添加键盘按下事件

  • keypress() 添加键盘事件，按下/抬起都会触发

  • keyup() 添加键盘抬起事件

    使用e.keycode 获取输入字符的ascll值

浏览器事件

  • resize() 浏览器窗口发生变化触发事件，不含控制台
  • scroll() 浏览器滚动事件

事件对象

也是js里面的event，一模一样，有一点点的优化

  • event.type 获取事件类型
  • event.target获取当前元素对象
  • event.currentTarget获取当前元素对象
    • target：指向触发事件元素
    • currentTarget：指向添加事件的元素
  • event.preventDefault() 如果调用这个方法，默认事件行为将不再触发。
  • event.stopPropagation() 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

想要使用js对象在jQuery里面，只能是$(js对象) 需要套一个壳，就能把js对象当成jQuery对象去使用了

遍历

  • map() 通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象
    • 参数是一个函数，函数的第一个参数是列表项的下标index，第二个参数是列表项的元素
    • $("li").map(function(index,element){ console.log(index,element); })
    • element是js对象，需要使用js的方法去使用
    • 效果就是for遍历
  • each() 遍历一个jQuery对象，为每个匹配元素执行一个函数
    • $("li").each(function(index,ele){ console.log(index,ele);})
    • 也是有两个参数
    • each和map的返回值不同，map返回一个新的数组，each返回原始数组（了解）
    • 日后需要遍历，这两个都能用
  • get() 通过jQuery对象获取一个对应的DOM元素

就是js对象变成jQuery对象，使用$(js对象)

jQuery对象变成js对象，如果只需要获取一个，就使用$(‘li’).get()方法

如果获取多个对象，就使用map或者each

主要是js对象和jQuery对象不能混用。

层级关系（树遍历）

不是二叉树的遍历，而是元素之间的关系，同级关系，父子级关系等等

  • children() 获得子元素，可以传递一个选择器参数$(“.first”).children()
    • $(“.first”).children(“li”) 参数里面可以筛选子元素的类型
  • find()寻找后代元素，就是所有的子子子元素，参数里面也可以筛选元素类型
    • .find() 和 .children() 方法是相似的，但后者只是再DOM树中向下遍历一个层级（注：就是只查找子元素，而不是后代元素）。
  • next() 取得元素紧邻的后面同辈元素
  • parent() 取得元素的父元素
  • siblings() 获得元素的兄弟元素，可以传递一个选择器参数。获取所有的同级元素。也可以筛选元素类型

动画

  • show() 执行显示动画，动画效果是从左上角飞出，一直填充到右下角
    • 参数可以填写显示过程的时间$(“div”).show(1000)
  • hide() 执行隐藏动画 和show搭配的
  • fadeIn() 通过淡入的方式显示匹配元素。 就是透明度逐渐增大的效果。
  • fadeOut() 通过淡出的方式显示匹配元素$(“div”).fadeOut(1000);
  • slideDown() 用滑动动画显示一个元素 是从上到下，展开的效果
  • slideUp() 用滑动动画隐藏一个元素 这个是从下到上，逐渐关闭的效果
  • animate() 执行自定义动画
    • 第一个参数是所有你想的样式，比如宽度，透明度，颜色。第二个参数是执行时间
    • $("div").animate({ width: "200px", opacity: 0.5 }, 1500);

jQuery实操

菜单功能

知识点：鼠标滑动事件，获取子元素，滑动展示效果

this在事件中指向事件的触发元素。

this是一个js对象，需要转化成jQuery对象使用。

请添加图片描述

$("div>ul>li>ul").addClass("ul1");
$('div>ul>li').hover(
function(){
    $(this).children('ul').slideDown(500);
},
function(){
    $(this).children('ul').slideUp(500);
})

.box{
    width: 500px;
    height: 50px;
    margin: 100px auto;
}
*{
    margin: 0;
    padding: 0;
}
.box>ul>li{
    float: left;
    width: 99px;
    height: 50px;
    background-color: cornflowerblue;
    border-right: 1px solid white;
    list-style: none;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}
.box>ul>li>ul{
    display: none;
}
.box>ul>li>ul>li{
    list-style: none;
    background-color: sandybrown;
    border-bottom: 1px solid white;
}
.box>ul>li>ul>li:hover{
    color: red;
}

淡入淡出轮播图

知识点：
鼠标点击左右按钮，鼠标滑动指示器，动画淡入淡出，定时器

找到指示器的同级元素，移除高亮效果。就是之前的for循环，移除class属性的操作。

细节：鼠标悬浮的时候，保持不变，不跳转图片。鼠标悬浮的时候清除定时器，鼠标移开的时候设置定时器。

// 展示图片下标
var idx = 0;
var len = $('.img-box li').length;
// 鼠标点击事件
var rightHandler = function () {
    $('.select-img').removeClass('select-img').fadeOut(2000)
    $('.select-li').removeClass('select-li')
    idx++;
    if (idx > len - 1) {
        idx = 0;
    }
    $('.img-box').find('li').eq(idx).addClass('select-img').fadeIn(2000);
    $('.box1').find('li').eq(idx).addClass('select-li')
}
$('.btnl').click(function () {
    $('.select-img').removeClass('select-img').fadeOut(2000)
    $('.select-li').removeClass('select-li')
    idx--;
    if (idx < 0) {
        idx = len - 1;
    }
    $('.img-box').find('li').eq(idx).addClass('select-img').fadeIn(2000);
    $('.box1').find('li').eq(idx).addClass('select-li')
})
$('.btnr').click(rightHandler)
// 自动切换
var timer = setInterval(rightHandler, 3000);
// 鼠标悬浮清空定时器，鼠标移开设置定时器
$('.img-box li').hover(
    function () {
        clearInterval(timer);
    },
    function () {
        timer = setInterval(rightHandler, 3000);
    })

.box{
    width: 560px;
    height: 300px;
    margin: 100px auto;
    border: 5px solid black;
    position: relative;
}
body{
    background-color: #e0d8d8;
}
*{
    margin: 0;
    padding: 0;
}
.img-box li{
    list-style: none;
    display: none;
    position: absolute;
}
.img-box li:first-child{
    display: block;
}
.btn-box img{
    position: absolute;
    top: 50%;
    margin-top: -27.5px;
    width: 55px;
    height: 55px;
}
.btnl{
    position: absolute;
    left:0;
}
.btnr{
    position: absolute;
    right:0;
}
.box1{
    height: 20px;
    float: left;
    position: absolute;
    right: 20px;
    bottom: 20px;
}
.box1 li{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: orange;
    list-style: none;
    float: left;
    margin-left: 10px;
}
.box1 .select-li{
    background-color: #2092a2;
    border: 3px solid #565b67;
    box-sizing: border-box;
}

<div class="box">
    <div class="img-box">
        <ul>
            <li class="select-img"><a href="#"><img src="images/0.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
        </ul>
    </div>
    <div class="btn-box">
        <img src="images/btnL.png" alt="" class="btnl">
        <img src="images/btnR.png" alt="" class="btnr">
    </div>
    <div class="box1">
        <ul>
            <li class="select-li"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

自动折叠面板

点击事件，动画效果

首先设计的是鼠标移到h3标签的时候展示折叠内容，鼠标移开的时候h3的展示内容收回

请添加图片描述

有点小bug，太灵活了，无法直接从第一个框到第三个框。要么加节流或者防抖。

还是小改一下，改成鼠标点击打开当前展示卡，同时关闭其他已经打开的展示卡。

请添加图片描述

// $('h3').hover(
// function(){
//     $(this).siblings('p').slideDown();
// },
// function(){
//     $(this).siblings('p').slideUp();
// })
$('h3').click(function () {
    if ($(this).siblings('p').attr('style') && $(this).siblings('p').attr('style').includes('block')) {
        $(this).siblings('p').slideUp();
        $(this).children('span').html('>');
        return
    }
    $(this).siblings('p').slideDown();
    $(this).children('span').html('V');
    $(this).parent('li').siblings('li').children('p').slideUp();
    $(this).parent('li').siblings('li').children('h3').children('span').html('>');
})

.box h3 {
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    background-color: skyblue;
    border-bottom: 2px solid black;
}

.box h3 span {
    float: right;
    margin-right: 10px;
}

.box ul {
    list-style: none;
}

.box ul li p {
    display: none;
}

回到顶部

和前面的DOM实操是一样的

只是加了一个jQuery的动画执行时间。点击按钮的时候，是比较慢的速度划上去的。不是一瞬间上去。此外没有别的创新点了。

$(".btn").click(function(){
    $('html').animate({
      scrollTop: '0'
    },500)
})

这是按钮的点击事件，就是加了个动画的执行时间。还有一些滚动条件的设置，没啥创新的。不放了。

到此，前端学习完成。一共学了四个知识板块，html,css,js,jQuery(苍蝇再小也是肉)

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

操作系统概述（3）

操作系统概述（3）

批处理系统 1.单道批处理系统 单道批处理系统是成批地处理作用&#xff0c;并且始终只有一道作业在内存中的系统。优点&#xff1a;提高系统资源的利用率和系统吞吐量。缺点&#xff1a;系统中的资源得不到充分利用。 2.多道批处理系统 引入多道程序设计技术&#xff0c;是…
阅读更多...
SolidWorks2025三维计算机辅助设计（3D CAD）软件超详细图文安装教程（2025最新版保姆级教程）

SolidWorks2025三维计算机辅助设计（3D CAD）软件超详细图文安装教程（2025最新版保姆级教程）

目录 前言 一、SolidWorks下载 二、SolidWorks安装 三、启动SolidWorks 前言 SolidWorks 是一款由法国达索系统&#xff08;Dassault Systmes&#xff09;公司开发的三维计算机辅助设计&#xff08;3D CAD&#xff09;软件&#xff0c;广泛用于机械设计、工程仿真和产品开…
阅读更多...
JBDC Java数据库连接（1）

JBDC Java数据库连接（1）

目录 JDBC概述 定义 JDBC API 实例 JDBC搭建 建立与数据库连接&#xff1a; 形式&#xff1a; 实例 获得Satement执行sql语句 Satement中的方法: 实例 实例 JDBC概述 定义 JDBC&#xff08;Java DataBase Connectivity&#xff09;java数据库连接是一种用于执行SQL…
阅读更多...
git rebase复杂场景验证

git rebase复杂场景验证

经常面临复杂的分支管理&#xff0c;这里对几种场景的行为做一些验证。 结论总结 git rebase br_name&#xff1a;等价与新建br_name分支&#xff0c;然后找到当前分支与br_name分支的分叉点。然后把分叉点以后的提交&#xff08;当前分支&#xff09;一个一个的cherry-pick过…
阅读更多...
从搜索丝滑过渡到动态规划的学习指南

从搜索丝滑过渡到动态规划的学习指南

搜索&动态规划 前言砝码称重满分代码及思路solution 1&#xff08;动态规划&#xff09;solution 2&#xff08;BFS&#xff09; 跳跃满分代码及思路solution 1(动态规划)solution 2 (BFS) 积木画满分代码及思路动态规划思路讲解solution 前言 本文主要是通过一些竞赛真题…
阅读更多...
（一）栈结构、队列结构

（一）栈结构、队列结构

01-线性结构-数组-栈结构 线性结构&#xff08;Linear List)是由n&#xff08;n>0)个数据元素&#xff08;结点&#xff09; a[0], a[1], a[2], a[3],...,a[n-1]组成的有限序列 数组 通常数组的内存是连续的&#xff0c;所以在知道数组下标的情况下&#xff0c;访问效率是…
阅读更多...
MySQL基础 [五] - 表的增删查改

MySQL基础 [五] - 表的增删查改

目录 Create&#xff08;insert&#xff09; Retrieve&#xff08;select&#xff09; where条件 ​编辑 NULL的查询 结果排序(order by) 筛选分页结果 (limit) Update Delete 删除表 截断表&#xff08;truncate&#xff09; 插入查询结果&#xff08;insertselect&…
阅读更多...
4.7学习总结 可变参数+集合工具类Collections+不可变集合

4.7学习总结 可变参数+集合工具类Collections+不可变集合

可变参数&#xff1a; 示例&#xff1a; public class test {public static void main(String[] args) {int sumgetSum(1,2,3,4,5,6,7,8,9,10);System.out.println(sum);}public static int getSum(int...arr){int sum0;for(int i:arr){sumi;}return sum;} } 细节&#xff1a…
阅读更多...
OpenGL学习笔记（简介、三角形、着色器、纹理、坐标系统、摄像机）

OpenGL学习笔记（简介、三角形、着色器、纹理、坐标系统、摄像机）

目录 简介核心模式与立即渲染模式状态机对象GLFW和GLAD Hello OpenGLTriangle 三角形顶点缓冲对象 VBO顶点数组对象 VAO元素缓冲对象 EBO/ 索引缓冲对象 IEO 着色器GLSL数据类型输入输出Uniform 纹理纹理过滤Mipmap 多级渐远纹理实际使用方式纹理单元 坐标系统裁剪空间 摄像机自…
阅读更多...
vmware虚拟机上Ubuntu或者其他系统无法联网的解决方法

vmware虚拟机上Ubuntu或者其他系统无法联网的解决方法

一、检查虚拟机是否开启了网络服务 打开方式&#xff1a;控制面板->-管理工具--->服务 查找 VMware DHCP Service 和VMware NAT Service &#xff0c;确保这两个服务已经启动。如下图&#xff0c;没有启动就点击启动。 二、设置网络类型 我们一般使用前两种多一些&…
阅读更多...
OpenVLA-OFT——微调VLA时加快推理的三大关键设计：支持动作分块的并行解码、连续动作表示以及L1回归(含输入灵活化及对指令遵循的加强)

OpenVLA-OFT——微调VLA时加快推理的三大关键设计：支持动作分块的并行解码、连续动作表示以及L1回归(含输入灵活化及对指令遵循的加强)

前言 25年3.26日&#xff0c;这是一个值得纪念的日子&#xff0c;这一天&#xff0c;我司「七月在线」的定位正式升级为了&#xff1a;具身智能的场景落地与定制开发商 &#xff0c;后续则从定制开发 逐步过渡到 标准产品化 比如25年q2起&#xff0c;在定制开发之外&#xff0…
阅读更多...
LabVIEW 油井动液面在线监测系统​

LabVIEW 油井动液面在线监测系统​

项目背景 传统油井动液面测量依赖人工现场操作&#xff0c;面临成本高、效率低、安全风险大等问题。尤其在偏远地区或复杂工况下&#xff0c;测量准确性与时效性难以保障。本系统通过LabVIEW虚拟仪器技术实现硬件与软件深度融合&#xff0c;为油田智能化转型提供实时连续监测解…
阅读更多...
泛微ECOLOGY9 解决文档中打开发票类PDF文件无内容的配置方法

泛微ECOLOGY9 解决文档中打开发票类PDF文件无内容的配置方法

解决文档中打开发票类PDF文件无内容的配置方法 情况如下&#xff1a; 如果OA文档中打开的PDF文件如下图这样空白的&#xff0c;那么可以试试下面的方法进行解决。 解决方法&#xff1a; 在OA安装目录中找到 ecology/WEB-INF/prop/docpreview.properties 配置文件&#xff…
阅读更多...
大模型RAG项目实战-知识库问答助手v1版

大模型RAG项目实战-知识库问答助手v1版

安装 Ollama 根据官网指导&#xff0c;安装对应版本即可。 下载安装指导文档&#xff1a; handy-ollama/docs/C1/1. Ollama 介绍.md at main datawhalechina/handy-ollama 注意&#xff1a;在 Windows 下安装 Ollama 后&#xff0c;强烈建议通过配置环境变量来修改模型存储…
阅读更多...
统计子矩阵

统计子矩阵

1.统计子矩阵 - 蓝桥云课 统计子矩阵 问题描述 给定一个 NM 的矩阵 A&#xff0c;请你统计有多少个子矩阵&#xff08;最小 11&#xff0c;最大 NM&#xff09;满足子矩阵中所有数的和不超过给定的整数 K&#xff1f; 输入格式 第一行包含三个整数 N&#xff0c;M 和 K。 …
阅读更多...
C++第1讲：基础语法；通讯录管理系统

C++第1讲：基础语法；通讯录管理系统

黑马程序员匠心之作|C教程从0到1入门编程,学习编程不再难_哔哩哔哩_bilibili 对应的笔记&#xff1a; https://github.com/AccumulateMore/CPlusPlus 标签: C&C | welcome to here 一、C初识 1.1.注释 1.2.变量 1.3.常量&#xff1a;记录程序中不可更改的数据 1.4.关…
阅读更多...
Python高阶函数-filter

Python高阶函数-filter

1. 基本概念 filter() 是Python内置的高阶函数&#xff0c;用于过滤序列中的元素。它接收一个函数和一个可迭代对象作为参数&#xff0c;返回一个迭代器&#xff0c;包含使函数返回True的所有元素。 filter(function, iterable)2. 工作原理 惰性计算&#xff1a;filter对象是…
阅读更多...
拍摄的婚庆视频有些DAT的视频文件打不开怎么办

拍摄的婚庆视频有些DAT的视频文件打不开怎么办

3-12 现在的婚庆公司大多提供结婚的拍摄服务&#xff0c;或者有一些第三方公司做这方面业务&#xff0c;对于视频拍摄来说&#xff0c;有时候会遇到这样一种问题&#xff0c;就是拍摄下来的视频文件&#xff0c;然后会有一两个视频文件是损坏的&#xff0c;播放不了&#xff0…
阅读更多...
图灵逆向——题一-动态数据采集

图灵逆向——题一-动态数据采集

目录列表 过程分析代码实现 过程分析 第一题比较简单&#xff0c;直接抓包即可&#xff0c;没有任何反爬&#xff08;好像头都不用加。。。&#xff09; 代码实现 答案代码如下&#xff1a; """ -*- coding: utf-8 -*- File : .py author : 鲨鱼爱兜兜 T…
阅读更多...
【新人系列】Golang 入门（十二）：指针和结构体 - 上

【新人系列】Golang 入门（十二）：指针和结构体 - 上

✍ 个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4dd; 专栏地址&#xff1a;https://blog.csdn.net/newin2020/category_12898955.html &#x1f4e3; 专栏定位&#xff1a;为 0 基础刚入门 Golang 的小伙伴提供详细的讲解&#xff0c;也欢迎大佬们…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023