- 博客(31)
- 收藏
- 关注
RSS订阅原创 VUE路由传参有3种方式
VUE路由传参有3种方式1)query方式(push时使用path来匹配)发起页面:this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …eturn{id:this.router.query.id; //这里接收参数}}}跳转转收页面的时候,地址栏会显示:http://ip:port/accept?id=2222)params模式(push时使用name来匹配)发起页面:this.KaTeX parse
2020-09-01 16:30:32
248
原创 gulp -简介 - 使用 - 插件常用 - 项目流程操作
一、node自带的npm工具的使用node的模块中，有第三方模块，第三方模块的使用，需要先下载，怎么下载？打开百度，搜？不可能，太麻烦！node安装之后，会自带一个npm的下载工具，专门用来下载node的第三方模块，或一些其他工具npm其实是一种 包 管理器1.npm可以怎么用：查看版本号npm -v初始化项目，创建项目的配置信息，列出当前项目中所有使用的包和其他信息npm in...
2020-03-24 19:48:42
174
原创 动画 （jQuery）
01 show动画 显示动画02 hide动画 隐藏动画03 toggle动画 隐藏显示切换动画04 slideDown动画 下拉显示05 slideUp动画 上拉隐藏06 slideToogle动画 上下切换动画07 fadeIn动画 逐渐显示动画08 fadeOut动画 逐渐隐藏动画09 fadeToogle动画 渐隐渐现动画...
2020-03-21 22:31:19
122
原创 js之jQuery的DOM操作
jQuery的元素操作//创建： document.createElement("div") console.log($("<div>")); var s = $("<span>");// 插入 // 要插入的父元素.appendChild(ele); append:插入指定父元素的最后一...
2020-03-19 23:31:12
154
原创 jQuery的事件操作
jQuery的事件操作绑定事件 — on()方法移除事件 — off()方法绑定的和删除的必须是同一个函数只执行一次的事件 — one()方法直接触发事件 — trigger()方法：jQuery可以直接使用的事件也就是不需要on()方法绑定,就可以直接执行的事件click事件dblclick事件scroll事件hover事件ready事件jQuery阻...
2020-03-19 19:40:39
204
原创 jQuery的基本介绍
jQuery特点1 优质的选择器和筛选器2 方便的隐式迭代3 强大的链式编程基于以上特点：很多时候我们要做的事情被 “一行代码解决”必须下载并导入jQuery包。也就是 : jquery.js 或者 jquery.min.js静态资源库选择器 — 用来获取DOM元素的方法：Id选择器 $("#box");Class选择器 $(".box");标签选择器 $(“span...
2020-03-18 22:40:27
233
原创 ES6 新增的两个数据类型
Map 和 Set 是 ES6 新增的两个数据类型Set的概念和声明都是属于内置构造函数，使用 new 的方式来实例化使用Set是一种数据的集合，类似数组，使用内置构造函数方式声明在创建Set结构时，可以立即设置内容，但Set必须接受数组作为参数Set的常用属性和方法size 属性 获取该数据结构中,数据的数据个数add() 方法 向该数据结构中...
2020-03-18 18:48:47
1249
1
原创 js的设计模式
单例模式-应用 function Msg(){ this.ele = document.createElement("div"); document.body.appendChild(this.ele); } Msg.prototype.init = function(str){ this.ele.innerHTML = str;...
2020-03-17 20:37:30
93
原创 利用js原型继承实现拖拽效果。
<style> div{width: 100px;height: 100px;position: absolute;left:0;} #box1{background:red;top:0;} #box2{background:blue;top:130px;} </style></head><...
2020-03-16 21:23:54
160
原创 js 继承的介绍
原型继承1 function Parent(){ } Parent.prototype.show = function(){ console.log("哈哈哈"); } function Child(){ } // 浅拷贝 // Child.prototype = Parent.prototype; // 深拷贝 ...
2020-03-16 20:49:05
131
原创 闭包的介绍
闭包的定义是JavaScript中,函数的一种高级应用方式重新认识函数函数：函数在定义时，存在一个位置，当前函数的定义作用域函数在执行时，存在一个位置，当前函数的执行作用域定义作用域和执行作用域，都不是当前函数自身内部，而是当前函数所处的位置function box(){ function fn(){ } fn(); /...
2020-03-16 20:23:13
207
原创 js 实现选项卡切换功能
<style> .box{width: 500px;height: 400px;border: solid 1px black;margin: 20px auto;} .box ul{margin: 0;padding: 0;list-style: none;height: 40px;line-height :40px;display: ...
2020-03-15 19:24:25
233
原创 js实现跟随鼠标移动的提示框
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{width: 300px;height: 40px;background: #ccc;margi...
2020-03-15 18:36:22
1570
原创 js实现一连串跟随鼠标移动的元素
<style> .box{width: 10px;height: 10px;border-radius: 50%; background: red; position: absolute;left:0;top:0;} </style><body> <div class="box">&...
2020-03-15 18:13:39
420
原创 js--Promise的封装
// 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 12:33:03
347
原创 ajax---post函数封装
<script> document.onclick = function(){ var dizhi = "http://localhost/ajax/data/data.php"; ajaxPost(dizhi,function(res){ console.log(res); },"abc=987&a...
2020-03-11 21:27:47
355
原创 ajax——get函数的封装。
<script> // 相对路径 var url = "data/hello.txt"; // 服务器绝对路径 // var url = "http://localhost/ajax/data/hello.txt"; document.onclick = function(){ var xhr = new XMLHttpReque...
2020-03-11 21:17:49
247
原创 ajax GET和POST函数的封装。
<script> document.onclick = function(){ var url = "http://localhost/ajax/data/get-post.php"; ajax({ success:function(res){ console.log(res); ...
2020-03-11 21:13:11
353
原创 js 获取cookie值和删除cookie的值---函数封装
获取cookie的值。以及删除cookie的值。将其封装为函数。 function getCookie(key){ // 1.获取所有cookie let strC = document.cookie; // 2.使用"; "分割所有cookie，单独拿到每一条 let arrC = strC.split("; "); ...
2020-03-10 20:30:06
556
原创 js中的 cookie有效期和地址设置的函数封装。
cookie设置方法，有无有效期的和地址都能设置。没有有效期的和地址时也能设置成默认值。options为有效期和地址接收 function setCookie(key,val,options){ options为空没有设置 ops = ops || {}; // 有 有效期 let e = ""; if(ops.ex...
2020-03-10 19:32:35
336
原创 js 面向对象实现自动轮播图
js实现面向对象自动轮播图，自动轮播图运用于很多电商平台。也是前端必会的。一项内容效果。轮播图的实现。需要用到的主要知识点：运动 事件的绑定。事件的委托等等。css部分: <style> .box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidd...
2020-03-09 23:41:31
1077
原创 js 使用面向对象 写鼠标拖动效果 并储存于本地存储。
之前写过鼠标拖动视觉效果。但并未使用面向对象来书写。页面刷新后，无法保存在上次鼠标抬起的位置。这次补充这一效果。依然使用DIV加入样式来模拟。<style> #box{width: 100px;height: 100px;background: red;position: absolute;left: 0;top:0;} </style><bod...
2020-03-09 23:05:25
125
原创 js 涉及到的单词 语法的运用
do-while循环的与for循环，while循环的区别：一、循环结构的表达式不同do-while循环结构表达式为：do{循环体;}。for循环的结构表达式为：for（单次表达式;条件表达式;末尾循环体）{中间循环体；}。while循环的结构表达式为：while（表达式）{循环体}。二、执行时判断方式不同do-while循环将先运行一次，因为经过第一次do循环后，当检查条件表达式的值...
2020-03-08 21:54:09
288
原创 js 实现贪吃蛇游戏效果
用DIV模拟游戏画面范围，食物，以及贪吃蛇。限定食物出现的时机（为随机出现。俺不能超出画面范围。限定贪吃蛇游走范围）限定游戏规则：1，贪吃蛇，超出画面范围游戏结束。2，贪吃蛇，撞到自己游戏结束。<script> class Map{ constructor(){ // 设定贪吃蛇游走的范围。 this.w = ...
2020-03-07 22:01:46
181
原创 js 编写页面瀑布流布局
页面宽度，图片大小高度不同。如何在网页上呈现出更为美观的布局。有些网站的主体内容需要用户自己上传图片内容。用户上传什么样的图片，内容无法确定。页面为了美观需要按照一定的审美来排列。如何实现瀑布流布局如下：<style> .cont{margin: 0 auto;position: relative;} .box{float: left;paddi...
2020-03-05 23:31:50
137
原创 利用js模拟运动及透明度的变化。
运动透明度的模拟,都有起点，过程，以及终点。同时需要计时器来记录，开始和结束。每次运动之前，都要清除上一次计时器的效果。否则运动会加倍。// 参数2是对象，使用之前需要解析（遍历）function move(ele,obj,cb){ // 清除计时器 clearInterval(ele.t); ele.t = setInterval(() => { ...
2020-03-04 23:43:22
124
原创 js 利用DIV样式模拟烟花燃放样式
用DIV写出样式。用来表示烟花的燃放效果。利用js运动知识来完成这一运动效果动画。<style> #container{ width: 80%; height: 600px; border: 2px solid red; background: #000; margin:20px auto; cursor: pointer; ...
2020-03-04 23:22:27
155
原创 利用js实现匀速运动 逆战
首先要准备一个运动物体div，给div设置样式。下面是实现DIV匀速运动的js代码：let obox = document.getElementById(“box”);声明一个计时器T，作为每一次事件执行时都要清空上一次事件执行的效果所用。let t;document.onclick = function(){每次点击时，都要清空计时器。重新开始计算。否则每次点击都会使DIV获得点击...
2020-03-03 13:27:55
187
原创 逆战 (正则)用户名验证
用户名:首先要明确验证的规则:可以是数字字母 限制长度八个字符,必须是字母开头,不限制大小写。准备样式:引入样式:var opzh=document.getElementById(“pzh”)var opass = document.getElementById(“pass”);事件为输入时触发。opzh.οninput=function(){正则:字母开头,不限制大小写,数...
2020-02-27 20:17:53
229
原创 逆战————如何实现鼠标拖拽效果
实现鼠标拖拽效果，首先要明确这之中有多少个事件。1.鼠标需要按下。2.鼠标按下的同时，拖动鼠标。(鼠标的移动)。3.鼠标抬起。拿DIV作为一个拖拽的对象代码如下：以上代码实现。DIV被拖动的效果。...
2020-02-25 22:23:40
228
原创 逆战班学习之javascript内置对象之–String常用属性
字符的操作：可以使用类似于对象的操作方式，字符操作方法字符串中字符的个数，长度，都有对应的操作，操作字符的索引和字符的个数。对字符的增加 删除 修改 检查。以此达到所需求var str = “wo jiao PengZiHui”;charCodeAt() 查找字符编码console.log(str.charCodeAt(0));返回值是119，根据ASC II 字符代码表var...
2020-02-23 16:59:12
130
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人