【JS进阶知识点】2

网页轮播图

轮播图效果的概念实际上是定位的盒子在一块父级可视区域中不断持续更改left值呈现移动效果，其中需要用到的有 setInterval 定时器 overflow 区域隐藏与 onclick 单击事件等

步骤一：HTML + css 样式的创建

tip: CSS过长就不加以展示了，其中用到了定位和区域隐藏

<div class=”focus”>
<ol class=”img_index”>
</ol>
<div class=”roll_left”></div>
<div class=”roll_right”></div>
<ul>
<li><img src=”upload/focus1.png” alt=””></li>
<li><img src=”http://www.dmoe.cc/random.php” alt=””></li>
<li><img src=”https://img.paulzzh.com/touhou/random” alt=””></li>
<li><img src=”https://api.lyiqk.cn/acg” alt=””></li>
<li><img src=”https://api.lyiqk.cn/miku” alt=””></li>
</ul>
<script>
// Ul 宽度自适应
let roll_ol = document.querySelector(‘.focus ol’);
let roll_ul = document.querySelector(‘.focus ul’);
let ulWidth = (roll_ul.children.length + 1).toString() + ‘00%’;
roll_ul.style.width = ulWidth;
</script>
</div>

步骤二：实现移动动画效果的动画封装

该方法传入对象将会在 obj 对象中创建用于缓动的定时器，并到达指定区域 target 后自行清理

// 动画函数传入标签对象限制的距离
function animateMove(obj, target, callback) {
if (obj) {
// 预先清除上一个定时器
clearInterval(obj.timer);
// 创建标签对象属性 timer 并赋予连续的动画方法
obj.timer = setInterval(function () {
// temp的值为分成20步骤完成的目标位置的值
let temp = (target – obj.offsetLeft) / 20;
//判断返回的数值是否为正负执行不同的取整方法
temp = temp > 0 ? Math.ceil(temp) : Math.floor(temp);
// 如标签对象的左侧距离等于 taget 给定的值
if (obj.offsetLeft == target) {
// 清除该定时器
clearInterval(obj.timer);
if (callback) {
callback();
}
} else {
// 若否持续执行每次自身与父级左侧的距离加 1px
obj.style.left = obj.offsetLeft + temp + ‘px’;
}
}, 30);
}
}

步骤三：下标圆圈赋予移动已定位的 <ul> 盒子实现图片滚动

实际为缓缓移动了<ul>标签并在父盒可视区域显示过程最终停留在目标图片实现的效果

//决定Ol小圆的数量
for (let i = 0; i < rollImgBox.children.length; i++) {
let li = this.document.createElement(‘li’);
li.index = i;
li.addEventListener(‘click’, function () {
clearOlClassName();
this.className = ‘img_check’;
nowRollImg = li.index;
let target = -li.index * rollImgBox.children[0].offsetWidth;
animateMove(rollImgBox, target);
});
imgIndex.appendChild(li);
}
//预选中
imgIndex.children[0].className = ‘img_check’;
//初始化ol中的圆圈样式
function clearOlClassName() {
for (let i = 0; i < imgIndex.children.length; i++) {
imgIndex.children[i].className = ”;
}
}

步骤四：实现单击左右侧按钮实现上一张下一张图片

在这中，步骤三进行了铺垫。使用了nowRollImg变量记录了当前显示的图片下标

//图片位移方法
function rollMove(type) {
//取得图片总数量
let temp = rollImgBox.children.length – 1;
if (!type) {
//复位到第一张图
if (nowRollImg == temp) {
nowRollImg = 0;
rollImgBox.style.left = 0;
}
nowRollImg++;
let target = -nowRollImg * rollImgBox.children[0].offsetWidth;
animateMove(rollImgBox, target);
//初始化圈圈
clearOlClassName();
if (nowRollImg != temp) {
imgIndex.children[nowRollImg].className = ‘img_check’;
} else {
imgIndex.children[0].className = ‘img_check’;
}
} else {
if (nowRollImg == 0) {
rollImgBox.style.left = (-rollImgBox.children[0].offsetWidth * temp) + ‘px’;
nowRollImg = temp;
}
nowRollImg–;
let target = -nowRollImg * rollImgBox.children[0].offsetWidth;
animateMove(rollImgBox, target);
clearOlClassName();
//圆圈选中方位绑定索引
imgIndex.children[nowRollImg].className = ‘img_check’;
}
}

