一,轮播图
基本步骤和思路
1,根据ul>li,原始的轮播图数量,生成对应的焦点标签,ol>li
获取ul>li标签对象伪数组
循环遍历伪数组
生成li标签,添加index属性
将生成的li标签,写入到ol中
2,复制原始轮播图内容,第一张和最后一张
clone第一张和最后一张图片的标签
将第一张写入到ul末位,将最后一张写入到ul起始
重新定义ul的宽度
将ul左移一个单位,显示原始轮播图的第一张图片
3,自动轮播
设定定时器
index变量++
调用move运动函数,left:-index*li宽度
4,运动终止,执行的函数
判断index数值
如果是 最后一个li,index赋值为1,根据新的index,设定ul的位移
如果是 第一个li,index赋值为倒数第二个li索引,根据新的index,设定ul的位移
焦点样式切换
先清除所有ol>li样式
根据index数值,设定对应ol>li标签,li标签index属性数值,与index变量数值相同
给bool变量赋值为原始数值,让点击可以继续进行
5,鼠标移入移出
移入,清除定时器,终止运动
移出,再次启动执行 自动轮播 函数
6,焦点按钮点击事件
判断 bool 变量存储的数值是否是原始数值
如果不是,执行return
给bool赋值非原始数值
给焦点按钮添加点击事件(一般是事件委托的形式)
获取焦点按钮,index属性的属性值
赋值给index变量,根据index执行 move运动函数
7,左右切换点击事件
判断 bool 变量存储的数值是否是原始数值
如果不是,执行return
给bool赋值非原始数值
左按钮,index--,根据index执行 move运动函数
有按钮,index++,根据index执行 move运动函数
8,解决点击过快问题
本质是为防止,同一时间,有多个运动函数同时执行
思路:定义一个变量 bool
如果是原始值,证明没有点击过按钮,可以执行点击效果
如果不是原始值,证明已经点击过按钮,并且当前运动没有结束
此时不允许再次执行点击效果,防止触发生成多个运动效果
也就是同一个时间内,只允许有一个运动效果
9,页面隐藏问题
当页面显示状态发生改变时,触发事件处理函数
当隐藏时,清除定时器,终止运动
当显示时,重新启动 自动轮播函数
二,节点操作
另一种操作页面内容的方式,多用于生成新的标签和复制标签
1,获取节点
标签.childNodes 获取所有的子级节点
标签.children 获取所有的子级标签节点
标签.firstChild 获取第一个子级节点
标签.lastChild 获取最后一个子级节点
标签.firstElementChild 获取第一个子级元素节点
标签.lastElementChild 获取最后一个子级元素节点
标签.previousSibling 获取上一个兄弟节点
标签.nextSibling 获取下一个兄弟节点
标签.previousElementSibling 获取上一个兄弟元素节点
标签.nextElementSibling 获取下一个兄弟元素节点
标签.parentNode 获取直接父级节点
标签.attributes 获取属性节点
2,节点的类型,名称,内容
节点类型 标签.nodeType
元素节点 : 1
属性节点 : 2
文本节点 : 3
注释节点 : 8
节点名称 标签.nodeName
元素节点 : 大写的表现名称
属性节点 : 小写的属性名称
文本节点 : #text
注释节点 : #comment
节点内容 标签.nodeValue
元素节点 : null
属性节点 : 属性的属性值
文本节点 : 文本内容
注释节点 : 注释内容
3,节点的操作:
新建
创建元素节点 document.createElement('标签名称')
创建文本节点 document.createTextNode('文本内容')
删除
删除当前标签的子级节点 标签.removeChild('节点标签名称')
克隆
只克隆标签本身 标签.cloneNode()
克隆标签本身和内容 标签.cloneNode(true)
写入
在当前标签末位写入 标签.appendChild(写入的标签)
在当前标签子级标签前写入 标签.insertBefore(写入的标签,在哪个之前写入)
三,正则表达式
是验证字符串内容是否符合规范的方法
1,建立正则表达式
字面量 let 变量 = /正则表达式/
构造函数 let 变量 = new RegExt();
2,语法规范
(1)元字符
\d 数字
\D 非数字
\w 数字,字母,下划线
\W 非数字,字母,下划线
\s 空格
\S 非空格
. 非换行
(2),边界符
^ 起始
$ 结尾
(3),限定符
* 0 至 正无穷
+ 1 至 正无穷
? 0 至 1
{n} n 次
{n,} n 至 正无穷
{n,m} n 至 m 次 包括n和m
(4),特殊符号
\ 表示正则或者转义符
| 逻辑或
() 表示看着一个整体来执行
[] 表示是其中一个内容即可
[^] 对其中内容取反
a-b 表示a-b范围之内的内容
(5),写在 正则表达式外的
i 不分区大小写
g 全局匹配
3,配合的函数
search() 不区分大小写
变量.search(/正则/i)
indexOf,不能使用正则
match() 全局捕获
变量.match(/正则/g)
replace() 全局替换
变量.replace(/正则/g , 原有的要替换的内容)
四,ES6的语法规范
1,let const变量声明
let : 多用于定义基本数据类型
声明变量,变量名称不能重复
如果定义在 循环 和 { } 中,只能在循环和{ }中存在
类似于forEach() 在循环中,建立的独立的相互不影响的存储不同数据的循环变量
const : 多用于定义引用数据类型,定义常量(存储数据不允许改变的变量)
声明变量,变量名称不能重复
如果定义在 循环 和 { } 中,只能在循环和{ }中存在
定义的数据不能发生改变
2,箭头函数
主要是为了配合构造函数使用
语法形式
function(){} --- ()=>{}
function(e){} --- e=>{}
function(){一行} --- ()=>一行
this指向:
指向父级程序的this指向
如果父级程序有this指向,就指向父级程序的this
如果父级程序没有this值,指向window
箭头函数,不能改变this指向
3,改变函数this指向
箭头函数不能改变this指向,必须是父级程序的this指向
函数.call(参数1,其他参数...)
立即执行函数
参数1,是改变的this指向
其他参数是原始函数的参数
函数.apply(参数1,[其他参数])
立即执行函数
参数1,是改变的this指向
其他参数是原始函数的参数,必须是数组的形式
const fun = 函数.bind(参数1)
定义返回一个新的函数
新函数与原始函数完全一致,只是this指向不同
4,解构语法
将对象,数组的数据获取,给变量赋值
数组的解构 : 一一对应的赋值
let [a1,a2,a3,a4] = [1,2,3,4];
let [a1,a2,[a3,a4]] = [1,2,[3,4]];
对象的解构
let {属性} = 对象
let {属性:别名} = 对象
let {属性:{属性}} = 对象
let {属性:{属性:别名}} = 对象
5,合并,展开运算符
...变量
如果是实参或者其他位置 ...变量 是将变量中的数据,一一展开,进行操作
如果是形参,...变量 是将所有的实参,以数组的形式存储
函数如果没有定义形参,有一个 arguments 属性来以数组的形式存储实参
箭头函数没有 arguments 只能使用合并运算符
6,立即执行函数
理解执行函数,但是不能再次执行,只能执行一次
(函数)()
!函数()
~函数()
五,面向对象编程
1,基本概念
所谓的面向对象编程,是一种编程思想和书写方式方法
简单理解:
之前是将程序,封装在函数内,设定参数和返回值
现在是将程序,封装在对象内,设定对象的属性和方法
2,构造函数和实例化对象
构造函数:就是专门定义生成对象的函数
必须和关键词 new 配合使用
实例化对象:本质上就是一个对象,只不过是通过构造函数生成的
3,原型链
原型对象:
每一个 函数 都有一个 prototype
本质上一个专门存储 数据 和 方法(函数) 的空间
原型属性:
每一个 对象 都有一个 __proto__
实例化对象的 __proto__ 指向的 就是 生成这个实例化对象的构造函数的 prototype
原型链:
通过 __proto__ 将相互关联的数据,串联起来,可以相互访问数据的功能,就称为原型链
在JavaScript中任意一个数据类型,都可以看做是对象,都有 __proto__
举例:
定义 构造函数时, 将 实例化对象的方法,定义在构造函数的 prototype 中
生成 实例化对象 时 对象本身只有定义在 构造函数中的属性
没有定义在 prototype 中的方法
在 执行 实例化对象 时, 要调用方法,是通过原型链 也就是 通过 __proto__
找到 构造函数 的 prototype 空间 并且调用其中 存储的方法
4,构造函数
构造函数为了和普通函数区别,一般是将所有函数名称单词是的首字母大写
不大写也能执行,但是不符合语法按规范
定义构造函数:
在函数内,定义实例化对象的方法,通过的是this来指定定义实例化对象的属性
this.属性 = 属性值
在 prototype 中 定义 实例化对象的方法
构造函数.prototype.函数方法名 = function(){}
使用,调用构造函数,必须和 new 关键词一起使用
<script>
function CreateObj(name,age){
this.name = name;
this.age = age;
this.fff = function(){
console.log(123);
console.log(this);
}
}
CreateObj.prototype.fun = function(){
console.log(this.age,this.name);
console.log(this);
}
const obj = new CreateObj('张三',18);
obj.fff();
obj.fun();
console.log(obj)
</script>
