- 博客(33)
- 收藏
- 关注
RSS订阅原创 es6 箭头函数
使用语法箭头函数有四种使用语法单一参数的单行箭头函数const fn= foo =>`${foo} world`;这是箭头函数最简洁的形式，常用于用作简单的处理函数，如过滤。如下段代码所示：let array=['a','bc','def','ghij'];array=array.filter(item=>item.length>=2); console.log(array); // ["bc", "def", "ghij"]多参数的单行箭头函数const fn
2020-08-29 11:24:19
156
原创 css Transforms 属性
Transforms 属性可以通过此属性实现元素的位移translate(x,y)，缩放scale(x,y)，2d旋转rotate(angle)，3d旋转rotate3d(angle),倾斜变换skew(x-angle,y-angle)等内容垂直居中在前端开发过程中，内容居中是常见的需求。其中，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin:0 auto 就可以实现。但是垂直居中相对来说是比较复杂一些的。实现的方法也比较多，比如flex布局，display:table
2020-08-29 10:33:26
175
原创 css3径向渐变
radial-gradient()radial-gradient() 函数用径向渐变创建 “图像”。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。语法： background: radial-gradient(shape size at position, start-color, …, last-color);值描述shape确定圆的类型, llipse (默认):指定椭圆形的径向渐变; circle : 指定圆形的径向渐变size确定圆的类型, llip
2020-08-23 17:31:33
196
原创 javascript 生成随机数
基础知识向上取整Math.ceil();// 示例Math.ceil(1.5); // 2Math.ceil(2.4); // 3向下取整Math.floor();// 示例Math.floor(1.2); // 1Math.floor(0.5); // 0四舍五入Math.round();// 示例Math.round(1.2); // 1Math.round(0.5); // 10.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】Math.random();
2020-08-23 16:10:10
708
原创 伪类和伪元素
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。伪元素用于创建一些不在文档树中的元素，并为其
2020-08-18 20:15:59
126
原创 BFC
BFC概念Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。触发BFC只要元素满足下面任一条件即可触发 BFC 特性：body 根元素浮动元素：float 除 none 以外的值绝对定位元素：positi
2020-08-15 11:14:42
124
原创 事件委托
事件委托就是把元素的事件委托给另一个元素事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级
2020-08-10 20:06:05
145
原创 js作用域
JavaScript 中的作用域是指变量的可访问性或可见性作用域的好处用域的主要好处是安全性。也就是说，只能从程序的特定区域访问变量。使用作用域，我们可以避免程序其他部分对变量的意外修改。作用域还减少了命名冲突。也就是说，我们可以在不同的范围内使用相同的变量名。作用域类型全局作用域块作用域局部作用域全局作用域不在任何函数或块（一对花括号）内的任何变量都在全局作用域内。可以从程序的任何位置访问全局作用域内的变量 var ms = 'Hello World!'; fu
2020-08-09 16:15:18
106
原创 this 指向
this 是 JavaScript 中的一个特殊关键字一.全局执行console.log(this); //window在全局作用域中 this 指向当前的全局对象 Window。二.在函数中执行1.非严格模式中function func () { console.log(this);}func();// Window2.严格模式中"use strict";function func () { console.log(this);}func();// undefined
2020-08-02 19:37:31
94
原创 css元素居中
css实现居中是面试中经常考的一道题目元素固定宽高absolute+负marginabsolute+margin autoabsolute+cale元素不固定宽高absolute+transformlineheighttableflexgridabsolute+负margin <style> .fa{ border:1px solid red; width: 300px; height: 300px; po
2020-08-01 14:56:10
80
原创 闭包
闭包是 Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。闭包的特性函数嵌套函数函数内部可以引用外部的参数和变量参数和变量不会被垃圾回收机制回收闭包的定义闭包 是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量闭包的优缺点使用闭包可以形成独立的空间，延长变量的生命周期，报存中间状态值闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。嵌套函数的闭包
2020-07-28 20:30:31
67
原创 js 数组去重
一、利用ES6 Set去重（ES6中最常用）这种去重的方法代码最少。但是这种方法还无法去掉“{}”空对象function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(u
2020-07-26 23:03:42
79
原创 cookie和sessionstorage和localstorage区别
cookieHTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储cookie的构成
2020-07-21 22:04:03
157
原创 js 继承
什么是继承继承是类与类之间的关系，其作用是使得子类具有父类别的各种属性和方法。继承的种类原型链继承借用构造函数继承组合继承原型式继承寄生式继承寄生组合式继承混入方式继承多个对象es6继承原型链继承//定义一个父类 function Animal(name){ this.name=name; this.sleep=function(){ console.log("正在睡觉");
2020-07-18 15:06:22
75
原创 ajax
ajax它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验ajax就是异步的js和XML//1.创建请求对象var xhr = new XMLHttpRequest();//2.调用open方法 (open方法里面来设置请求方式和请求路径)//open方法的参数 参数1 请求方式有 get post//参数2 请求路径 这个是由后端设置好的你要把请求发到哪儿去xhr.open('get', 'data.php');//3.设置请求头(get请求不需
2020-07-13 20:20:49
103
原创 es6
ES6是ECMAScript第六版ES6的内容包括:1.声明变量的方法(1et和const)2.变量的解构赋值3.扩展运算符4.数据劫持箭头函数5. Set Map6. 数组对象数值的扩展7. Promise对象8. Generator 函数let和constlet声明的变量只在所处于的块级有效 if (true) { let a = 1; }console.log(a) // a is not defined使用let关键字声明的变量才具有块级作用域，使用var
2020-07-12 17:21:41
108
原创 jQuery动画
三种基本动画显示与隐藏显示（show）与隐藏（hide）；show() 方法 有两个参数参数1 动画时长 可以填毫秒数 也可以填代表动画时长的字符串 “slow” “nnormal” “fast”参数2 回调函数 就是在动画执行完毕之后 才会执行的hide()隐藏toggle()切换 <input type="button" value="显示" id="show"> <input type="button" value="隐藏" id="hide"
2020-05-16 23:49:41
86
原创 jQuery的基本使用
jQuery 是什么jQuery是一个快速 小型且功能丰富的javascript库 它使用一个在多种浏览器上工作的易于使用的API 使得HTML文档遍历和操作，事件处理，动画和AJAX等工作变得更加简单，随着多功能性和可扩展性的结合 jQuery改变了数百万人编写javascript的方式jQuery不同版本jQuery 1.X已经不更新了 支持老浏览器 包括IE6 IE8 opera老的版本jQuery 2.X已经不更新了 不支持以前的老浏览器jQuery 3.X正在更新中 不支
2020-05-16 23:21:51
109
原创 动画封装
缓动动画函数封装obj目标对象 target 目标位置 <style> div { position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; ...
2020-04-11 16:53:59
144
原创 三大系列
offset 元素偏移量offset特点: offset 可以得到任意样式表中的样式值offset 系列获得的数值是没有单位的offsetWidth 包含padding+border+widthoffsetWidth 等属性是只读属性，只能获取不能赋值所以，我们想要获取元素大小位置，用offset更合适点语法特点 1只能得到行内样式表中的样式值 2获得的是带有单位的字符串3获得...
2020-04-11 16:20:58
118
原创 键盘事件
1 keyup 按键弹起的时候触发2 keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头3 keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头document.addEventListener('keyup', function() { console.log('我弹起了'); ...
2020-03-29 11:48:42
132
原创 定时器
window 对象给我们提供了2 个定时器。setTimeout()setInterval()setTimeout()语法:setTimeout(code,millisec)参数:code 必需。要调用的函数后要执行的 JavaScript 代码串。millisec 必需。在执行代码前需等待的毫秒数。特点:只执行一次 setInterval(function() { ...
2020-03-28 13:36:57
61
原创 事件
注册事件普通注册特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数<button>点击</button> <script> var btn = document.querySelector('button'); btn.onclick = funct...
2020-03-22 19:01:41
54
原创 节点操作
节点概述网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性元素节点 nodeType 为 ...
2020-03-22 14:03:05
672
原创 attribute
setAttribute设置元素属性:元素.setAttribute(‘属性名’,属性值)setAttribute() 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。 <span> </span> <script> var span = document.querySelector('s...
2020-03-15 11:53:18
89
原创 innnerText textContent和innerHTML
innnerTextinnerText 属性表示一个节点及其后代的渲染文本内容innerText获取的是纯文本值不含html标签 <span> "ahah1" <p>123</p> </span> <script> var span = document.query...
2020-03-15 11:23:20
329
原创 预解析
预解析JS代码在执行之前，会对代码进行预解析，寻找作用域中的var 和function ，然后对其进行事先声明，在从上到下执行代码。这就是一个预解析的过程。预解析机制js代码只执行前,会把函数或者变量声明提升所在作用域的最顶端注意点：只是声明提前(变量声明和函数声明),变量的赋值和函数的调用留在原地 依次执行全局作用域GO对象:全局对象a 生成一个GO对象，封装的就是作用域 GO={...
2020-03-01 13:28:57
112
原创 正则表达式
正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。特点:灵活性、逻辑性和功能性非常的强，可以迅速地用极简单的方式达到字符串的复杂控制创建方式和检测1:利用new RegExp对象来创建var reg1 = new RegExp();2:利用字面量创建 //var reg2 = /‘hhh’/;3...
2020-02-23 13:36:17
175
1
原创 数组案例
1数组翻转（1） 定义一个新数组,将原数组倒着遍历,然后将新数组的每一个元素添加到新数组中var arr = [1, 2, 3, 4, 5];var arr=[1,2,3,4,5]//定义新数组var newArr=[];//遍历原数组 for (var i = arr.length - 1; i >= 0; i--) { //将原数组中每一项添加到新数组中 ...
2020-02-08 20:40:57
131
原创 数据类型和数据类型之间的转换
1 数据类型js数据类型分为基本数据类型和复杂数据类型基本数据类型number(数字类型) string(i字符串类型) boolean(布尔类型) null(空) undefined(未定义)其中 number和true在控制台打印是蓝色的NaN:not a number 不是一个数字(是number类型的)isNaN:判断是不是不是一个数字,如果不是数字则为true,是数字则为...
2020-02-08 18:49:39
122
原创 数组API
添加1 push ()作用:将一个或多个元素添加到数组的末尾参数:可以是一个, 可以是多个, 表示向数组里面添加元素 参数可以不填, 但是一般默认, 第一个参数必填返回值:添加后的数组的长度特点:改变原数组2.unshift()作用:将一个或多个元素添加到数组的末尾参数:以是一个, 可以是多个, 表示向数组里面添加元素 参数可以不填, 但是一般默认, 第一个参数必填返回值:添...
2020-01-08 15:22:23
56
原创 函数
函数1.函数的作用：在开发过程中, 一段代码在多个地方执行, 而且不连续执行函数声明: function 函数名(){`函数体 : 代码块}var 函数名=function(){函数体 : 代码块}2.函数调用: 函数名();特点 : 执行保存在函数体里面的代码3 函数的好处 :(1) 解决代码冗余的问题, 便于维护(2) 使用方便函数的参数1参数的作用:让调用者可以传...
2020-01-08 14:49:00
66
原创 Date 日期对象
创建日期对象1 var 变量名 = new Date(“日期字符串”);2 可以传入七个参数 分别是 年月日 时分秒 毫秒 参数至少要传2个var 变量名 = new Date(2020,4,5,6,30,30,300);3 date对象中 创建时只传入一个参数 这个参数表示的是 毫秒数var date = new Date(2000)时间戳:指的是1970年1月1日00:00...
2020-01-08 14:48:08
88
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人