//初始化ol中的圆圈样式
function clearOlClassName() {
for (let i = 0; i < imgIndex.children.length; i++) {
imgIndex.children[i].className = ”;
}
}

//实现上一张下一张
rollRigth.addEventListener(‘click’, function () {
rollMove();
});
rollLeft.addEventListener(‘click’, function () {
rollMove(1);
});

扩展步骤：自动播放

利用 setlnterval() 定时器可持续执行某些方法，在里面传入 element.click() 元素被单击，执行绑定的 “下一张” 事件即可

var move = setInterval(() => {
//手动调用点击事件
rollRigth.click();
}, 3000);

扩展步骤：节流阀

为了避免用户发现滚动的动画太仓促，当我们需要设定在动画结束后才可再单击进入下一张时候，可采用节流阀的思路。即定义一个变量用于检测动画进行or结束状态，值为 true/false

执行时检测这个变量，若为 true 则执行缓动动画，并将该变量赋值为false (用于再次执行时候忽略该事件)。再在动画结束后的回调函数中改为true(用于动画执行完毕，会接收到事件后执行事件处理程序)

// 节流阀初始化
imgFlag = true;
if (imgFlag) {
//节流阀事件执行程序关
imgFlag = false;
//执行下一张图片方法
….
animateMove(rollImgBox, target, function () {
// 节流阀事件执行程序开
imgFlag = true;
});
//初始化圈圈
….
}
}

返回顶部案例

可用 window.scroll(x,y) 实现基础的返回顶部功能

//返回到页面最顶端
goBack.addEventListener(‘click’, function () {
window.scroll(0, 0);
});

可用 obj.pageYOffset 获取当前文档滚动位置

// 文档滚动事件监听事件处理程序
document.addEventListener(‘scroll‘, function () {
// 改变指定元素的文本内容为文档隐藏的top值保留1位小数
document.querySelector(‘.seeScroll p’).innerHTML = window.pageYOffset.toFixed(1);
});

实现缓动到顶端的效果

稍微修改下移动动画封装函数，我们也可用于文档的上下指定方位的滚动

// 返回函数传入返回位置、{回调函数}
function goBackMove(target, callback) {
// 预先清除上一个定时器
clearInterval(window.timer);
// 创建标签对象属性 timer 并赋予连续的动画方法
window.timer = setInterval(function () {
// temp的值为分成20步骤完成的目标当前位置减去目标当前被隐藏的top值
let temp = (target – window.pageYOffset) / 20;
//判断返回的数值是否为正负执行不同的取整方法
temp = temp > 0 ? Math.ceil(temp) : Math.floor(temp);
// 如对象与目标值的距离等于 taget 给定的值
if (window.pageYOffset == target) {
// 清除该定时器
clearInterval(window.timer);
// 短路运算实现判断 callback若存在值则执行callback回调函数
callback && callback();
} else {
// 若否继续持续位移
window.scroll(0, window.pageYOffset + temp);
}
}, 10);
}

返回顶部

筋斗云案例

HTML 基本结构

注意 SMchecked 作为跳动的 “筋斗云” 不能在<li>的上方。会影响鼠标经过/离开的事件触发；可使用背景图或者 z-index:-1;来使元素下沉。并且不能给 <li> 设置背景色；

依旧是使用动画函数封装，为每个 <ul> 下的 <li> 添加事件绑定

当鼠标经过单个 <li> 目标时获取该目标的 offsetLeft 值并作为 target 传给动画函数封装 ,使其移动到指定位置
当鼠标离开该 <li> 目标时回到到 nowPosi 所记录的位置。nowPosi 初始位置为最左侧 <li> 的位置
鼠标单击某项 <li> 时，nowPosi 将记录该位置。初始位置因此被修改；将返回到目标单击 <li> 的位置

