- 博客(66)
- 收藏
- 关注
RSS订阅原创 ES6的内置对象扩展
目录一、String的扩展方法1.模板字符串 2. 实例方法：startsWith()和endsWith() 3.实例方法：repeat()4. Set 数据结构1.实例方法2.遍历 ES6新增的创建字符串的方式，使用反引号定义 模板字符串中可以解析变量 模板字符串可以直接将变量的数据解析出来（按照传统的方法，应该用+字符串拼接） 模板字符串可以换行（普通字符串是不能换行的，只能一行显示） 2. 实例方法：startsWith()和endsWith
2022-07-05 22:16:06
427
1
原创 ES6的内置对象扩展
目录一、Array的扩展方法1.扩展运算符（展开语法）2、扩展运算符的应用1.合并数组2. 将伪数组转换为真正的数组3.构造函数方法：Array.from()4.实例方法 ：find() 5.findIndex()6.includes() 扩展运算符可以将数组或者对象转换为逗号分隔的参数序列2、扩展运算符的应用1.合并数组扩展运算符可以用于合并数组注意：push()方法可以接收多个值，每个值之间用“,”分隔2. 将伪数组转换为真正的数组将类数组或可遍历对象转换为真正
2022-07-02 18:53:06
381
原创 ES6新增语法（二）
目录一、解构赋值1.数组解构2. 对象解构对象解构的另一种写法二、箭头函数2.箭头函数的this关键字3.箭头函数面试题 编辑三、剩余参数2.剩余参数和解构一起使用 解构指的是分解数据结构，赋值指的是一一为变量赋值ES6中允许我们按照一一对应的规则从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构 在ES6之前，要使用arr[0],arr[1]...，要重复声明多次变量如果解构不成功（变量的数量和值的数量不一致），变量的值为undefined2. 对象解构{}里的是
2022-07-02 16:03:27
338
原创 ES6简介
ES的全称是ECMAScript，它是由ECMA国际标准化组织制定的一项脚本语言的语法规范ES6实际上是一个泛指，泛指ES2015及后续的版本ES6中新增的用于声明变量的关键字注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性 在我们for循环的时候，如果使用var来声明变量，即使已经循环完了，在for循环的外面还是能访问得到这个计数的变量，如果使用了let（即使let是在for的括号里而不是在{}里，它依然和for的块级作用域绑定），就不能在for循环的
2022-07-02 10:19:27
1753
原创 函数进阶（二）
3. 严格模式JavaScript除了提供正常模式外，还提供了严格模式（strict mode）。ES5的严格模式是具有限制性JavaScript变体的一种方式，即在严格的条件下运行js代码严格模式在IE10以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略严格模式对正常的JavaScript语义做了一些更改：消除了JavaScript语法的一些不合理、不严谨之处，减少了一些怪异行为 消除代码运行的一些不安全之处，保证代码运行的安全 提高编译器效率，增加运行速度 禁用了在ECMASc
2022-05-29 15:11:23
276
原创 ES5中的新增方法
3. ES5中的新增方法3.2 数组方法迭代（遍历）方法：forEach()、map()、filter()、some()、every()array.forEach(function(currentValue,index,arr){})currentValue：数组当前项的值 index：数组当前项的索引 arr：数组对象本身1.forEach<script> // forEach 迭代(遍历) 数组 var arr = [1,.
2022-05-27 15:05:23
342
原创 构造函数和原型
在ES6之前，是通过构造函数和原先模拟类的实现机制1.构造函数和原型1.1 概述创建对象可以通过以下三种方式：对象字面量 new Object() 自定义构造函数1.2 构造函数构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值。它总与new一起使用，我们可以把对象中的一些公有的属性和方法抽取出来，然后封装到这个函数里卖弄在js中，使用构造函数时要注意以下两点：构造函数用于创建某一类对象，其首字母要大写 构造函数要和new一起使用才有意义如果在.
2022-05-25 15:09:11
218
原创 JavaScript面向对象
1.面向对象编程介绍1.1 两大编程思想面向过程 面向对象1.2 面向过程编程POP（Process-oriented programming）面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现， 使用的时候再一个一个的依次调用就可以了举个例子：把大象装进冰箱，面向过程做法面向过程，就是按照我们分析好了的步骤，按照步骤解决问题1.3 面向对象编程OOP（Object Oriented Programming）面向对象是把事物分解成为一个个对象，然后.
2022-05-22 11:22:59
232
原创 ECharts介绍
1. 什么是数据可视化1.1 数据可视化数据可视化主要目的：借助于图形化手段，清晰有效的传达与沟通信息 数据可视化可以把数据从冰冷的数字转换成图形，解释蕴含在数据中的规律和道理1.2 数据可视化的场景目前互联网公司通常有这么几大类的可视化需求：1.3 常见的数据可视化库2. 数据可视化项目概述2.1 项目展示2.2 项目目的2.3 项目技术3. ECharts简介官网地址：https://www.echarts...
2022-05-18 09:23:56
859
1
原创 jQuery综合案例——todolist
--------------------------------------------------本地存储格式------------------------------------------------------------注意：刷新、关闭浏览器都不会丢失数据，所以使用本地存储localStorage 虽然看起来像是直接回车，直接点击的事儿，但是，其中的过程都是先把数据存储到本地存储中，再从本地存储取出数据显示到页面 因为数据很多，所以本地存储的数据采用对象数组的形式 因为本...
2022-05-17 17:02:17
468
原创 jQuery事件
目录1. jQuery事件注册单个事件注册语法：2. jQuery事件处理2.1 事件处理 on() 绑定事件语法:on()方法优势1：on()方法优势2：on()方法优势3：案例：发布微博案例2.2 事件处理off()解绑事件2.3 自动触发事件trigger()3.jQuery事件对象1. jQuery事件注册单个事件注册语法：element.事件(function() {})$("div").click(fu...
2022-05-15 14:28:58
242
原创 jQuery常用API（六）
7. jQuery尺寸、位置操作7.1 jQuery尺寸语法 用法 width() / height() 取得匹配元素宽度和高度值 只算width / height innerWidth() / innerHeight() 取得匹配元素宽度和高度值，包括padding outerWidth() / outerHeight() 取得匹配元素宽度和高度值 包含padding、border outerWidth(true) / outerHeight(true)
2022-05-15 09:02:51
238
原创 jQuery常用API（五）
6. jQuery元素操作主要是遍历、创建、添加、删除元素操作6.1 遍历元素jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，就需要用到遍历语法1：$("div").each(function (index,domEle) {xxx;})each()方法遍历匹配的每一个元素，主要用DOM处理。each每一个 里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素，不是jQuery对象 所以想要使用jQuery方法
2022-05-14 15:20:20
215
原创 jQuery常用API（四）
6. jQuery内容文本值主要针对元素的内容还有表单的值操作1. 普通元素内容html()（相当于原生innerHTML）html() //获取元素内容html("内容") //设置元素的内容<body> <div> <span>我是内容</span> </div> <input type="text" value="请输入内容"> <scri
2022-05-14 08:41:11
154
原创 jQuery常用API（三）
5. jQuery属性操作5.1 设置或获取元素固有属性值prop()所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type1. 获取属性语法prop("属性")<a href="http://www.itcast.cn" title="都挺好"></a><script> $(function () { //1.element.pr
2022-05-13 17:23:48
253
原创 jQuery常用API（二）
2. jQuery样式操作2.1 操作css方法jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式1.参数只写属性名，则是返回属性值，带有单位$(this).css("color");<style> div { width: 200px; height: 200px; background-color: pink; } </sty
2022-05-13 15:26:25
183
原创 jQuery常用API（一）
1. jQuery选择器1.1 jQuery基础选择器原生JS获取元素方式很多很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准$("选择器" ) //里面选择器直接写CSS选择器即可，但是需要加引号名称 用法 描述 ID选择器 $("#id") 获取指定ID的元素 全选选择器 $('*') 匹配所有元素 类选择器 $(".class") 获取同一类class的元素 标签选择器 $("div"
2022-05-11 21:07:35
166
原创 jQuery介绍
1. jQuery概述1.1 JavaScript库仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以了JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这个封装好的功能了比如jQuery，就是为了快
2022-05-10 22:58:53
264
原创 本地存储。
1. 本地存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5规范提出了相关解决方案本地存储特性数据存储在用户浏览器中 设置、读取方便，甚至页面刷新不丢失数据 容量较大，sessionStorage约5M，localStorage约20M 只能存储字符串，可以将对象JSON.stringify()编码后存储2. window.sessionStorage生命周期为关闭浏览器窗口，关闭浏览器窗口生ses
2022-05-10 16:50:29
212
原创 移动端网页特效（二）
2. 移动端常见特效案例：返回顶部步骤：判断页面滚动的距离是否超出了指定距离，如果超出，就显示按钮，如果没有，就隐藏按钮 页面滚动的距离，就是整个页面滚出去的距离，规定到海外酒店部分的时候就显示按钮，所以滚动的距离等于海外酒店部分到页面最顶端的距离 给按钮设置点击事件，一点击就回到页面顶部在上一节代码中继续添加： // 返回顶部模块 var goback = document.querySelector('.goBack'); var nav = docu
2022-05-09 21:58:16
917
原创 移动端网页特效
1. 触屏事件移动端浏览器兼容性较好，我们不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方，比如触屏事件touch(也称触摸事件)，Android和IOS都有touch对象代表一个触摸点，触摸点可以是一根手指，也可能是一根触摸笔。触屏事件可相应用户手指（或触控笔）对屏幕或者触控板操作常见的触屏事件如下：触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上
2022-05-08 10:36:23
479
原创 PC端常见网页特效
5.常见网页特效案例案例：网页轮播图轮播图也称为焦点图，是网页中比较常见的网页特效注意：为了保证所有的li能在一行显示，必须保证ul足够大注意：因为页面中相同元素较多，所以获取元素的时候尽量要准确注意：因为index.js里面需要用到animate.js，所以animate.js要在index.js上面引入，确保先有animate.js再有index.js 必须给ul设置定位，因为真正移动的是ul ul的移动距离是负值...
2022-05-06 14:46:18
858
原创 PC端网页特效二
2. 元素可视区client系列client翻译过来都是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息，通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等client系列属性 作用 element.clientTop 返回元素上边框的大小 element.clientLeft 返回元素左边框的大小 element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位 ele
2022-05-05 08:29:39
847
原创 PC端网页特效
1.元素偏移量offset系列1.1 offset概述offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等获得元素距离带有定位的父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位offset系列属性：offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body element.offsetTop 返回元素.
2022-05-01 12:33:44
266
原创 BOM浏览器对象模型
1. BOM概述1.1 什么是BOMBOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分DOM文档对象模型 DOM就是把【文档】当作一个【对象】来看待 DOM的顶级对象是document D
2022-04-30 13:21:46
728
原创 WebAPI编程——事件高级
1.注册事件（绑定事件）1.1 注册事件概述给元素添加事件，称为注册事件或者绑定事件注册事件有两种方式：传统方式和方法监听注册方式传统注册方式 利用on 开头的事件onclick <button onclick = "alert('hi~')"> </button> btn.onclick = function() {} 特点：注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面.
2022-04-28 19:30:57
322
原创 DOM（二）
案例：动态生成表格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&g..
2022-04-24 21:17:33
170
原创 Web API编程——DOM
1.1 什么是DOM文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展编辑于言（HTML或XML）的标准编程接口。W3C已经定义了一系 列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式1.2 DOM树文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用no...
2022-04-23 08:58:25
220
原创 JavaScript简单类型和复杂类型
1.简单类型与复杂类型简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string,number,boolean,undefined,null//简单数据类型null 返回的是一个空的对象 objectvar timer = null;console.log(typeof timer); //object//如果有个变量我们以后打算存储为对象，暂时没想好放啥，这个时候就给null引用类型：.
2022-04-17 15:14:41
97
原创 JavaScript内置对象
1.内置对象JavaScript中的对象分为三种：自定义对象、内置对象、浏览器对象 前面两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于JS独有的 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是额最基本而必要的功能（属性和方法） 内置对象最大的优点就是帮助我们快速开发 JavaScript提供了多个内置对象：Math、DATE、Array、String等2. 查文档2.1 MDNMDN：https://developer..
2022-04-16 21:30:23
3423
原创 JavaScript对象
1.对象1.1 什么是对象1.2 为什么需要对象2. 创建对象的三种方式在JavaScript中，现阶段我们可以采用三种方式创建对象（object）：利用字面量创建对象 利用new Object创建对象 利用构造函数创建对象2.1 利用字面量创建对象对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法<script> // 1.利用对象字面量创建对象 {} // var obj = ...
2022-04-16 11:51:28
738
原创 JavaScript预解析
1.预解析JavaScript代码是由浏览器中的JavaScript解析器来执行的，JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行<script> // 1.我们js引擎运行js分为两步 ：预解析 代码执行 // （1）.预解析js引擎会把js里面所有的var还有function提升到当前作用域的最前面 // （2）.代码执行 按照代码书写的顺序从上往下执行 // 2.预解析分为.
2022-04-14 19:25:56
586
原创 JavaScript基础语法——运算符
1.运算符运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算术运算等功能的符号JavaScript中常见的运算符有：算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运算符2.算数运算符概念：算数运算使用的符号，用于执行两个变量或值的算术运算运算符 描述 实例 + 加 10 + 20 =30 - 减 10 - 20 = -10 * 乘 10 * 20 = 200 /.
2022-04-09 16:02:20
239
2
原创 JavaScript基础语法——数据类型
1、数据类型简介1.1 为什么需要数据类型在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分析成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。简单来说，数据类型就是数据的类别符号，比如姓名”张三“，年龄18，这些数据的类型是不一样的。1.2 变量的数据类型变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运
2022-04-09 13:14:04
799
原创 JavaScript基础语法——变量
1. 变量概述1.1 什么是变量变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改1.2 变量在内存中的存储本质：变量是程序在内存中申请的一块用来存放数据的空间2. 变量的使用变量在使用时分为两步：1、声明变量 2、赋值1、声明变量//声明变量var age; //声明一个名称为age的变量var是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管 age是程序员定.
2022-04-08 16:02:08
410
原创 JavaScript初识
1、初识JavaScript1.1 JavaScript历史布兰登·艾奇 在1995年利用10天完成JavaScript设计 网景公司最初命名为LiveScript，后来在与Sun合作之后将其改名为JavaScript 和Java没关系1.2 JavaScript是什么JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思） 脚本语言：不需要编译，运行过程中由js解释器（JS引擎）逐行来进行解释并执行 现在也可以基于Node.js技术进.
2022-04-08 14:42:11
75
原创 响应式布局——Bootstrap
二、BootStrap1.1 BootStrap简介目标：使用BootStrap框架快速开发响应式网页Bootstrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及Javascript，快速编写功能完善网页及常见交互效果 中文官网：https://www.bootcss.com/1.2 BootStrap使用步骤目标：使用Bootstrap框架快速布局响应式网页1、下载：https://www.bootcss...
2022-04-06 20:28:38
9313
原创 响应式布局——媒体查询
什么是响应式布局？同一行代码，适配不同的屏幕一、媒体查询1.1 基本语法目标：能够根据设备宽度的变化，设置差异化样式开发常用写法媒体特性常用写法 max-width（小于等于） min-width（大于等于） @media (媒体特性) { 选择器{ 样式 }}1.2书写顺序min-width（从小到大） max-width（从大到小）1.3 （了解）完整写法@media 关键词 ...
2022-04-05 16:52:22
2769
原创 移动端布局——移动适配
什么叫移动适配？网页元素的宽高都要随着设备的宽度等比缩放如何实现？rem：目前多数企业再用的解决方案 vw/vh：未来的解决方案一、rem能够使用rem单位设置网页元素的尺寸网页效果 屏幕宽度不同，网页尺寸不同（等比缩放） px单位或百分比布局可以实现吗？ px单位是绝对单位 百分比布局特点宽度自适应，高度固定 rem单位 相对单位 rem单位相对于HTML标签（根标签）的字号计算结果 1rem=1HTML字号大小 注意：使用re...
2022-04-05 13:45:03
3885
原创 移动端布局——Flex布局
一、Flex布局思考多个盒子横向排列使用什么属性？ 浮动 设置盒子间的间距使用什么属性？ margin 需要注意什么问题？ 浮动的盒子脱标 Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用)是一种浏览器提倡的布局模型 非常适合结构化的布局（左右、上下...） 布局网页更简单、灵活 避免浮动脱标的问题一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本1.1 Flex布局模型构成作用基于Fl...
2022-04-02 16:44:38
2071
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人