移动端JS特效
触屏
触屏事件概述
touch代表一个触控点。也就是我们的手指,或者是触控笔。触控事件可以响应用户的触摸操作。
触控事件
触控事件 | 说明 |
---|---|
touchstart | 手指摸到一个DOM元素时,触发。 |
touchmove | 手指在一个DOM元素上滑动时,触发。 |
touchend | 手指从一个DOM元素上移开时,触发。 |
常用形式
元素.addEventListener('touchstart',处理函数);
元素.addEventListener('touchmove',处理函数);
元素.addEventListener('touchend',处理函数);
触控事件对象
触控事件对象,一个伪数组,它包含了许多触控相关系列的信息。touchEvent
触控列表 | 说明 |
---|---|
touches | 正在触摸手指的列表。 |
targetTouches | 正在触摸DOM元素上的手指列表。 |
changedTouches | 手指状态发生改变的列表,从有到无,从无到有。 |
常用形式
元素.addEventListener('touches',处理函数);
元素.addEventListener('targetTouches',处理函数);
元素.addEventListener('changedTouches',处理函数);
过渡事件
在我们需要制作动画时,添加了过渡动画。部分功能需要在过渡动画之后发生,那么就可以使用 transitionend
事件。
名称 | 说明 |
---|---|
transitionend | 过渡动画结束时,触发。 |
常用形式
元素.addEventListener('transitionend',处理函数);
classList类名列表
classList是HTML5新增属性,伪数组形式存储元素的类名信息。IE10以上支持
该属性拥有添加、修改、删除类名的方法。
名称 | 说明 |
---|---|
classList.add() | 添加类名 |
classList.remove() | 删除类名 |
classList.toggle() | 切换类名 |
常用形式
元素.classList.add('类名')//不加.
元素.classList.remove('类名')
元素.classList.toggle('类名')
click点击延时
在移动端,由于双击会缩放页面,所以click点击事件存在300ms的延时,用于区分两者。
解决方案:
- 禁止窗口缩放【直接在html标签中添加】
<meta name="viewport" content="user-scalable=no">
- 通过touch事件封装一个函数解决
- 使用插件。fastclick
插件
解决。
常用函数
插件和框架
什么事插件?
插件就是一个JS文件,他有一定的书写规范,方便展示效果,拥有特定功能且方便调用。如轮播图和瀑布插件。
插件的使用流程:
- 引入插件的JS文件,如果有CSS文件也需要引入。
- 插入插件提供的网页骨架。
- 根据需求微调。
Swiper
开源、免费、强大的触摸滑动插件。-主要使用在滑动图片,焦点图。
SuperSilder
SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等等。
Bootstrap框架
本地存储
为什么需要本地存储呢?
答:因为互联网高速发展,数据量不断增大。很多数据不需要频繁向数据库读写,在本地存储起来,提高网页效率和降低资源损耗。
window.sessionStorage
- 生命周期为关闭浏览器窗口。
- 在同一窗口(页面)下数据可以共享。
- 以
键值对
的方式存储数据。
名称 | 说明 |
---|---|
sessionStorage.setItem(键,值) | 存储键值对 |
sessionStorage.getItem(键) | 获取值 |
sessionStorage.removeItem(键) | 删除键值对 |
sessionStorage.clear() | 清除所有键值对 |
常用形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
padding: 10px;
text-align: left;
}
input {
height: 22px;
}
button {
padding: 2px;
margin: 0 5px;
outline: none;
border: 1px solid #000;
background-color: #fff;
font-size: 16px;
vertical-align: middle;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box"><input type="text"><button class="set">写入数据</button><button class="get">读取数据</button><button class="remove">删除数据</button><button class="det">清空所有数据</button></div>
<script>
// 获取元素
var input = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.det');
set.addEventListener('click', function() {
var value = input.value; //获取输入框的值
sessionStorage.setItem('uname', value); //本地储存
});
get.addEventListener('click', function() {
var value = sessionStorage.getItem('uname'); //获取值
console.log(value);
});
remove.addEventListener('click', function() {
sessionStorage.removeItem('uname'); //删除值
});
del.addEventListener('click', function() {
sessionStorage.clear(); //清除所有值
});
</script>
</body>
</html>
window.localStorage
使用方法与 sessionStorage
相同。
- 生命周期为永久。
- 在统一窗口(页面)下数据可以共享。
- 以
键值对
的方式存储数据。
名称 | 说明 |
---|---|
localStorage.setItem(键,值) | 存储键值对 |
localStorage.getItem(键) | 获取值 |
localStorage.removeItem(键) | 删除键值对 |
localStorage.clear() | 清除所有键值对 |
JSON.stringify(数组对象);//将数组对象转换为JSON字符串,这样就解决了数组无法直接存储到本地存储中使用。
JSON.parse(字符串对象);//将字符串转换为数组。
事件
change
在元素发生改变时,触发。如:复选框的变化。
元素.addEventListener('change',处理函数);
jQuery
JavaScirpt库
JavaScirpt库:是一个封装好的特定的集合。简单理解:就是一个JS文件,里面对我们 原生JS代码
进行封装,存放在一起。这样可以有效提高我们的开发效率。
jQuery概述
jQuery是一个快速、简洁的JavaScript库。其设计的宗旨就是“Wirte less,Do More”,即提倡写更少的代码,做更多的事情。
JavaScript Query:JavaScript 查询,主要针对DOM元素的操作。
优点
- 轻量级。核心文件几十KB,不影响页面的加载。
- 跨浏览器兼容,兼容主流游览器。
- 链式编程、隐式迭代方便使用。
- 对事件、样式、动画支持,大大优化DOM操作。
- 支持扩展插件开发,有着丰富的第三方插件。
- 免费、开源。
入口函数
方法一:
$(document).ready(处理函数);
$(document).ready(function() {
});
方法二:
$(处理函数);
$(function() {
});
方法一和方法二效果等同,都是等待页面DOM元素加载完毕执行。
顶级对象
-
是
j
Q
u
e
r
y
的
别
称
,
是jQuery的别称,
是jQuery的别称,同时也是jQuery的顶级对象。当然$也可以使用
jQuery
代替 。
$(处理函数); == jQuery(处理函数);
-
是 j Q u e r y 的 顶 级 对 象 , 相 当 于 原 生 J S 中 的 w i n d o w 对 象 。 把 元 素 利 用 是jQuery的顶级对象,相当于原生JS中的window对象。把元素利用 是jQuery的顶级对象,相当于原生JS中的window对象。把元素利用包装成jQuery对象,就可以直接调用jQuery的属性和函数。
-
如何区分jQuery对象和DOM对象?
答:查看获取的方式,DOM对象是通过原生JS获取的。而jQuery对象是通过jQuery获取的。
- jQuery对象的本质就是通过$包装DOM对象后产生的对象,以伪数组的形式呈现。
$和DOM之间互相转换
// DOM -> jQuery
var 变量 = document.querySelector('标签'); //获取DOM对象
$(变量); //通过$包装为jQuery对象
// jQuery -> DOM
$(video)[索引];//因为它本身就是一个伪数组
$(video).get(索引);//内置方法
jQuery选择器
$('选择器');//使用方法和CSS一样
隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程我们就叫隐式迭代。
jQuery筛选器
当父盒子有多个同标签的子盒子时,在父盒子选择想要的子盒子。
语法 | 用法 | 描述 |
---|---|---|
:first | $(‘标签:first’) | 获取第一个元素 |
:last | $(‘标签:last’) | 获取最后一个元素 |
:eq(index) | $(‘标签:eq(index)’) | 获取 标签 中指定索引的元素 |
:odd | $(‘标签:odd’) | 获取 标签 中奇数的元素 |
:even | $(‘标签:even’) | 获取 标签 中偶数的元素 |
父、子、兄筛选
语法 | 用法 | 说明 |
---|---|---|
parent() | $(‘选择器’).parent() | 获取亲父亲元素 |
parents(‘选择器’) | $(‘选择器’).parents(‘选择器’) | 获取祖先元素 |
children(‘选择器’) | $(‘选择器’).children(‘选择器’) | 效果类似子代选择器,只选择儿子 |
find(‘选择器’) | $(‘选择器’).find(‘选择器’) | 效果类似后代选择器,即选择儿子,也选择孙子 |
siblings(‘选择器’) | $(‘选择器’).siblings(‘选择器’) | 选择亲兄弟元素,除自身 |
nextAll(‘选择器’) | $(‘选择器’).nextAll(‘选择器’) | 选择自身之后亲兄弟元素,除自身 |
prevtAll(‘选择器’) | $(‘选择器’).nextAll(‘选择器’) | 选择自身之前亲兄弟元素,除自身 |
eq(索引) | $(‘选择器’).eq(索引) | 选择指定索引的元素 |
hasClass(‘类名’) | $(‘选择器’).hasClass(‘类名’) | 判断是否有指定类名 |
事件对象-this
$(this)//当前对象,this不用引号。
常用函数
$对象.index();//获取当前元素的索引值,是父亲的第几个儿子。
$('checked复选框:checked');//选择被选择了的复选框。
jQuery鼠标事件
语法 | 用法 | 描述 |
---|---|---|
mouseenter(处理函数) | $对象.mouseenter(处理函数); | 当鼠标进入$对象时触发【不冒泡】 |
mouseleave(处理函数) | $对象.mouseleave(处理函数); | 当鼠标退出$对象时触发【不冒泡】 |
mousemove(处理函数) | $对象.mousemove(处理函数); | 当鼠标移动$对象时触发 |
mouseover(处理函数) | $对象.mouseover(处理函数); | 当鼠标悬停$对象时触发 |
mouseout(处理函数) | $对象.mouseout(处理函数); | 当鼠标离开$对象时触发 |
mousedown(处理函数) | $对象.mousedown(处理函数); | 当鼠标按下$对象时触发 |
mouseup(处理函数) | $对象.mouseup(处理函数); | 当鼠标弹起$对象时触发 |
hover切换
hover([over],out);
hover([鼠标经过处理函数],离开处理函数);
jQuery样式
- 获取CSS属性
var 变量 = $对象.css('属性名');//没有赋值就是获取,获取的是带单位字符串
- 修改CSS属性
$对象.css('属性名','属性值');//属性值带单位,不过如果属性值为数值型,那么可以不加单位
注意事项:如果我们是以对象的形式修改CSS属性,可以不用带单位,数值型不带引号。
$对象.css({
height:400,
width:400
});
操作类名
语法 | 用法 | 描述 |
---|---|---|
addClass() | $对象.addClass(‘类名’); | 添加类名 |
removeClass() | $对象.removeClass(‘类名’); | 删除类名 |
toggleClass() | $对象.toggleClass(‘类名’); | 切换类名 |
jQuery特效
基本
显示
show([speed定义速度],[easing运动轨迹],[fn回调函数]);
speed定义速度:有三种预定义(slow、normal、fast)或者表示动画时长的毫秒数值。
easing运动轨迹:指切换运动曲线,默认是:swing(摇摆),可以为linear匀速。
fn回调函数:回调函数。
隐藏
hide([speed定义速度],[easing运动轨迹],[fn回调函数]);
speed定义速度:有三种预定义(slow、normal、fast)或者表示动画时长的毫秒数值。
easing运动轨迹:指切换运动曲线,默认是:swing(摇摆),可以为linear匀速。
fn回调函数:回调函数。
切换
toggle([speed定义速度],[easing运动轨迹],[fn回调函数]);
speed定义速度:有三种预定义(slow、normal、fast)或者表示动画时长的毫秒数值。
easing运动轨迹:指切换运动曲线,默认是:swing(摇摆),可以为linear匀速。
fn回调函数:回调函数。
滑动
下拉
slideDown([speed定义速度],[easing运动轨迹],[fn回调函数]);
speed定义速度:有三种预定义(slow、normal、fast)或者表示动画时长的毫秒数值。
easing运动轨迹:指切换运动曲线,默认是:swing(摇摆),可以为linear匀速。
fn回调函数:回调函数。
上拉
slideUp([speed定义速度],[easing运动轨迹],[fn回调函数]);
speed定义速度:有三种预定义(slow、normal、fast)或者表示动画时长的毫秒数值。
easing运动轨迹:指切换运动曲线,默认是:swing(摇摆),可以为linear匀速。
fn回调函数:回调函数。
切换
slideToggle([speed定义速度],[easing运动轨迹],[fn回调函数]);
speed定义速度:有三种预定义(slow、normal、fast)或者表示动画时长的毫秒数值。
easing运动轨迹:指切换运动曲线,默认是:swing(摇摆),可以为linear匀速。
fn回调函数:回调函数。
动画队列
动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就会造成多个排队显示的情况。
停止排队
stop()//用于停止动画或者效果,写入动画之前。
淡入淡出
淡出
fadeIn([speed定义速度],[easing运动轨迹],[fn回调函数]);
speed定义速度:有三种预定义(slow、normal、fast)或者表示动画时长的毫秒数值。
easing运动轨迹:指切换运动曲线,默认是:swing(摇摆),可以为linear匀速。
fn回调函数:回调函数。
淡出
fadeOut([speed定义速度],[easing运动轨迹],[fn回调函数]);
speed定义速度:有三种预定义(slow、normal、fast)或者表示动画时长的毫秒数值。
easing运动轨迹:指切换运动曲线,默认是:swing(摇摆),可以为linear匀速。
fn回调函数:回调函数。
指定透明度
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeTo([speed定义速度],opacity透明度,[easing运动轨迹],[fn回调函数]);
speed定义速度:有三种预定义(slow、normal、fast)或者表示动画时长的毫秒数值。(必选)
opacity透明度:取值范围0-1。(必选)
easing运动轨迹:指切换运动曲线,默认是:swing(摇摆),可以为linear匀速。
fn回调函数:回调函数。
切换
fadeToggle([speed定义速度],[easing运动轨迹],[fn回调函数]);
speed定义速度:有三种预定义(slow、normal、fast)或者表示动画时长的毫秒数值。
easing运动轨迹:指切换运动曲线,默认是:swing(摇摆),可以为linear匀速。
fn回调函数:回调函数。
自定义动画
animate(params,[speed定义速度],[easing运动轨迹],[fn回调函数]);
params:想要修改的样式属性,以对象的形式传递,必选,属性名可以不用带引号,如果采用复合属性则采取驼峰命名法。
可以是盒子宽度,top,left等等。
speed定义速度:有三种预定义(slow、normal、fast)或者表示动画时长的毫秒数值。
easing运动轨迹:指切换运动曲线,默认是:swing(摇摆),可以为linear匀速。
fn回调函数:回调函数。
返回顶部
$('html,body').animate({//因为animate是针对元素操作的,所以不能直接使用window,或者document。需要用html、或者body代替。
scrollTop: 0//被“卷去”的顶部高度
}, 'normal', 'swing');
jQuery属性操作
固有属性
var 变量 = $对象.prop('属性');//获取元素的属性值
$对象.prop('属性','属性值')//属性赋值,数值型不用引号。
自定义属性
var 变量 = $对象.attr('属性');//获取元素的属性值[Attribute]
$对象.attr('属性','属性值')//属性赋值,数值型不用引号。
数据缓存
data数据缓存:数据绑定在元素上,它并不会改变DOM结构。
$对象.data('属性','属性值');//赋值
var 变量 = $对象.data('属性');//获取,能获取H5自定义属性(不用谢data开头),返回值为数值型。
jQuery元素内容
一、获取元素内容
var 变量 = $对象.html();//获取内容,等效innerHTML[也获取标签]
$对象.html('内容');//赋值
var 变量 = $对象.text();//获取内容,等效innerText[不区分标签]
$对象.text('内容');//赋值
二、获取表单元素内容
var 变量 = $对象.val();//获取内容,等效value
$对象.val('内容');//赋值
jQuery常用函数
数值型对象.toFixed(位数);//保留指定位数小数。
jQuery元素操作
遍历元素
jQuery隐式迭代是对相同类型的进入,如果我们想对不同类型进行迭代?
答:遍历元素即可。
$对象.each(回调函数);
$对象.each(function(index【索引】,domElement【DOM元素】) {
});
名词解析:
index【索引】:每个元素的索引号。
domElement【DOM元素】:DOM元素对象,如果需要使用jQuery属性和函数,那么需要转换成$对象。
$.each(数组、对象或者$对象,回调函数);
$.each(数组、对象或者$对象,function(index【索引】,domElement【DOM元素】) {
});
名词解析:
数组、对象或者$对象:它需要遍历的对象,可以是数组、也可以是$对象。
index【索引】:每个元素的索引号。
domElement【DOM元素】:DOM元素对象,如果需要使用jQuery属性和函数,那么需要转换成$对象。
$.each()与
for (变量名 in 对象) {
var 变量 = 变量名;//属性名
var 变量 = 对象[变量名];//属性值
}
相似。
创建元素
var 变量 = $('标签');
比如:var li = $('<li>创建一个li标签</li>');
放置元素
(一)内部放置
$对象.append(创建的元素);//放置在原本内容的最后面,与childAppend()相似。
比如:element.append(li);
$对象.prepend(创建的元素);//放置在原本内容的最前面。
比如:element.prepend(li);
(二)外部放置
$对象.afert(创建的元素);//放置在目标元素的之后
$对象.before(创建的元素);//放置在目标元素的之前
删除元素
$对象.remove();//删除当前元素
$对象.empty();//删除当前元素的所有子节点
$对象.html('');//清空当前元素的内容
jQuery事件
事件注册【事件绑定】
jQuery注册事件大多数与原生保持一样,如:click、鼠标事件【mouseenter、mouseleave、mousemove、mousedown、mouseup等等…】、键盘事件【keyup、keydown、keypress】。
单个事件注册
$对象.事件(处理函数);
如:element.click(function() {
处理过程;
});
on事件
$对象.on(事件1,事件2,事件3...选择器,回调函数);
如:
格式一:已对象的形式,注册事件,同时注册多事件
element.on({
click:function() {
处理过程;
},
mousemove:function() {
处理过程;
}
});
格式一:以字符串的形式注册事件,同时注册多事件,同处理过程。
element.on('click mousemove',function() {
})
名词解:
选择器:指$对象的子元素选择器。
事件委托
将事件绑定在父级上,通过冒泡的原理触发父级绑定的事件。这就是事件委托。
$对象.on(事件,子元素,回调函数);
$('ul').on('click','li',function() {
处理过程;
})
on事件优点
- 同时可注册绑定多事件。
- 可进行事件委托。
- 可绑定动态生成的元素。-仅限事件委托
事件删除【事件解绑】
$对象.off();//没有传参时,为解绑所有事件。需要解绑某个事件,那么就传入事件的字符串即可。
$对象.off('事件');
$对象.off('子级','事件');//解绑事件委托
one事件
$对象.one(事件,处理函数);//只触发一次,用法与on()相似。
自动调用事件
一、手动调用
$对象.事件();
element.click();
二、trigger()
$对象.trigger('事件');
三、
$对象.triggerHandler('事件');//不会触发元素的默认行为
事件对象
$对象.click(function(事件对象) {
处理过程;
});
$对象.on({
click:function(事件对象) {
处理过程;
},
mousemove:function(事件对象) {
处理过程;
}
});
$对象.on('click mousemove',function(事件对象) {
})
使用方式:与原生保持一致。
jQuery复制对象
extend(deep深浅复制,target目标对象,objects待复制对象列表);//即可以复制节点,也可以是数组,或者对象。
名词解释:
deep深浅复制:
节点时:true为深复制【深拷贝】即复制标签也复制内容。false为浅复制【浅拷贝】。
对象时:浅复制【浅拷贝】只是把“复杂数据类型”的内存地址赋值给目标对象,深复制【深拷贝】是将整个复制,开辟新的内存存储数据。
target目标对象:复制对象
objects待复制对象列表:复制源,多个时使用','分隔。
多库共存
问题:当我们使用了很多插件、框架或者自定义 【 同 名 】 方 法 时 , 会 与 j Q u e r y 的 【同名】方法时,会与jQuery的 【同名】方法时,会与jQuery的冲突?
答:此时多库共存就很有必要。
jQuery的解决方案:
-
使用jQuery()
-
var 变量 = . n o C o n f l i c t ( ) ; 释 放 掉 .noConflict();释放掉 .noConflict();释放掉的控制。
jQuery插件
基于jQuery框架开发的插件。
网页推荐
jQuery之家-自由分享jQuery、html5、css3的插件库 (htmleaf.com)
jQuery插件库-收集最全最新最好的jQuery插件 (jq22.com)
图片懒加载
值加载用户看的到的图片。
jQuery尺寸
语法 | 说明 |
---|---|
width()/height() | 获取元素的宽度和高度,只有width、height。 |
innerWidth()/innerHeight() | 获取元素的宽度和高度,包含padding【content + padding】 |
outerWidth()/outerHeight() | 获取元素的宽度和高度,包含padding、border【content + padding + border】 |
outerWidth(true)/outerHeight(true) | 获取元素的宽度和高度,包含padding、border、margin【content + padding + border + margin】 |
注意:
- 以上参数为空,则获取对应值【返回值为数值型】。
- 需要复制,直接给单位即可【不需要单位】。
jQuery位置
offset系列
获取偏移量。
$对象.offset();
//返回值是一个对象,它包含top left。这些值是以文档【窗口】为基础得到的,与上级带定位父级无关。和原生不用。
$对象.offset().top;//top值
$对象.offset().left;//left值
$对象.offset({
top:值,
left:值
});//赋值
position系列
$对象.position();
//返回值是一个对象,它包含top left。这些值是以“定位的父级”为基础得到的,没有父级带定位时,以文档为基础
$对象.position().top;//top值
$对象.position().left;//left值
//不能赋值
scrollTop()/scrollLeft()系列
$对象.scrollTop();//返回被“卷去”头部的高度。
$对象.scrollLeft();//返回被“卷去”左部的宽度。
//赋值
$对象.scrollTop(值);//直接传参
$对象.scrollLeft(值);//直接传参
ES6
链式编程
对同对象进行多次操作,用“.”分隔调用函数。
$('div').on('click',function() {
$(this).css('color',red).siblings('div').css('color','');//自己变红色,其他不变。链式编程
});
注意:注意编程“基对象”是否始终未变。注意到底是在操作的是谁?
面向对象编程
面向对象编程:找到对象,创建对象,使用对象。
在JavaScript中对象是一组无序的相关属性和方法的集合,所有事物都是对象。
对象中的属性和方法:
属性:事物的特征,在对象中用属性来表示。
方法:事物的行为,在对象中用方法来表示。
class类
类泛指了对象的公共部分,它泛指某类。–【模板】
对象则是特指某个,是通过类实例化得来的。–【产品】
constructor构造器
用于获取传参,初始化类。
class person {
constructor(uname,age) {//构造方法
this.uname = uname;
this.age = age;
}
sing() {//方法
}
}
注意事项:
- 类名遵循驼峰式。
- 如果类中没有constructor构造方法,那么js引擎就会自动添加一个。有就不添加。【保证必须有一个】
- 方法不需要function关键字申明。
- 方法之间不需要逗号分隔。
继承
子类
继承 父类
的属性和方法。
class 子类 extends 父类 {
}
super关键字
使用super关键字可以 constructor
调用父类的构造方法或者普通方法。
class 子类 extends 父类 {
constructor(参数){
super(参数);//调用父类的constructor构造方法。
}
方法名() {
super.方法名();//调用父类方法
}
}
注意事项:
使用super关键字调用父类构造方法,必须在给子类this之前。这是一种规定。
就近原则
当 子类
和 父类
有相同的方法,就近原则使用 子类
中的,如果子类没有再去 父类
中调用。
ES6没有变量提升
变量提升:就是提前将 script
标签中所有的变量和函数都提前加载进入内存。好处就是函数代码可以在函数调用代码下面。
ES6没有变量提升,所有类的代码必须在实例化之前。类中的共有的属性和方法一定要加 this
使用。
this指向
constructor构造函数中this指向它本身,方法中的this则指向调用者。
元素操作
插入元素
元素.insertAdjacentHTML(插入位置,字符串);//可以将字符串格式的元素放置到父级元素中。
名词解析:
插入位置:
beforebegin 元素自身之前。
afterbegin 插入元素内部第一个节点之前。
beforeend 插入元素内容最后一个节点之后。
afterend 元素自身之后。
删除元素
document对象.remove();//删除当前元素
事件
双击事件
document对象.dblclick() = ;//双击事件
document对象.dblclick() = 处理函数;//绑定事件
document对象.addEventListener('dblclick',处理函数);//绑定事件
window.getSelection ? window.getselectionr().removeAllRanges() : document.Selection.empty(); //阻止双击选择文字
选定状态
表单对象.select();//是表单内处于全部选择状态
拷贝对象
assign(目标对象,被拷贝对象);//浅拷贝,拷贝复杂对象时,只拷贝内存地址。
let
let关键字,声明一个块级作用域的变量。
在大括号中,let声明的变量才具备块级作用域,var是不具备这个特点的。
块级作用域:在大括号范围内可访问,超出不可访问。
if(true) {
let 变量名 = 变量值;
}
特点:
1.大括号外不可访问变量,如:循环结束,其中的计数器不必使用。所以此时使用let声明变量就不会出现这种情况。
2.let关键字声明的变量眉头变量提升。
3.暂时性死区:使用let关键字声明的变量,会和函数(方法)整体绑定。不会收到外部的影响。
注意:
1.在函数(方法)中使用let声明变量之前就使用会报错。因为let关键字声明的变量会和函数(方法)整体绑定,即使函数(方法)外部有同名变量,也不会调用。
const
const关键字用于声明常量。
常量:一旦声明,终身不变。(声明之后内存地址固定,不可更改,变量值亦是如此)
使用const关键字声明的变量,拥有块级作用域。
const声明的变量必须给初始值。
解构赋值
ES6中允许从数组中提取赋值,按照对应位置,对变量赋值。对象也可以实现解构赋值。
数组
let arr = [1,2,3];
let [a,b,c] = arr;
//等效
let a = 1;
let b = 2;
let c = 3;
对象
let person = {name:'张三',age:18};
let {name,age} = person;
//等效
let person = {name:'张三',age:18};
let name = person.name;
let age = person.age;
匹配
let person = {name:'张三',age:18};
let {name:myName,age:myAge} = person;//使用变量名name和age在person中匹配,匹配成功后分别给变量Name和yAge。(在解构语法中name:myName中的name只是用来匹配 赋值符 右侧对象中的属性。)
结论:
这就是解构赋值,一一对应进行赋值。如果数组(对象)中没有对应值,那么变量的值就为undefined。
箭头函数
(参数列表) => {
函数体;
}
let fn = (参数列表) =>{
函数体;
//1.当函数体只有一行代码时,可以省略大括号。执行的结果就是返回值。
//2.当形参只有一个时,小括号也可以省略。
}
注意:
箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this(定义位置上下作用域的this)。
剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
fn sum(name,age,...arr) {//函数参数列表使用剩余参数
}
let arr = ['张三','李四','王五'];
let [s1,...s2] = arr;
Array的扩展方法
扩展运算符(展开语法)
扩展运算符可以将数组或者对象转化为逗号分隔的参数列表。
let arr = [1,2,3];
...arrr;//...拆分符号,拆分数组中的元素。
案例
合并数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
将伪数组转换为真数组
let divs = document.querySelectorAll('div');//获取元素对象,返回值伪数组
let newDivs = [...divs];//将伪数组转换为真正的数组,这样就可以调用Array中的函数(方法)。
Array.form
构造函数:Array.from(),可以将伪数组转换真正的数组。
Array.from(伪数组,处理函数);
名词解析:
处理函数:用来处理每个元素,将处理过的元素放入数组。(类似于map方法)
var arrayList = [
'0':'张三',
'1':'李四',
'2':'王五',
length:3
];
var ary = Array.from(arrayList);
Array对象.find
Array.find()返回满足条件的第一个元素。
Array.findIndex()返回满足条件的第一个元素的索引。
Array对象.find(处理函数);
Array对象.find(function(值value,索引index) {
});
var(let) 变量名 = Array对象.findIndex(处理函数)
var(let) 变量名 = Array对象.findIndex(function(值value,索引index) {
})
Array对象.includes
Array.includes()表示某个驻足是否包含指定的值,返回值为布尔值。
var(let) 变量名 = Array对象.includes(值);//于之前的indexof()方法效果一致,不过更加易懂(见名知义)。
String的扩展方法
模板字符串
模板字符串用于定义字符串,模板字符串可以解析变量。
var(let) 变量名 = `字符串内容`;
var(let) 变量名 = `字符串值${变量对象}`;//${}将大括号中的内容解析至字符串,不用再使用加号拼接了。
特点:
1.${}拼接字符串。
2.支持解析html标签,可换行。
3.调用函数,显示的是函数返回值。
startWith和endWith
startWith():表示参数字符串是否在原函数字符的头部,返回布尔值。
endWith():表示参数字符串是否在原函数字符的尾部,返回布尔值。
repeat
repeat()方法表示将原字符串重复n次,以新字符串返回。
Set数据结构
set数据结构与数组相似,都是用于存储数据的。不同的是set数据结构不允许出现相同的数据。数据唯一。
创建Set数据结构
var(let) 变量名 = new Set(初始值);
名词解析:
初始值:是构造函数,将元素以参数的形式存储。
注意:
如果构造函数和添加元素出现重复元素,忽略不存储。只添加一个。
Set属性
Set对象.size;//返回Set数据结构的长度,与数组中的length属性相同。
实例方法
add(值value):添加指定元素值,返回Set结构本身。
delete(值value):删除指定元素值,返回布尔值,成功true,不成功即false。
has(值value):返回一个布尔值,表示指定元素值是否为Set成员。
clear():清除所有成员,没有返回值。
注意:
Set数据结构也可以使用foreach()等方法。
ES5
对象
创建对象【构造函数】
1.通过 new Object() 创建
var 对象名 = new Object();
2.通过字面量创建对象
var 对象名 = {};
3.通过构造函数创建对象
function 对象名(参数列表) {//创建构造函数
this.参数名 = 参数名
this.方法名【函数名】 = function() {
}
}
var 对象名 = new 对象名(参数列表);
注意事项:
1.构造函数名首字母需要大写,遵循驼峰式命名。
2.构造函数需要配合new关键字使用。
成员
ES6成员:函数中的属性和方法都是一个成员,成员可以添加。
成员分为:静态成员、实例成员。
静态成员
静态成员:构造函数本身上添加的成员,不能通过实例化对象来访问。通过构造函数直接访问即可。
实例成员
实例成员:是函数通过this创建的成员就是实例成员。实例成员只能通过new对象访问使用。
构造函数的缺陷
构造方法大量实例化对象时,存在内存浪费的问题。构造函数中的所有复杂数据类型需要反复开辟内存空间。
构造函数原型prototype
构造函数通过原型分配的函数是所有对象共享的。
JavaScript中规定,每个构造函数中都必须有一个prototype属性,指向另一个对象。注意:这个prototype就是一个对象,这个对象的所有属性和方法,都被构造函数所共享。
当我们不想相同的方法被反复开辟内存空间,此时就可以把需要共享的属性和方法存放到prototype原型对象上。
语法:
构造函数名.prototype.方法名 = function(参数列表){};
调用与之前一致。
实例化对象.方法名(参数列表);
对象原型_ _ proto _ _
实例化对象.__proto__//双下划线proto双下划线,js引擎会自动给所有实例化对象添加__proto__属性,该属性指向了构造函数原型prototype对象。__proto__属性是非标准的,无法直接进行赋值操作。
注意事项:
实例化对象的_ _ proto _ _属性和构造函数原型prototype是相等的。
方法的查找方式:
首先在对象身上找,找到则调用。因为有_ _ proto _ _属性在,则去构造函数原型prototype上找,找到就执行。
constructor构造函数
在构造函数的原型prototype和实例化对象的_ _ proto _ _属性中,都有constructor构造函数,它指向构造函数本身。
构造函数对象.prototype = {
constructor:构造函数对象,//利用constructor构造函数指回构造函数对象本身。这样的好处是:可以通过对象的方式添加共享属性、方法,结构清晰。【不需要再通过 “构造函数原型prototype.方法名” 的方法添加共享方法】
方法名:function(参数列表) {}
}
构造函数、构造函数原型、实例化对象之间关系图
注意事项:
- 只要是对象就有_ _ proto _ _原型,指向原型对象
- 构造函数的prototype
成员查找方式
(1)首先查找对象自身是否有该成员。
(2)对象自身没找到,再去对象原型上找。
(3)对象原型上也没找到,那么就去Object原型上找。
this指向
在构造函数中,里面this指向的是实例化对象。
原型对象中的this,也是指向实例化对象。
总结:
- this指向没调用不知道。
- this总是指向它的调用者。
call()
作用:调用这个函数可以修改运行时this的指向。【也可以调用函数】
函数对象.call(当前调用函数this的指向对象,参数列表);
名词解析:
当前调用函数this的指向对象,修改该属性可以改变this的指向。
参数列表:与function(参数列表)功能相似,都是用于传递参数提供方法使用。
组合继承
由于ES5没有继承,所有我们是通过构造函数和原型对象模拟实现的,这种形式被称为组合继承。
继承属性
原理在字构造函数中通过父构造函数.call(this),调用父构造函数并修改其中this指向。
继承方法
Evar 子构造函数对象.prototype.constructor = = new 父构造函数对象;
子构造函数对象.prototype.constructor = 子构造函数;//指回子构造函数,在继承父构造函数的方法时,保留原来原型中的方法。
//实例化父构造函数,创建独立于父构造函数对象.prototype的空间,将父构造函数赋值给子构造函数对象.prototype使用,达到继承效果。
ES5新增方法
数组(遍历)
迭代(遍历)方法:forEach()、map()、filter()、some()、every()等等。
1.forEach()
数组对象.forEach(function(当前值value,当前索引index,数组本身array){
});
2.filter():创建一个新数组,存放通过筛选【需要指定筛选条件】的元素。返回值:数组。
var 变量名 = 数组对象.filter(function(当前值value,当前索引index,数组本身array){
return 返回筛选元素;//如:return value > 20;【筛选条件 元素值大于20】
});
3.some():查找数组中满足要求的元素,满足返回true,不满足返回false。返回值:不是数组,是一个布尔值
var 变量名 = 数组对象.some(function(当前值value,当前索引index,数组本身array){
return 返回筛选元素;//如:return value > 20;【筛选条件 元素值大于20】
});
注意:它查找到第一个就满足,那么它就不会继续查找下去。
注意事项:
forEach和some的区别:forEach遇到return true不会停止,而some会立即停止。效率高。
字符串
var str = 字符串对象.trim();//去除字符串两端的空格,返回一个新字符串。
对象属性
添加属性
1.对象.属性 = 属性值;//添加或者修改属性。
2.Object.keys();
var arr = Object.keys(对象);//获取对象自身所有的属性,类似于for in。返回值由属性名组成的数组。
Object.defineProperty(对象obj,属性名prop,描述【目标的特性】descriptor{});//新增或修改对象属性。
名词解析:
描述【目标的特性】descriptor{}:对象形式传参
1.value:设置属性的值。默认undefined。
2.writable:值是否可重写。true|false,默认false。
3.enumerable:属性是否可被枚举,true|false,默认false。【可否被遍历】
4.configurable:属性目标是否可以被删除或者被再次修改的特性,true|false,默认false。
delete 对象.属性;//删除目标对象指定属性。
删除属性
delete 对象.属性;//删除目标对象指定属性。
严格模式
介绍
ES5提供了严格模式,采取语法更加严谨的具体限制。
优点
- 消除JavaScript中的语法中不谨慎,不合理,有歧义的。
- 消除代买一部分安全性。
- 提高编译效率。
- 禁止了ECMAScript的未来版可能会定义的一些语法,为未来版本做铺垫。比如保留关键字。
应用
严格模式可以应用在整个js文档或者个别函数。因此我们使用时,将其区分为脚本开启严格模式和为函数开启严格模式两种情况。
'use strict';//下面的js代码进入严格模式。
1.
<script>
'use strict';//整个js文档
(function() {
'use strict';
})();
</script>
2.
<script>
function() {//个别函数
'use strict';
}
</script>
规法【具体限制】
变量
-
变量赋值前需要声明。
-
严禁删除已经声明的变量。
this指向
-
全局作用域中定义的函数不在指向window,而是指向undefined。
-
严格模式下,如果,构造函数不实例化调用,this会报错。
-
定时器this还是指向window。
-
事件、对象this还是指向调用者。
函数
1.不允许将函数声明在非代码块中。如:if,for循环中再定义函数,不允许。
高阶函数
高阶函数是对其他函数进行操作的函数,它接受函数作为参数或将函数作为返回值输出。
闭包
说明
闭包(closure)值有权访问另一个函数作用域中局部变量的函数。
简单理解:一个作用域可以访问另一个内部作用域。被访问的作用域的函数称为闭包函数。
闭包的主要作用:延伸了变量作用范围。
立即执行函数是一个小闭包,因为立即函数中的所有函数都可以使用它的传参。
递归
函数内部可以调用自身,那么这个函数就是递归函数。
由于递归如果没有结束限制,那么它会死循环,造成栈溢出。所有必须加退出条件return。
函数
创建函数
1.自定义函数
function 函数名() {
};
2.函数表达式【匿名函数】
var 变量名 = function() {
};
3.利用new Function('参数列表','函数体');[了解]
var 变量名 = new Function('参数列表','函数体');
结论:
1.所有函数都是Function的实例化对象。
2.函数也是对象。
调用函数
1.普通函数
function fn() {
}
函数名();
函数对象.call(当前调用函数this的指向对象,参数列表);
2.对象的方法
var obj = {
mothed:function() {
}
}
对象名.方法名();
3.构造函数
function 对象名(参数列表) {//创建构造函数
this.参数名 = 参数名
this.方法名【函数名】 = function() {
}
}
实例化-- new 构造函数名;
4.绑定事件
btn.addEventListener('click',function() {
});
触发事件,即可调用。
5.定时器函数
setInterval(function() {
});
定时器自动调用。
6.立即执行函数
(function() {
})();
自动调用。
this指向
表中this指向在非严格模式下得出
调用方式 | this指向 |
---|---|
普通函数 | window |
构造函数 | 实例化对象,原型亦是如此 |
对象方法 | 该方法所属对象 |
事件绑定 | 绑定事件对象 |
定时器函数 | window |
立即执行函数 | window |
改变内部this指向
1.call()
函数对象.call(this指向,参数列表);//会调用函数
名词解析:
当前调用函数this的指向对象,修改该属性可以改变this的指向。
参数列表:与function(参数列表)功能相似,都是用于传递参数提供方法使用。
2.apply() 应用
函数对象.apply(this指向,[参数列表]);//会调用函数
this指向:不需要改变时,传递null。当然传递调用者更加。
参数列表:数组形式【伪数组】。
3.bind() 捆绑
var 新函数名 = 函数对象.bind(this指向,参数列表);//不会调用函数,会返回this值和初始化参数改造的原函数的拷贝。
主要应用场景
call()--继承
apply()--跟数组有关
bind()--不调用函数,改变内部this指向。
正则表达式
概述
正则表达式(Regular Expression)是用于匹配字符串的字符组合的模式,在JavaScript中,正则表达式也是对象。
主要作用:
- 验证表单。
- 过滤页面敏感关键词。
- 提取特定字符串。
正则表达式优点:
- 灵活性、逻辑性和功能性非常强。
- 可以迅速简单的完成字符复杂的控制。
使用
创建
1.通过RegExp对象的构造函数创建正则表达式
var 变量名 = new RegExp(/表达式/);
2.通过字面量创建正则表达式
var 变量名 = /表达式/;
测试是否符合正则表达式
正则表达式对象.text(需要测试的字符串对象);//满足true,不满足返回false。
组成
一个则正表达式可以由简单的字符构成,也可以是简单和特殊字符 组成,其中特殊字符称为元字符。在正则表达式中具有特殊意义的专用字符。如:^、$、+等…
元字符 | 说明 |
---|---|
边界符 | |
^ | 表示匹配行首的文本(以谁开始) |
$ | 表示匹配行尾的文本(以谁结尾) |
注意事项 | 如果^和$一起使用可以达到精准匹配的效果 |
字符类 | |
[] | 表示有一个系列可供字符选择,只需要匹配其中一个即可。 |
[-] | 范围内其一即可。 |
[^] | 范围取反,不是范围中其一即可。 |
字符组合 | [^a-zA-z0-9_-]不能是大小写英文字母、下划线和数子。【两个范围不需要空格相隔】 |
量字符 | 设定某个字符的出现次数 |
* | 重复零次或者更多次【写在元字符后面】 |
+ | 重复一次或者更多次 |
? | 重复零次或者更多次 |
{n} | 重复n次 |
{n,} | 重复n次或者更多次【大于等于】 |
{n,m} | 重复n到m次【中间不可加空格】 |
优先级 | |
() | 优先级 |
预定义类 | |
\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] |
| | 或者 |
注意事项
- 正则表达式里面不需要加引号,不管数字还是字符串。