// 循环给所有li添加事件绑定
for (let i = 0; i < jdyLi.length; i++) {
// 鼠标经过事件
jdyLi[i].addEventListener(‘mouseenter‘, function () {
moveJdy(SMchecked, this.offsetLeft);
});
// 鼠标离开事件
jdyLi[i].addEventListener(‘mouseleave‘, function () {
moveJdy(SMchecked, nowPosi);
});
// 鼠标单击事件将当前目标值存在 nowPosi 变量中
jdyLi[i].addEventListener(‘click’, function () {
nowPosi=this.offsetLeft;
});
}

触摸事件

该事件为移动端事件

该类事件类似于 PC端的鼠标单击事件鼠标移动事件鼠标松开事件

触摸touch事件	描述
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指在一个DOM元素时触发

jQuery

jQuery 是 JavaScript库其中一个库，它封装了DOM、BOM、原生JS的常见操作代码

它是一个快速、简洁的JavaScript库，倡导更少的代码实现更多的效果。因此它是作用就是建立一个封装好的特定的集合（方法和函数），方便程序员快速架构想要的组件或功能。它与传统制作网站的优势在于：

轻量级、核心文件才几十KB
跨浏览器兼容，解决了旧版或不同浏览器兼容性问题
链式编程、隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发，有着丰富的第三方插件。例如：树形菜单、日期控件、轮播图
免费、开源

学习jQuery本质，就是学习调用这些函数。当学完它的函数调用后，就等于学完了jQuery

jQuery安装

jQuery官网

使用 Google 的 CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

使用 Microsoft 的 CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

语法演示

该代码实现元素加载完成后，单击该div类名为sm的元素时1秒后会实现自动淡出效果

语义拆分

jQuery入口函数

有时候DOM无法获取元素，大概率为文档并未加载完成。所以为了解决这个问题，我们应当当DOM加载完毕后，执行js代码

第一种写法

// 该方式简化了第二种写法
$(function(){
//此处是页面DOM加载完成入口
});

第二种写法

// 等待页面DOM加载完成后执行 document.ready()
$(document).ready(function(){
// 此处是页面DOM加载完成入口
});

jQuery顶级对象 $

$ 是 jQuery 的别称，在代码中也可以使用 jQuery 代替 $

// 作用相等
jQuery(‘div’).click();
$(‘div’).click();

jQuery 选择器

jQuery获取的对象是一个数组，当操作jQuery元素时，会自动循环操作数组内所有元素，因此无需使用for循环操作 jQuery 对象

