- 博客(31)
- 收藏
- 关注
RSS订阅原创 vue传参
Vue 常用的三种传值方式1.父传子2.子传父3.非父子传值父子组件的关系首先，我们要使用Vue的组件传值，我们要知道组件之间的关系。父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示å¨è¿éæå¥å¾çæè¿°什么是Prop要实现组件传值，我们要了解什么是prop。Prop是用来传递数据的一种自定义属性。Prop是单向数据流。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑
2020-07-06 20:38:15
268
原创 新手快速学会gulp插件的使用
1. 安装插件删除文件夹：gulp-clean压缩css：gulp-cssmincss前缀：gulp-autoprefixer压缩js：gulp-uglifyES6转ES5：gulp-babel套件1：@babel/core套件2：@babel/preset-env压缩html：gulp-htmlmin服务器插件：gulp-webserver...
2020-03-24 23:00:47
228
1
原创 小白也能快速上手gulp
1.gulp的介绍 前端自动化构建工具自动化构建：工程化，将文件的压缩，编译，各种处理，流程化，形成流水线似的环节gulp是基于node环境其实本质上gulp就是node的第三方模块2.gulp的使用安装：安装全局gulp：npm i gulp -g在磁盘上创建新文件夹，用来表示当前项目目录建议：路径不要太深，不要出现中文，至少不要出现特殊字符，不允许使用gulp作为文件...
2020-03-24 22:55:01
235
原创 一文学会使用node自带的npm工具
node的模块中，有第三方模块，第三方模块的使用，需要先下载，怎么下载？看完这一篇 足够学会使用npm node安装之后，会自带一个npm的下载工具，专门用来下载node的第三方模块，或一些其他工具npm其实是一种 包 管理器1.npm可以怎么用：查看版本号npm -v初始化项目，创建项目的配置信息，列出当前项目中所有使用的包和其他信息npm init -y下载：npm inst...
2020-03-24 22:39:25
647
原创 xhr 详解
XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用；但是，我们仍然 很有必要理解这个对象的详细工作机制。一、 引言异步JavaScript与XML(AJAX) 是一个专用术语，用于实现在客户端脚本与服务器之间的数据交互过程。这一技术的优点在于，它向开发者提供...
2020-03-22 21:35:01
1878
原创 jQuery的DOM操作
jQuery的元素操作1 创建元素2 内部插入元素3 外部插入元素4 替换元素5 删除元素6 克隆元素jQuery的元素尺寸1 操作元素的宽和高2 获取元素的内置宽和高3 获取元素的外置宽和高jQuery的元素位置1 元素相对页面的位置2 元素相对父级元素的偏移量3 获取页面卷去的宽度高度...
2020-03-19 23:14:20
93
原创 jQuery的事件操作
jQuery的绑定事件1. 绑定事件 — on()方法2. 移除事件 — off()方法绑定的和删除的必须是同一个函数3. 只执行一次的事件 — one()方法4. 直接触发事件 — trigger()方法jQuery可以直接使用的事件可以直接使用的事件也就是不需要on()方法绑定,就可以直接执行的事件1. click事件2. dblclick事件3. scroll事...
2020-03-19 23:08:41
131
原创 快速学会jquery的基础使用
jQuery的选择器选择器 — 用来获取DOM元素的方法Id选择器 $("#box");Class选择器 $(".box");标签选择器 $(“span”);包含选择器 $("#box p");子选择器 $("#box>p");群组选择器 $("#box,.cont,p");属性选择器 $(“input[type=button]”);特殊选...
2020-03-18 21:48:58
148
原创 快速了解set与map
首先，Map 和 Set 是 ES6 新增的两个数据类型，他们都是属于内置构造函数，并且都使用 new 的方式来实例化使用，那么接下来让我们分别来看下他们。 1、 Set的概念和声明 Set是一种数据的集合，类似数组，使用内置构造函数方式声明 在创建Set结构时，可以立即设置内容，但Set必须接受数组作为参数2 、Set的常用属性和方法size 属性 获...
2020-03-18 21:25:02
118
原创 闭包的一些介绍
1、 闭包的定义是JavaScript中,函数的一种高级应用方式2 、重新认识函数函数的执行空间3 闭包的总结1 有一个函数A , 在函数A内部返回一个函数B2 在函数B 中访问函数A 的私有作用域变量3 在函数A 外部,有变量引用函数B以上三条,缺一不可4 闭包的特点既是优点,同时也是缺点1 作用域空间不销毁2 可以通过闭包语法,从外部访问函数内部变量3 ...
2020-03-16 19:13:43
182
1
原创 简单一文让你认识有关继承
1、 什么是继承1、继承是与 构造函数 相关的应用2、是指，让一个构造函数去继承另一个构造函数的属性和方法3、继承是发生在两个构造函数之间的1 两个构造函数之间2 子级继承父级3 继承的是父级的属性和方法2 ES5 之继承的常见方法1、原型继承原型继承1原型继承22、借用构造函数继承借助构造函数继承 – 多继承3、组合继承ES6 class继...
2020-03-16 18:59:56
197
1
原创 一文教你看懂原型！！！
谈到原型，我们都知道最重要的两个属性就是__proto__和prototype，那么他们到底有什么关系又到底是什么呢，这一篇看完相信你就会有一些理解了。1 对象的__proto__是什么js中万物皆对象，每个数据都会有一个__proto__的属性，这个属性叫隐式原型。一个对象(obj)的 隐式原型(proto) 指向构造该对象(obj)的 构造函数(Object())的原型属性(Objec...
2020-03-16 17:12:27
2186
1
原创 原来js实现的放大镜效果要这么做，购物商城可使用噢
话不多说，直接看源码css部分.s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;} .s_box img{width: 400px;height: 300px;} .s_box span{width: 130px;height: 100px;background: rgba(200,...
2020-03-15 17:48:37
242
1
原创 回调地狱的解决方式
在js新版本出现之前，回调地狱自身就是解决方式新版本出现之后，在新的语法中，提供了一些更优雅的处理方案1.Promise（ES6）原理：Promise承诺，异步正在执行时…异步过程成功失败成功或失败虽然是将来才会发生，但是在承诺开始的时刻，就需要提前预置发生了成功，必然不会执行失败发生了失败，必然不会执行成功语法：(语言的法律法规，固定！！！！！)Promise是一...
2020-03-15 17:40:38
167
原创 用js模拟下拉框
虽然在我们的 html 中有下拉框这一选项，但是很多时候我们不嫩直接引用，因此今天就来模拟一个下拉框，直接来看代码吧css部分<style type="text/css"> .box{width:200px;height:30px;line-height: 30px;margin: 20px auto;} .box span{display: block;width: ...
2020-03-15 17:32:37
428
原创 原生js实现的金山打字小游戏
首先先来看一下效果图如果感兴趣的就来看一下Js源码吧//计分板var board = { dom: document.getElementById("score"), maxLost: 3, //最大丢失量 lost: 0, //当前丢失了多少个 score: 0, //当前分数 render: function() { //显示 this.dom.in...
2020-03-15 10:28:49
3293
7
原创 ajax之promise的函数封装
function ajax(ops){ // 先处理默认属性 ops.type = ops.type || "get"; ops.data = ops.data || ""; var str = ""; for(var key in ops.data){ str += `${key}=${ops.data[key]}$` } ...
2020-03-13 23:34:06
201
原创 ajax中get和post的封装
在使用ajax处理数据时，我们最常用的就是post和get，这里就进行一个简单的封装，以便使用，代码如下：function ajax(ops){ // 先处理默认属性 ops.type = ops.type || "get"; ops.data = ops.data || ""; // 根据当前的请求方式，决定是否需要拼接数据，处理url ops.url ...
2020-03-11 23:28:24
255
原创 轻松了解ajax
一、了解 Ajax什么是 ajax ？ajax是前后端交互的重要手段全称：Asynchronous JavaScript and XML是一些技术的组合体a：异步j：jsa：andx：数据ajax 的特点1、不需要插件的支持，原生 js 就可以使用2、用户体验好（不需要刷新页面就可以更新数据）3、减轻服务端和带宽的负担4、缺点： 搜索引擎的支持度不够，因为数据都不在页面上...
2020-03-11 23:24:57
143
1
原创 快速解决函数频繁执行----函数的防抖和节流
在前端开发的过程中，相信你一定遇到这种情况：自己设定的事件频繁的执行，体验感极差，添加延时器虽然对有些情况能改善，但作用不大，不仅用户体验感差，性能也很不好，对浏览器增加了极大负担。这种情况该怎么解决呢？对啦，debounce（防抖）和throttle（节流）就是比较好的解决方案。首先让我们先来了解一下函数的防抖和节流是什么吧函数防抖当持续触发事件时，一定时间段内没有再触发事件，事件处理函数...
2020-03-09 20:54:10
392
2
原创 购物车的快速实现
接上篇商品列表css部分<style> img{width: 130px;height: 130px;padding-left: 20px;} .checkall{display: inline;} .btn{font-size: 20px;width: 130px;height: 40px;margin: 10px auto;display: block;} ...
2020-03-09 19:18:01
285
原创 简单购物车之商品列表的实现
这里主要是为了体现面向对象的思维，也就是js部分的内容，所以布局比较简单，仅供参考，可以后期自己修改首先附上css部分<style> #cont{width:1000px;overflow: hidden;margin: 30px auto;border: solid 1px black;} #cont .goods{width: 250px;float: le...
2020-03-09 14:34:56
1517
原创 有关正则
在js这门语言中，正则算是一个特例了，可以说它算是语义化中的一个不听话的孩子，所以很多人对正则比较头疼，但其实只要用心就会发现其实他也很可爱，今天我们就来总结一下有关正则的用法。首先让我们来认识一下正则吧：1、正则的概念：正则可以理解为字符的正则的规则，所以说，正则使用来操作字符串的而使用正则可以使数据校验的工作量大大减轻，但要注意极简原则，常用在：网址、邮箱、身份证号、手机号等。2...
2020-03-07 21:56:45
303
原创 选项卡操作（附源码）
今天来一波简单的选项卡操作，因为js和布局有关，特附上html和css源代码，仅供参考呦css部分如下 .box{width: 400px;height: 440px;border: solid 1px;text-align: center;font-size: 20px;margin: 30px auto;} ul,li{margin: 0;padding: 0;list-style...
2020-03-06 19:46:53
680
1
原创 js实现的贪吃蛇小游戏
js还是非常强大的 下面就来一个贪吃蛇的小游戏 已经具备了基本功能 可以尝试一下class Map{constructor(){// 提前设定将来的地图的样式数据this.w = 800;this.h = 400;this.c = “#ccc”;// 执行创建地图方法this.createEle();}createEle(){this.mapEle = document.cr...
2020-03-06 17:43:46
3341
3
原创 用原生js实现的烟花效果
首先附上css布局 （html的body中仅有一个container，其他是自己后期用js创建的）#container{width: 80%;height: 600px;border: 2px solid red;background: #000;margin:20px auto;cursor: pointer;position: relative;overflow: hid...
2020-03-05 17:13:47
648
6
原创 this的那些事
首先得明白一点：this是一个对象类型，既不指向函数自身也不指向函数的词法作用域。this是在执行上下文创建时确定的，而执行上下文又是函数被调用时创建的，所以this是在函数被调用时确定的，也就是this与函数的创建的位置无关，this指向与函数调用的方式有关 ，一般情况this指向调用者，若直接执行则this指向window，当然，javascript也提供了一些方法让this强制绑定某一对...
2020-03-05 14:31:55
1761
2
原创 运动的封装
以下是运动的简单封装带有px的css属性和透明度，可以运动背景色不可以// 参数2被修改成了对象，那么在使用之前需要解析（遍历）function move(ele,obj,cb){ clearInterval(ele.t); ele.t = setInterval(() => { // 假设状态为：可以清除计时器 var i = tru...
2020-03-04 21:07:10
1594
原创 面试题之css中的垂直水平居中
垂直水平居中面试经常问的一个问题，今天来总结下，分两块：居中元素需要高度和不需要高度先写下都需要的样式和标签元素需要用得到的标签元素<div class="wrap"> <div class="box">我是居中元素</div></div>给body设置宽度html,body { width: 100%; ...
2020-03-03 23:57:41
443
1
原创 手写bind函数
手写bind原理原理改变函数的this指向，但此时不会执行函数。改变this指向的还有call、apply，与bind区别是绑定时执行了函数。bind执行后返回的是绑定后的函数，而call和apply返回的是函数执行后的结果。apply与call的区别是传参方式不同，前者是以数组的形式，后者以列表的形式。bind的实现bind方法在Function对象上的原型对象上且只接受第一个参...
2020-03-03 23:29:48
659
1
原创 js内置对象之Array
#前言首先，作为一门编程语言，JavaScript提供了一些内置的对象和函数。内置对象提供编程的几种最常用的功能。JavaScript内置对象有以下几种。● String对象：处理所有的字符串操作● Math对象：处理所有的数学运算● Date对象：处理日期和时间的存储、转化和表达● Array对象：提供一个数组的模型、存储大量有序的数据...
2020-02-22 22:33:30
326
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人