1.javascript基础
2.DOM
2.1DOM简介
文档对象模型(Document Object Model ,简称DOM)是W3C组织推荐的处理可扩展标记语言的标准编程接口。
W3C定义了一系列的DOM接口,通过这些接口可以改变网页的内容、结构和样式。
DOM树
文档:一个页面就是一个文档,DOM中使用document表示。
元素:页面中的所有标签都是元素,DOM中使用element表示。
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示。DOM把以上内容都看作对象。
2.2获取元素
如何获取元素呢?
根据ID获取
使用document.getElementById(“id”)
方法可以获取带有ID的元素对象
根据标签名获取
使用document.getElementByTagName()
方法可以返回带有指定标签名的对象的集合
<html>
<head>
<title>根据ID获取 根据标签名获取</title>
</head>
<body>
<ul>
<li>知否知否,应是等你好久</li>
<li>知否知否,应是等你好久</li>
<li>知否知否,应是等你好久</li>
<li>知否知否,应是等你好久</li>
</ul>
<ul id="nav">
<li>知否知否,应是等你好久</li>
<li>知否知否,应是等你好久</li>
<li>知否知否,应是等你好久</li>
<li>知否知否,应是等你好久</li>
</ul>
<script>
/*1.返回的是获取元素对象集合 以伪数组的形式储存的*/
var lis=document.getElectmentsByTagName("li");
console.log(lis);
console.log(lis[1]);
/*2.我们要依次打印里面的元素,可以采用遍历的方式*/
for(int i=0;i<lis.length;i++){
console.log(lis[i]);
}
/*3.Element.getElementByTagName()可以得到元素里面的某个标签*/
var nav=document.getElementById("nav");
var navlis=nav.getElementByTagName("li");
console.log(lis);
</script>
</body>
</html>
通过HTML5新增方法获取
使用document.getElementByClassName("类名")
方法可以根据类名返回对象集合。
使用document.querySelector("选择器")
返回第一个元素对象
<html>
<head>
<title></title>
</head>
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<ul>
<li>产品</li>
<li>首页</li>
</ul>
</div>
<script>
/*1.根据类名选择集合元素getElementsByClassName()*/
var boxs=document.getElementByClassName("box");
console.log("boxs");
/*2.`document.querySelector("选择器")返回指定选择器的第一个元素对象*/
var boxs=document.queryselector(".box");
console.log("boxs");
var boxs=document.queryselector("#nav");
console.log("boxs");
var li=document.queryselector("li");
console.log("li");
/*3.document.querySelectorAll() 返回指定选择器的全部*/
var allbox=document.querySelectorAll(".box");
console.log("allbox");
var lis=document.querySelectorAll("li");
console.log("lis");
</script>
</body>
</html>
特殊元素获取
获取body元素
document.body
//返回body元素对象
获取html元素
document.documentElement
//返回html元素对象
2.3事件基础
执行事件的步骤:
<1>获取事件源
var div=document.query("div")
<2>注册事件(绑定事件)
div.onclick
<3>添加事件处理程序
div.οnclick=function(){
console.log("我被选中了");
}
2.4操作元素
JavaScript的DOM操作
可以改变网页内容、结构与样式,我们可以利用DOM操作元素来改变元素里面操作的内容、属性等。
2.4.1改变元素内容
element.innertext
去除空格和换行
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉。
element.innerHTML
保留空格和换行
从起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行。
innertext 和innerHTML区别是
:innertext不识别html标签,而innerHTML识别html标签。
2.4.2常用元素的属性操作
innertext innerHTML改变元素内容
src href
id alt title
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="image/ldh.jpg" alt="">
<script>
/*1.获取元素*/
var ldh=document.getElementById("ldh");
var zxy=document.getElementById("zxy");
var img=document.querySelector("img");
/*2.注册事件*/
zxy.οnclick=function(){
img.src="image/zxy.jpg";
img.title="张学友史密达";
}
ldh.οnclick=function(){
img.src="image/ldh.jpg";
img.title="刘德华史密达";
}
</script>
</body>
2.4.3表单元素属性操作
利用DOM
可以操作如下表单元素的属性:type value checked
selected disabled
。
<body>
<button>按钮</button>
<input type="text" value="">
<script>
/*1.获取元素*/
var btn=document.querySelector("button");
var input=document.querySelector("input");
/*2.注册事件 处理事件*/
btn.οnclick=function() {
input.innerHtml="点击了";
input.value="被点击了";
/*表单禁用*/
btn.disabled=true;
}
</script>
</body>
2.4.4样式属性操作
通过JS可以修改元素的大小、颜色、位置等样式。
<1>element.style
行内样式操作
<2>element.className
类名样式操作
注意:1.如果样式太多,可以采取操作类名方式更改类名样式。
2.class是个保留字,因此使用className来操作元素类名属性。
3.className会直接更改元素的类名,会覆盖原先的类名。
<html>
<head>
<title></title>
<style>
.first {
width:400px;
height:400px;
background-color:pink;
}
.change {
width:00px;
height:400px;
background-color:red;
margin-top:100px;
}
</style>
</head>
<body>
<div class="first">文字</div>
<script>
/*获取元素*/
var div=document.querySelector("div");
/*注册事件 处理事件*/
div.οnclick=function() {
// div.style.backgroundColor:red;
// div.style.width:600px;
this.className="first change";
}
</script>
</body>
</html>
2.4.5自定义属性的操作
1.获取属性值
element.属性
获取属性值。
element.getAttribute("属性")
。
区别:element.属性;
获取内置属性值(元素本身自带的属性值)
element.getAttribute("属性");
主要获取自定义属性(标准)我们程序员自定义的属性
2.设置属性值
element.属性=“值”; 设置内置属性值
element.setAttribute(“属性”,“值”)
比如:element.setAttribute(“data-index”,“2”)
3.移除属性值
element.removeAttribute(“属性”)
总结:
自定义属性的目的:是为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中。
自定义属性通过getAttribute(“属性”)获取。
但是有些自定义属性很容易引起歧义,不容易判断是否是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性:
H5规定自定义属性data开头作为属性名并且赋值。比如:<div data-index="1"></div>
或者使用JS设置比如:element.setAttribute(“data-index”,“2”)
2.5节点操作
2.5.1为什么学节点操作?
1.利用DOM提供的方法获取元素
document.getElementById()
document.getElementByTagName()
document.querySelector()等
缺点:逻辑性不强、繁琐。
2.利用节点层级关系获取元素
利用父子兄节点获取元素
优点:逻辑性强,但是兼容性较差。
2.5.2节点概述
一般节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性。
元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3
(文本节点包含文字、空格、换行等)
我们在实际开发中,节点操作主要操作的是元素节点。
2.5.3节点层级
利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄
层级关系。
1.父级节点
node.parentNode
parentNode 属性可返回某节点的父节点,注意是最近的一个父节点,如果指定的节点没有父节点则返回null
2.子级节点
node.childNode
注意:node.childNode的返回值里面包含了所有的子节点,包括元素节点、文本节点。如果只需要获取里面的元素节点,则需要专门处理,所以我们一般不提倡使用。
例如:
var ul=document.querySelector("ul");
for(int i=0;i<ul.childNode.length;i++){
if(ul.childNode[i].NodeType==1){
//ul.childNode[i] 是元素节点
console.log(ul.childNodes[i]);
}
}
node.children (非标准)
parent.children 是一个只读属性,返回去所有的子元素节点,它只返回子元素节点,其余节点不返回(这个是我们重点掌握的)。
虽然children是一个非标准,但是得到了各浏览器的支持,因此我们可以放心使用。
parentNode.firstElementChild
firstElementChild
返回第一个子元素节点,找不到则返回null。
parentNode.lastElementChild
lastElementChild
返回最后一个子元素节点,找不到则返回null。
3.兄弟节点
node.nextSibling
nextsibling
返回当前元素的下一个兄弟节点,找不到则返回null。
node.previoussibling
previousSibling
返回当前元素的上一个兄弟节点,找不到则返回null。
node.nextElementSibling
nextElementSibling
返回当前元素的下一个兄弟元素节点,找不到则返回null。
node.previousElementSibling
previousElementSibling`返回当前元素的上一个兄弟元素节点,找不到则返回null。
4.创建节点
document.createElement(“tagname”);
document.createElement()方法创建tagName指定的HTML元素。因为这些元素原先不存在,是根据我们的需要动态生成的,所以我们也称为动态创建元素节点。
5.添加节点
node.appendChild(child);
node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。
node.insertBefore(child,指定元素);
6.删除节点
node.removeChild(child);
node.removeChild()
方法从DOM中删除一个子节点,返回删除的节点。
7.复制节点(克隆节点)
node.cloneNode();
node.cloneNode()
方法返回调用该方法的节点的一个副本。也称为克隆节点或拷贝节点。
注意:
如果括号里面为空或false,浅拷贝,只复制标签不复制里面的内容。
如果括号里面为true,深拷贝,复制标签复制里面的内容。
2.5.4总结·
1.三种动态创建元素的区别
document.write()
element.innerHTML
document.createElement()
write()
创建元素 如果页面文档流加载完毕,再调用这句话会调用导致页面重绘。
innerHTML
是将内容写入某个节点,不会导致页面重绘。
createElement()
创建多个元素,效率稍低一些,但是结构更清晰。
总之,不同的浏览器下,innerHTML效率要比createElement高。
2.DOM重点核心
文档对象模型(document object model)是w3c组织推荐的处理可扩展标记语言的标准编程接口。
w3c已经定义了一系列DOM接口,通过这些DOM接口可以改变网页的结构、内容和样式。
1>对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的DOM编程接口。
对于HTML,DOM使得HTML形成一颗DOM树,包括文档(指整个页面
)、元素(指标签
)、节点(页面中所有的内容
)。
对于DOM操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
创建: document.write()
element.innerHTML
document.createElement()
增: appendchild()
insertBefore(child,指定元素)
删: removeChild()
改:主要修改DOM的元素属性,DOM元素的内容、属性、表单的值等。
修改元素属性:src、href、title等。
修改普通元素内容:innerHTML、innerText等
修改表单元素:value、type、disabled等
修改元素样式:style、className等
查(获取):主要获取查询DOM元素
DOM提供的API方法:getElementById、getElementByTagName.(不推荐)
HTML提供的新方法:querySelector、querySelectorAll.(提倡)
利用节点操作获取元素:父(parentNode)、子(children)、兄(prevousElementSibling\nextElementSibling)。(提倡)
3.属性操作(主要针对于自定义属性)
setAttribute:设置DOM的属性值
getAttribute:获取DOM的属性值
removeAttribute:移除属性
4.事件操作
给元素注册事件,采取事件源.事件类型=事件处理程序
鼠标事件 | 触发事件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfouse | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
2.6高级事件
2.6.1 注册事件(绑定事件)
2.6.2 删除事件(解绑事件)
2.6.3 DOM事件流
2.6.4 事件对象
2.6.5 阻止事件冒泡
2.6.6 事件委托(代理、委派)
2.6.7 常用的鼠标事件
2.6.8 常用的键盘事件
3.BOM
3.1 BOM概述
BOM(brower object model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
BOM是由一系列相关的对象构成,并且每个对象都提供了很多方法和属性。
DOM | BOM |
---|---|
文档对象模型 | 浏览器对象模型 |
DOM就是把(文档)当做一个对象来看待 | DOM就是把(浏览器)当做一个对象来看待 |
DOM顶级对象是document | BOM顶级对象是window |
DOM主要学习的是操作页面元素 | BOM学习的是浏览器窗口交互的一些对象 |
3.2 window对象的常见事件
3.2.1窗口加载事件
window.οnlοad=function() { };
或
window.addEventListener(“load”, function(){ });
3.2.2调整窗口大小事件
window.οnresize=function() { }
或
window.addEventListener(“resize”, function(){ });
3.3 定时器
3.3.1 window给我们提供了两个很好的定时器
setTimeOut()
setInterval()
3.3.2 window.setTimeOut(调用函数,【延迟的毫秒数】)
setTimeOut()方法用于设置一个定时器,该定时器到期后执行调用函数。
注意:<1>window可以省略。<2>调用这个函数可以直接写函数,或者写函数名或者采取字符串“函数名()”三种形式。<3>延迟的毫秒数默认是0,如果写,必须是毫秒。<4>因为定时器有很多,所以我们经常给定时器赋值一个标识符。
3.3.3停止 setTimeOut()定时器
window.clearTimeOut(timeoutID)
clearTimeOut()方法取消了先前通过调用setTimeOut()建立的定时器。
注意:<1>window可以省略。<2>里面的参数就是定时器的标识符。
3.3.4 setInterval()定时器
window.setInterval(调用函数,【延迟的毫秒数】)
setInterval()方法重复调用一个函数,每隔这个时间,就会调用一次回调函数。
注意:<1>window可以省略。<2>调用这个函数可以直接写函数,或者写函数名或者采取字符串“函数名()”三种形式。<3>间隔的毫秒数默认是0,如果写,必须是毫秒,表示每隔这个毫秒就自动调用这个函数。<4>因为定时器有很多,所以我们经常给定时器赋值一个标识符。
3.3.5停止 setInterval()定时器
window.clearInterval(timeoutID)
clearInterval()方法取消了先前通过调用setTimeOut()建立的定时器。
注意:<1>window可以省略。<2>里面的参数就是定时器的标识符。
两个定时器的区别
:
setTimeOut
:延时时间到了,就去调用这个回调函数,只调用一次
,就结束了这个定时器。
setInterval
:每隔这个延时时间,就去调用这个回调函数,会调用很多次
,重复调用这个函数。
3.4 location对象
3.5 navigator对象
3.6 history对象
4.PC端网页特效
4.1元素偏移量offset系列
4.1.1offset概述
offset翻译过来就是偏移量,我们使用offset系列相关属性可以得到动态的该元素的位置(偏移)、大小等。
获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)。
offset系列属性:
offset系列属性 | 作用 |
---|---|
element.offsetparent | 返回作为该元素作为带有定位的父级元素,如果父级没有元素,返回body |
element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
element.offsetleft | 返回元素相对带有定位父元素左边框的偏移 |
element.width | 返回自身包括padding、border、内容区的宽度,返回数值不带单位 |
element.height | 返回自身包括padding、border、内容区的高度,返回数值不带单位 |
4.1.4offset和style区别
offset | style |
---|---|
offset可以得到任意样式的样式表 | style只能得到行内样式的样式表 |
offset获得的数值是没有单位的 | style获得的是带有单位的字符串 |
offsetwidth包含padding+border+width | style.width获得不包括padding和border值 |
offsetwidth等属性是只读属性,只能获取,不能赋值 | style.width是可读写属性,可以获取,也可以赋值 |
所以,我们想要获取元素大小位置,用offset更合适 | 所以,我们想要给元素更改值,则需要用style改变 |
4.2元素可视区client系列
4.2.1client翻译过来就是客户端,我们使用client系列的相关属性来获取可视区的相关信息。通过client系列的相关属性值可以动态的得到该元素的边框大小、元素大小。
client系列属性 | 作用 |
---|---|
element.clientTop | 返回元素上边框的大小 |
element.clientLeft | 返回元素左边框的大小 |
element.clientWidth | 返回自身包括padding+内容区的宽度、不含边框,返回数值不带单位 |
element.clientHeight | 返回自身包括padding+内容区的宽度、不含边框,返回数值不带单位 |
4.2.2立即执行函数
4.3元素滚动scroll系列
4.4动画函数封装
4.4.1动画实现原理
核心原理:通过定时器setInterval()不断移动盒子位置。
实现步骤:(1)获得当前盒子位置
(2)让盒子在当前位置加上一个移动距离
(3)利用定时器不断重复这个操作
(4)加一个结束定时器的条件
(5)注意此元素需要添加定位,才能使用element.style.left
4.4.2动画函数的简单封装
注意:函数需要传递两个参数,动画对象和移动的距离。
<body>
<div></div>
<span>夏雨荷</span>
<script>
//简单对象封装obj目标对象,target目标位置
function animate (obj, target){
var timer=setInterval(function(){
if(obj.offsetyleft >= target){
//停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left=obj.offsetleft+1+"px";
},30);
}
var div=document.querySelector("div");
var span=document.querySelector("span");
//调用函数
animate(div,500);
animate(span,500);
</script>
</body>
4.4.3动画函数给不同的元素记录不同的计时器
如果多个元素都使用这个动画效果,每一次都需要var声明计时器,我们可以给不同的元素使用不同的计时器(自己专门用自己的定时器)。
核心原理:利用JS是一门动态语言,可以很方便的给当前对象添加属性。
<head>
<meta charset="UTF-8">
<title>动画效果</title>
<style>
div {
position:absolute;
top:10px;
left:0px;
width:100px;
height:100px;
background-color:pink;
}
span {
display:block;
position:absolute;
top:150px;
left:0px;
width:150px;
height:150px;
background-color:green;
}
</style>
</head>
<body>
<button></button>
<div></div>
<span>夏雨荷</span>
<script>
//简单对象封装obj目标对象,target目标位置
//给不同的元素指定不同的定时器
function animate (obj, target){
//当我们不断地点击按钮,这个元素的速度就会越类越快,因为开启了太多的定时器
//解决方案:让我们元素只有一个定时器执行
//先清除以前的定时器,只保留当前的一个定时器执行。
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(obj.offsetyleft >= target){
//停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left=obj.offsetleft+1+"px";
},30);
}
var div=document.querySelector("div");
var span=document.querySelector("span");
var btn=document.querySelector("button");
//调用函数
animate(div,500);
animate(span,500);
btn.addEventListener("click",function(){
animate(span,500);
})
</script>
</body>
4.4.4缓动效果原理
缓动效果的原理:让元素运动速度有所变化,最常见的是让速度慢慢停下来。
思路:(1).让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。
(2).核心算法:(目标值-现在的位置)/10
作为每次移动的距离步长。
100-0)/10=10
(100-10)/10=9
(100-19)/10=8.1
…
(3)停止的条件是:让当前盒子位置等于目标位置就停止定时器。
(4)步长值需要取整,如果是正值,则步长往大了取整。
如果是负值,步长往小了取整。
<body>
<button class="btn300">300步长</button>
<button class="btn800">800步长</button>
<div></div>
<span>夏雨荷</span>
<script>
//简单对象封装obj目标对象,target目标位置
//给不同的元素指定不同的定时器
function animate (obj, target){
//当我们不断地点击按钮,这个元素的速度就会越类越快,因为开启了太多的定时器
//解决方案:让我们元素只有一个定时器执行
//先清除以前的定时器,只保留当前的一个定时器执行。
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var step=(target-obj.offsetleft)/10;
if(step>0){
var step=Math.ceil(step);
}else{
var step=Math.floor(step);
}
if(obj.offsetyleft = target){
//停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left=obj.offsetleft+step+"px";
},15);
}
var div=document.querySelector("div");
var span=document.querySelector("span");
var btn300=document.querySelector("button");
var btn800=document.querySelector("button");
//调用函数
btn300.addEventListener("click",function(){
animate(div,300);
});
btn800.addEventListener("click",function(){
animate(span,800);
});
</script>
4.4.5动画函数添加回调函数
<script>
function animate (obj, target,callback){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var step=(target-obj.offsetleft)/10;
if(step>0){
var step=Math.ceil(step);
}else{
var step=Math.floor(step);
}
if(obj.offsetyleft = target){
clearInterval(obj.timer);
//回调函数写到定时结束里面
if(callback){
callback();
}
}
obj.style.left=obj.offsetleft+step+"px";
},15);
}
var div=document.querySelector("div");
var span=document.querySelector("span");
var btn300=document.querySelector("button");
var btn800=document.querySelector("button");
//调用函数
btn.addEventListener("click",function(){
animate(div,300);
});
btn.addEventListener("click",function(){
animate(span,800,function() {});
});
</script>
4.5常见网页特效案例
4.5.1轮播图
<body>
<div class="w">
<div class="main">
<div class="focus">
<!-- 左按钮 -->
<a href="javascript:;" class="arr-l"><</a>
<!-- 右按钮 -->
<a href="javascript:;" class="arr-r">></a>
<!-- 核心的滚动区域 -->
<ul>
<li>
<a href="#"><img src="image/lun1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="image/lun2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="image/lun3.jpg" alt=""></a>
</li>
</ul>
<!-- 小圆圈 -->
<ol class="circle">
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
</div>
<script>
window.addEventListener("load",function(){
//1.获取元素
var arrow_l=document.querySelector(".arrow-l");
var arrow_r=document.querySelector(".arrow-r");
var focus=document.querySelector(".focus");
//2.鼠标经过focus 就显示隐藏左右按键
focus.addEventListener("mouseenter",function(){
arrow_l.style.display="block";
arrow_r.style.display="block";
clearInterval(timer);
timer=null;//清除定时器变量
});
focus.addEventListener("mouseleave",function(){
arrow_l.style.display="none";
arrow_r.style.display="none";
timer=setInterval(function(){
//手动调用点击事件
arrow_r.click();
},2000);
});
//3.动态生成小圆圈 有几张图片,我就生成几张小圆圈
var ul=focus.querySelector("ul");
var ol=focus.querySelector("ol");
for(i=0;i<ul.children.length;i++){
//创建一个li
var li=document.querySelector("li");
//li.setAttribute("index",i);
//把li添加到ol里面
ol.appendChild(li);
//4.小圆圈的排它思想,我们可以直接在生成小圆圈的同时,直接绑定点击事件
li.addEventlistener("click",function(){
//干掉所有人 把所有的li 清除current 类名
for(i=0;i<ol.children.length;i++){
ol.children[0].className="";
}
this.className="current";
//5.点击小圆圈,移动图片,当然移动的是ul
var focuswidth=focus.oddsetWidth;
var index=this.getAttribute("index");
//当我们点击了某个li 就要把这个li的索引给num
num=index;
//当我们点击了某个li 就要把这个li的索引给circle
circle=index;
//调用封装好的动画函数
animate(ul,index*focuswidth);
})
}
//把ol里面的第一个小li设置类名为current
ol.children[0].className="current";
//6.克隆第一张图片的li放到ul最后面
var first=ul.chldren[0].cloneNode(true);
ul.appendChild(first);
//7.点击右侧按钮,图片滚动一张
var num=0;
var circle=0;
arr_r.addEventListener("click",function(){
if(num == ul.children.length-1){
ul.style.left=0;
num=0;
}
num++;
var focuswidth=focus.oddsetWidth;
animate(ul,-num*focuswidth);
//8.点击右侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle++;
//如果circle==4 说明走到最后我们克隆的这张图片了,我们就复原
if(circle==ol.chldren.length){
circle=0;
}
//先清除小圆圈的current类名
for(var i=0;i<ol.chldren.length;i++){
ol.children[i].className="";
}
//留下当前小圆圈的current类名
ol.childern[circle].className="current";
});
arr_l.addEventListener("click",function(){
if(num == ul.children.length-1){
num=ul.children.length-1;
ul.style.left=-num * focuswidth +"px";
}
num--;
var focuswidth=focus.oddsetWidth;
animate(ul,-num*focuswidth);
//9.点击右侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle--;
//如果circle==4 说明走到最后我们克隆的这张图片了,我们就复原
if(circle<0){
circle=ol.children.length-1;
}
//先清除小圆圈的current类名
for(var i=0;i<ol.chldren.length;i++){
ol.children[i].className="";
}
//留下当前小圆圈的current类名
ol.childern[circle].className="current";
});
//10.自动播放轮播图
var timer=setInterval(function(){
//手动调用点击事件
arrow_r.click();
},2000);
});
</script>
</body>
5.移动端网页特效
5.1触屏事件
5.1.1触屏事件概述
移动端浏览器的兼容性较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用JS书写效果,但是移动端也有自己独特的地方。比如触屏事件(touch).
touch代表一个触摸点。触摸点k可能是一根手指,也可能是一根触摸笔。触摸事件可响应用户手指对屏幕或触控板操作。
常见的触屏事件如下:
触屏touch事件 | 说明 |
---|---|
touchstart | 手指触摸到一个DOM元素时触发 |
touchmove | 手指在一个DOM元素上滑动时触发 |
touchend | 手指在一个DOM元素上移开时触发 |
5.1.2触摸事件对象
TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触电的移动、触电的增加和减少,等等。
touchstart 、touchmove、touchend三个事件都会各自有事件对象。
触摸列表 | 说明 |
---|---|
touches | 正在触摸屏幕的所有手指的列表 |
targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
changedTouches | 手指状态发生改变的列表,从无到有,从有到无变化 |
5.1.3移动端拖动元素
<1>touchstart、touchmove、touchend
可以实现拖动元素
<2>但是拖动元素需要当前手指的坐标值(我们可以使用targetTouches[0]里面的pageX和pageY)
<3>移动端拖动原理:手指移动中,计算手指移动的距离。然后利用盒子原来的位置+手指移动的距离。
<4>手指移动的距离:手指滑动的位置-手指刚触摸的位置。
拖动元素三步曲:
1.触摸元素touchstart
:获取手指初始坐标,同时获得盒子原来位置
2.移动手指touchmove
:计算手指移动距离,并且移动盒子。
3.离开手指touchend
注意:手指移动也会触发滚动屏幕,所以这里要阻止默认的屏幕滚动 e.preventDefault();
5.2移动端常见特效
5.2.1移动端(手机)轮播图功能基本和pc端(浏览器)一致
<1>可以自动播放图片
<2>手指可以拖动播放轮播图
5.2.2classlist属性
classlist属性是THML5新增的一个属性,返回元素的类名。但是ie10以上的版本支持。该属性用于在元素中添加、移除、及切换css类。
以下方法:
添加类:element.classlist.add(“类名”)
移除类:element.classlist.remove(“类名”)
切换类:element.classlist.toggle(“类名”)
5.3移动端常见开发插件
5.3.1开发插件
中文官方地址swiper:http://www.swiper.com.cn/
其他插件:superslide:http://www.superslide2.com/
iscroll: https://www.github.com/cubiq/iscroll
<1>引入插件相关文件
<2>按照规定语法使用
5.3.2插件的使用总结
(1)确认插件实现的功能
(2)去官网查看使用说明
(3)下载插件
(4)打开demo实例文件,查看需要引入的相关文件,并且引入。
(5)复制demo实例文件中的结构html,样式css以及js代码。
5.3.3移动端视频插件zy.media.js
H5给我们提供了video标签,但是浏览器支持情况不同,不同的视频格式文件,我们可以通过source解决。但是外观样式,还有暂停、播放、全屏等功能,我们只能自己写代码解决。
5.4移动端常用开发框架
5.4.1框架概述
框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身,使用者按照框架规定的某种规范进行开发。
插件,一般是为了解决某个问题而专门存在,其功能单一,并且比较小。
前端常用的框架有
:bootstrap、vue、Angular、React等,既能开发PC端,也能开发移动端。
前端常用的移动端插件有
:swiper、superslide、iscroll等
5.4.2BootStrap
BootStrap
是一个简洁、直观、强悍的前端开发框架,它让web开发更迅速、简单。
BootStrap JS插件使用步骤
:<1>引入相关JS文件。<2>复制html结构。<3>修改对应样式。<4>修改相应JS参数。
6.本地储存
6.1本地储存的特性**
:<1>数据储存在用户浏览器中。<2>设置、读取方便、甚至页面刷新都不丢失数据。<3>容量较大,sessionStorage约5M、localStorage约20M
。<4>只能存储字符串,可以将对象JSON.Stringify()编码后存储。
6.2window.sessionStorage
<1>生命周期为关闭浏览器窗口
<2>在同一个窗口下数据可以共享
<3>以键值对的形式存储使用
存储数据:sessionStorage.setItem(key,value)
获取数据:sessionStorage.getItem(key)
删除数据:sessionStorage.removeItem(key)
删除所有数据:sessionStorage.clear()
6.3window.localStorage
<1>生命周期永久生效,除非手动删除,否则关闭页面也会存在。
<2>可以多窗口(页面)共享(同一浏览器可以共享)
<3>以键值对的形式存储使用
存储数据:localStorage.setItem(key,value)
获取数据:localStorage.getItem(key)
删除数据:localStorage.removeItem(key)
删除所有数据:localStorage.clear()