名称	用法	描述
ID选择器	$(‘#id’)	获取指定ID的元素
全选选择器	$(‘*’)	匹配所有元素
类选择器	$(‘.class’)	获取同一类的元素
标签选择器	$(‘div’)	获取同一类标签的所有元素
并集选择器	$(‘div,li,p’)	获取多个元素
交集选择器	$(‘li.cueernt’)	交集元素(达成两条件的元素)
子代选择器	$(‘ul>li’)	获取亲儿子层级元素
后代选择器	$(‘ul li’)	获取父级以下选定的子元素

jQuery 元素选择器

//jQuery 使用 CSS 选择器来选取 HTML 元素
$(“p”) //选取 <p> 元素
$(“p.intro”) //选取所有 class=”intro” 的 <p> 元素
$(“p#demo”) //选取所有 id=”demo” 的 <p> 元素

jQuery 属性选择器

// jQuery 使用 XPath 表达式来选择带有给定属性的元素
$(“[href]”) // 选取所有带有 href 属性的元素
$(“[href=’#’]”) // 选取所有带有 href 值等于 “#” 的元素
$(“[href!=’#’]”) // 选取所有带有 href 值不等于 “#” 的元素
$(“[href$=’.jpg’]”) // 选取所有 href 值以 “.jpg” 结尾的元素

jQuery CSS选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性，下面的例子把所有 p 元素的背景颜色更改为红色

// jQuery自带的修改元素CSS的方式属性必须加引号，数值可以不用加引号
$(“p”).css(“background-color”,”red”);

jQuery 也可以使用 CSS选择器返回属性值

<p style=”color: red;” id=”sm”>你好jQuery</p>
<script>
// id 为sm 的元素单击后返回当前元素 color CSS属性值
$(‘#sm’).click(function(){
console.log($(this).css(‘color’));
});
</script>

你好jQuery

jQuery 的.css() 方法还可以插入对象，实现对选中元素设置更多样式

$(this).css({
‘color’:’white’,
‘font-size’:’20px’
});

jQuery 筛选择器

该选择方式将会根据成员中的不同位置关系的元素进行选中操作

名称	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(‘li:last’)	获取最后一个li元素
:eq(index)	$(‘li.eq(2)’)	获取到的li元素中，选择索引号为2的单个成员，索引号Index从0开始
:odd	$(‘li:odd’)	获取到的li元素中，选择索引号为奇数的元素
:even	$(‘li:even’)	获取到的li元素中，选择索引号为偶数的元素

jQuery 节点选择器

语法	用法	描述
parent()	$(‘li’).parent();	返回父级
parents()	$(‘li’).parents(‘ul’);	返回所有父级用于指定一项父级
children(selector)	$(‘ul’).children(‘li’);	相当于 $(‘ul>li’),最近一级子级节点
find(selector)	$(‘ul’).find(‘li’);	相当于 $(‘ul li’),类似于后代选择器
nextAll([expr])	$(‘ul’).nextAll();	查找当前元素之后的所有同辈元素
prevtAll([expr])	$(‘ul’).prevtAll();	查找当前元素之前的所有同辈元素
hasClass(class)	$(‘div’).hasClass(‘protected’);	检查当前的元素是否含有某个特定的类，如果有，返回 true
eq(index)	$(‘li’).eq(2);	相当于 $(‘li:eq(2)’),index 从0开始
filter()	$(“p”).filter(“.intro”);	不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not()	$(“p”).not(“.intro”);	not() 方法返回不匹配标准的所有元素
siblings()	$(“p”).siblings();	siblings() 方法除自身所有兄弟节点

DOM 对象与 jQuery 对象转换

jQuery对象与 DOM对象的方法各有不同，它们都不能直接使用对方的方法。因为 jQuery库只是封装了常用 JavaScript 方法，因此需要用到转换方式

DOM对象转 jQuery 对象

let sm=document.querySelector(‘.sm’);
// 转换为 jQuery对象
$(sm);

jQuery对象转 DOM 对象

$(sm3);
// 利用数组形式转换成 DOM 对象
$(sm3)[0].style.backgroundColor=’#66cc’;
// 或用以下方式
$(sm3).get(0).style.backgroundColor=’red’;

jQuery 隐式迭代

jQuery 执行中会遍历内部DOM元素（伪数组形式存储）的特征，该特征叫隐式迭代
（给匹配到的所有元素进行循环遍历，同时执行相应的方法，而不用我们再进行循环，简化程序员操作）

<div>
<ul class=”sm”>
<li>单击我更改颜色</li>
<li>单击我更改颜色</li>
<li>单击我更改颜色</li>
<li>单击我更改颜色</li>
</ul>
</div>
<script>
// 为依次选中的 li 注册单击事件
$(‘.sm li’).click(
function () {
$(this).css(‘background-color’, ‘#66ccff’);
});
</script>

jQuery 排他思想

jQuery的排他方式要比原生简单，依赖隐式迭代的优势，jQuery可以很轻松实现排他的效果

<div class=”sm”>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
</div>
<script>
// 1.隐式迭代给所有的按钮添加绑定事件
$(‘.sm button’).click(
function(){
// 2.当前的元素变化背景颜色
$(this).css(‘background’,”#66cc”);
// 3.除它之外的兄弟节点的元素取消背景色
$(this).siblings(‘button’).css(‘background’,”);
}
)
</script>

获取事件捕获中的下标

index() 方法返回指定元素相对于其他指定元素的 index 位置

$(“li”).click(function () {
alert($(this).index());
});

链式编程

jQuery 的链式编程写法可以节省代码量，而且看起来更优雅

$(‘ul’).children(‘li’).click(
function(){
// 改变当前目标文字颜色并将其他兄弟节点元素颜色还原
$(this).css(‘color’,’#66cc’).siblings().css(‘color’,”);
}
)

jQuery CSS类的控制

添加CSS类移除CSS类切换CSS类

若要添加多个 css样式，我们可以直接替换 css类的方式修改样式

添加类 ( 不会删除元素中原有的类 )

$(‘div’).addClass(‘cueernt’);

删除类 (若括号有值则删除括号中对应的类若无则给该元素删除所有类)

$(‘div’).removeClass(‘cueernt’);

切换类

$(‘div’).toggleClass(‘cueernt’); // 当存在该类时候将移除不存在则添加

灵活使用 addClass 和 removeClass 与排查思想，可以简化TAB栏切换案例

日志
工程
产品
作业
其他

学Dart死路一条

学HTML死路一条

学CSS死路一条

学JavaScript死路一条

学jQuery死路一条

jQuery 动画

动画内容较丰富，有兴趣可以下方参考文档

jQuery API查阅下载

显示 show() 隐藏 hide() 切换toggle()

show( [speed速度] , [easing切换效果] , [fn回调函数] );
hide( [speed速度] , [easing切换效果] , [fn回调函数] );
toggle( [speed速度] , [easing切换效果] , [fn回调函数] );

1.参数都可以省略
2.speed 可以设置三种预定速度（’slow’,’normal’,’fast’）或设置动画时长毫秒数(如：1000)
3.easing 用来指定切换效果，默认为 ‘swing’ (匀速)，可用参数为 ‘linear’
4.fn 回调函数，当动画结束后执行的函数

$(‘button’).eq(0).click(function(){
$(‘div’).show(1000);
});
$(‘button’).eq(1).click(function(){
$(‘div’).hide(1000);
});
$(‘button’).eq(2).click(function(){
$(‘div’).toggle(1000);
});

滑动 slideDown()下拉 slideUp()上拉 slideToggle()切换

slideDown( [speed速度] , [easing切换效果] , [fn回调函数] );
slideUp( [speed速度] , [easing切换效果] , [fn回调函数] );
slideToggle( [speed速度] , [easing切换效果] , [fn回调函数] );

$(‘button’).eq(0).click(function(){
$(‘div’).slideDown(2000);
});
$(‘button’).eq(1).click(function(){
$(‘div’).slideUp(1000);
});
$(‘button’).eq(2).click(function(){
$(‘div’).slideToggle(500);
});

可搭配 .hover(鼠标经过事件,鼠标离开事件);

事件切换 hover 就是鼠标经过离开的复合写法，如果只写一个参数则经过离开都会触发该函数

一般写法

$(‘.nav>li’).hover(
// 鼠标经过
function () {
$(this).children(‘ul’).slideDown();
},
// 鼠标离开
function () {
$(this).children(‘ul’).slideUp();
}
);

简化写法

$(‘.nav>li’).hover(
// 鼠标经过+离开
function () {
$(this).children(‘ul’).slideToggle();
},
);

淡入淡出 fadeIn() fadeOut() fadeToggle() fadeTo()

以上方讲过的动画参数基本一致，另元素淡化 fadeTo([速度],透明度,[回调函数]) 方法必须加透明度（0-1）参数

停止动画 stop()

写在接下来的动画的前面，会停止当前正在运行的动画，常用于解决动画多次进行的问题

// stop() 需要写到动画的前面,才能阻止动画队列现象
$(this).children(‘ul’).stop().slideToggle();

有stop()函数

无stop()函数

自定义动画 animate()

animate(params,[speed],[easing],[fn]);

1.params 想要改变的样式属性，以对象形式传递。属性名可以不用带引号。如果是符合属性则需要采取驼峰命名法（如：borderLeft）
2.speed 三种预定速度之一的字符串（”slow”,”normal”,”fast”）,或表示动画时长的毫秒数值（如：1000）
3.easing (Optional) 用来指定切换效果，默认是 “swing”，可用参数 “linear”

$(this).stop().animate({
width: ‘0’
}, 2000, ‘linear’);

例子：

jQuery 属性操作

获取 / 修改自有属性 prop()

// 获取元素自有属性值
$(‘a’).prop(‘href’);
// 修改元素自有属性值
$(‘a’).prop(‘title’,’好耶’);

获取 / 修改自定义属性 attr() (也可以获取H5自定义属性)

自定义属性为用户为需要自己在标签元素中创建的属性 (如为了计算下标的 index)

// 添加自定义属性
$(‘a’).attr(‘index’);
// 修改自定义属性
$(‘a’).attr(‘index’,0);

获取 / 数据缓存属性 data()

数据缓存存放在元素的内存里面，相当于变量，它不会显示在标签代码上

// 修改数据缓存属性
$(‘input’).data(‘name’,0);
// 获取数据缓存属性
console.log($(‘input’).data(‘name’)); //0

它也可以获取 H5 自定义属性

<div data-index=”0″></div>
<script>
console.log($(‘div’).data(‘index’)); //0
</script>

jQuery 内容操作

普通元素内容获取/修改 html()

该方法相当于原生 innerHTML

<div><p>文本被替换</p></div>
<script>
// 获取文本内容
$(‘p’).html(); // <p>文本被替换</p>
// 对目标元素内容进行替换
$(‘p’).html(‘学jQuery死路一条’);
</script>

文本元素内容获取/修改 text()

该方法相当于原生 innerText

<div><p>文本被替换</p></div>
<script>
// 获取文本内容
$(‘p’)text(); // <p>文本被替换</p>
// 对目标元素内容进行替换
$(‘p’).text(‘学jQuery死路一条’);
</script>

表单元素值获取/修改 val()

<input type=”text” value=””>
<script>
// 修改 input 中 value 的值
$(‘input’).val(‘你好jQuery’);
// 获取 input 中 value 的值
$(‘input’).val();
</script>

清除DOM中所有子元素 empty()

// 将 id为table_main 下的所有子元素全部清理
$(‘#table_main’).empty()

jQuery 尺寸/位置操作

jQuery 元素尺寸

语法	用法
width()/height()	取得匹配元素宽度和高度值只算width/height
innerWidth()/innerHieght()	取得匹配元素宽度和高度值包含padding
outerwidth()/outerHeight()	取得匹配元素宽度和高度值包含padding、border
outerwidth(true)/outerHeight(true)	取得匹配元素宽度和高度值包含padding、border、margin

以上参数为空，则是获取相应值，返回数字型
如果参数为数字，则是修改相应值，参数可以不必写单位

下方这个模型的基本参数如下 (您可尝试改变浏览器页面尺寸，里面宽度会得到变化)：

width: 20%;
padding: 20px;
margin: 10px;
border-size: 20px;

–

jQuery 元素位置

语法	用法
offset()	设置或获得元素基于文档上方和左边位置偏移(返回 {left+heigth}对象)
position()	获得带有定位的父级偏移坐标，若无父级以文档为主(返回 {left+heigth}对象)
scrollTop()/scrollLeft()	设置或获取元素被卷去的头部和左侧数值

.offset() 还可以传入对象方式使用成员 top,left 改变元素基于文档位置

// div 元素基于body文档向上偏移200px 向左偏移300px
$(‘div’).offset({
top:200,
left:300
});

获取页面滚动事件 scroll

// 页面滚动事件
$(window).scroll(function(){
// 获取文档被卷去部分
console.log($(document).scrollTop());
})

我们可以利用该事件将某元素在页面滚动到一定区域显示 / 隐藏

// 文档页面卷去的最大值
let maxtop = 22984;
// 页面滚动事件
$(window).scroll(function () {
// 如果文档页面卷去部分 >= 最大值
if ($(document).scrollTop() >= maxtop) {
// 类 toTop 淡入
$(‘.toTop’).fadeIn();
} else {
// 类 toTop 淡出
$(‘.toTop’).fadeOut();
}
});

页面卷去部分：– 当达到22984px后，将显示下方模型

单击模型后，会缓动到 22698px 处，使用了如下代码

$(‘.toTop’).click(function(){
// 动画执行缓动到文档被卷去 22698px 处
$(‘body,html’).stop().animate({
scrollTop:22698
});
});

jQuery 动画方式返回顶部

animate函数不能用 document 做为目标，因该使用 html 和 body元素做动画

$(‘.toTop’).click(function(){
// 动画执行缓动到文档顶部处
$(‘body,html’).stop().animate({
scrollTop:0
});
});

jQuery 电梯导航思路

当制作导航栏时候，若想实现单击栏目滚动到目标区域。首先保持栏目下标和导航栏下标的一致。单击导航栏的小项时获取自身下标，并同步获取该下标下的标题它被卷去的高度，从而使用 $(‘body html’).stop().animate({scrollTop:XX}) 移动到预想的区域

// 导航栏单击事件缓动到区域
$(‘.current’).click(function () {
// 获取单击事件的 index下标
let index = $(this).index();
// 同步获取目标标题距离文档顶部的高度
let Totop = $(‘.classBox’).eq(index).offset().top;
// 动画缓动到获取的该标题高度
$(‘body,html’).stop().animate({
scrollTop: Totop
});
})

jQuery 事件处理

单个事件注册与原生写法类似，只不过单词前面没有 on

事件	描述
change	HTML 元素改变
scroll	HTML 元素被滚动
click	鼠标点击左键后触发
mouseover	鼠标经过触发(会受事件流多次触发)
mouseenter	鼠标经过触发(只经过自身触发)
mouseout	鼠标离开触发(会受事件流多次触发)
mouseleave	鼠标离开触发(只离开自身触发)
focus	获得鼠标焦点触发
blur	失去鼠标焦点触发
mousedown	鼠标按下触发
mouseup	鼠标弹起触发
mousemove	鼠标移动触发
keyup	用户松开键盘按键
load	浏览器已完成页面的加载
input	(不兼容IE)输入框内容发生改变时立即触发

单个事件注册

单个事件注册可以使用该方式注册，

// 块元素单击事件
$(‘div’).click();
// 块元素鼠标按下事件
$(‘div’).mousedown();

.on() 事件处理

一个元素多个事件注册多个事件处理程序可以使用 on方式注册，

$(‘div’).on({
// div 鼠标经过
mouseenter:function(){},
// div 单击事件
click:function(){},
});

如果多个事件注册但是事件处理程序都为相同可采用如下写法

// 鼠标经过 + 鼠标处理程序
$(‘div’).on(‘mouseenter mouseleave’, function () {
// 为该元素切换 see 类
$(this).toggleClass(‘see’);
}
);

.on() 事件委派

on 还可以实现事件委派效果吧原来加给子元素的事件绑定到父元素身上，通过事件冒泡方式从内向外传递到绑定的父元素。父元素受到点击事件后就执行该事件处理程序

* 该方法可用于给动态创建的元素绑定事件（如: append() 给父级创建的子元素）*

// click 是绑定在 ul 身上，但是触发的对象是 ul 中的 li
$(‘ul’).on(‘click’, ‘li’, function () {
// li
console.log(this);
});

绑定父级事件，实际执行的为子元素

案例体验：评论

按钮单击后，获取文本框内容，并使用 prepend() 向前插入子元素，最后用事件委派的方式给动态创建的 a 标签添加事件绑定处理程序

.off() 解绑事件

该方法可用于元素的事件解绑解绑事件委派

// 若 off内参数为空，则默认解绑元素中绑定的所有事件处理程序
$(‘div’).off();
// 解除元素中指定事件的事件处理程序
$(‘div’).off(‘click’);

解绑事件委派

// 事件委派
$(‘div’).on(‘click’,’a’,function(){})
// 解除事件委派
$(‘div’).off(‘click’,’a’);

.one() 单次事件绑定

写法与 .on 基本一致，但该函数下绑定的事件仅会触发一次，之后自动解绑。

// 仅触发一次
$(‘dic’).one(‘click’,function(){});

.trigger() 自动触发事件

该函数会自动执行代码块内部的事件处理程序

// 立即触发单击事件
$(‘div’).click();
// 自动立即触发事件
$(‘div’).trigger(‘click’,function(){});
// 自动立即触发事件但是不会触发元素的默认行为
$(‘div’).triggerHandler(‘click’,function(){});

jQuery 表单处理

表单主要用于数据采集功能，HTML中的 <from> 标签，就是用于采集用户输入的信息，并通过 <form> 标签的提交操作。把采集到的信息提交到服务器端进行处理。

<!– 让表单同步提交方式提交数据会跳转页面且造成界面刷新丢失数据用户体验很差 –>
<form action=”目标地址”>
<input type=”text” name=”user”> // name和name的值会被记录，通过某些形式发送给目标地址
<input type=”password” name=”pass”>
<button type=”submit”>发送</button> // submit 事件会直接执行提交
</form>

.submit() 监听表单提交事件

在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件

// 事件绑定方式
$(‘#bd’).submit(function () {
alert(‘监听到了提交事件’);
});
// on 多事件绑定方式
$(‘#bd’).on(‘submit‘, function () {
alert(‘监听到了提交事件’);
});

serialize() 获取表单提交内容

在使用 e.preventDefault() 阻止默认事件后，单击 submit 按钮时将不再进行提交。这时候 ajax 接手表单接收和传送的操作

$(‘#bd’).submit(function (e) {
e.preventDefault();
// serialize可以获取表单提交的值，以 ?name=值& 的字符串格式
let str = $(this).serialize();
$.post(”, str, function (res) {
…
});
});

reset() 【原生】重置表单初始化

该函数可将表单所填内容初始化，因为该方法为 js原生，因此如若使用它来清除表单内容，需要转换成 DOM对象

// jQuery对象转为原生HTML对象并使用 reset 函数方法
$(‘formAddCmt’)[0].reset();

jQuery 对象拷贝

extend() 对象拷贝

$.extend([deep],target,object1,[object …]);

deep: 可选，如果设置为 true 为深拷贝，默认 false 为浅拷贝
target: 要拷贝到的目标对象，接收方
object: 待拷贝到第一个对象的对象，可设置多个

$.extend 的拷贝会将拷贝目标覆盖接收对象的重名成员的值

let targentObj={
id:0
};
let obj={
id:1,
name:’smm’
}
// 浅拷贝对象 obj 到对象 targentObj
$.extend(targentObj,obj);

浅拷贝与深拷贝区别

浅拷贝

浅拷贝只是把拷贝对象的复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。若同名成员中同时都存在复杂类型的值，将会直接替换原对象成员的复杂类型的引用下标

深拷贝

前面加true后为深拷贝，是完全克隆下标的对象 (而不是地址)，修改原对象的复杂类型的值不会影响另一个对象里复杂对象的值，将对象的键值对叠加到目标对象，若同名成员中有冲突的属性会进行覆盖

jQuery 多库共存

jQuery 使用 $ 作为标识符，随着 jQuery 的流行，其他js库也会使用 $ 作为标识符，这样存在命名冲突。因此，jQuery 采用了两种方式解决 $ 标识符冲突。

1.替换法 $ 可以用 jQuery 替换

// 两者效果一样
jQuery(‘div’);
$(‘div’);

2.改变法可用 noConflict() 函数来改变 jQuery默认的 $ 标识符

// 替换 jQuery 标识符为 F
let F =jQuery.noConflict();
// 将默认的 $ 改为 F
F(‘div’);

jQuery 插件

jQuery 功能有限，想要更复杂的特效效果，可以借助 jQuery插件完成。* 插件基于jQuery，必须先引入 jQuery 文件，因此也成为 jQuery 插件 *

jQuery 常用网址

jQuery插件库 jQuery之家 (推荐)

图片样式效果展示：瀑布流样式
懒加载效果展示：品优购-分类栏
全屏滚动效果展示：动漫背景图

jQuery 本地存储

localStorage.setItem() 存入数据

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题 (cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。该函数仅支持存储字符串，因此若需要存储对象格式需要搭配 JSON.stringify() 转换格式使用

JSON.stringify() 可传入三个参数，分别依次可传入为 要字符串化的对象或者数组(必填)、以数组方式指定key内容(可选)、填充空白区域的字符串[格式化](可选)

// 进行本地存储本地存储里面只能存储字符串的数据格式，把数组对象转换成字符串格式存到 todo
localStorage.setItem(‘todo’, JSON.stringify(todoList));

localStorage.getItem() 获取数据

获取本地存储获取的数据为 string 格式，因此需要 JSON.parse() 字符串数据转换成对象格式

// 获取本地存储的 todo 下标下的数据并转换成数组格式赋值给变量 data
let data = JSON.parse(localStorage.getItem(‘todo’));

无名喵站

那么问题来了

【JS进阶知识点】2

使用 Google 的 CDN

使用 Microsoft 的 CDN