- 博客(31)
- 收藏
- 关注
RSS订阅原创 CSS 选择器
一、基本选择器* 通用元素选择器，匹配任何元素 E 标签选择器，匹配所有使用E标签的元素 .info class选择器，匹配所有class属性中包含info的元素 #footer id选择器，匹配所有id属性等于footer的元素二、多元素的组合选择器E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔E F 后代元素选择器，匹配所有属...
2020-03-24 22:56:06
127
原创 vue 和 react 的区别
vue 和 react 的区别Vue 的表单可以使用 v-model 支持双向绑定，相比于 React 来说开发上更加方便，React的数据流动是单向的。在React中要想更新状态，必须调用setState方法，而在Vue中只需要通过this的某种方式去更新state中的数据，这种方式更加方便并且 Vue 的底层使用了依赖追踪，页面更新渲染已经是最优的了，但是 React 还是需要用户手...
2020-03-23 23:01:03
162
原创 v-show和v-if的区别
v-show和v-ifv-showv-show 只是在 display: none 和 display: block 之间切换。无论初始条件是什么都会被渲染出来，后面只需要切换 CSS，DOM 还是一直保留着的。v-show：false 相当于 给元素加了 display：none,隐藏起来。v-ifv-if 的话就得说到 Vue 底层的编译了。当属性初始为 false 时，组件就不会被...
2020-03-22 23:02:33
194
原创 防抖和节流
防抖和节流防抖防抖函数的作用就是控制函数在一定时间内的执行次数。防抖意味着规定时间内函数只会被执行一次，如果规定时间内再次被触发，则重新计算延迟时间。举例说明：小可爱最近在减肥，但是她非常喜欢吃零食。为此，与男朋友约定好，如果10天不吃零食，就可以购买一个口红。但是如果中间吃了一次零食，那么就要重新计算时间，直到小可爱坚持10天没有吃零食，才能购买一个口红。… 这就是 防抖。考虑一个场景...
2020-03-21 22:33:39
105
原创 localstorage和sessionstorage和cookie的区别
localstorage和sessionstorage和cookiesessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。sessionStorage用法：sessionStorage.setItem('key', '...
2020-03-20 23:22:54
91
原创 常用的git命令
常用的git命令1. git init初始化：创建一个git仓库，创建之后就会在当前目录生成一个.git的文件2. git add .他会监控工作区的状态树，使用它会把工作时的所有变化提交到暂存区，包括文件内容修改(modified)以及新文件(new)，但不包括被删除的文件。3. git commit -m "xxx"主要是将暂存区里的改动给提交到本地的版本库。4. git sta...
2020-03-19 21:36:28
81
原创 函数的变量声明提升
1.作用域变量存在的范围就是变量的作用域。全局作用域变量在程序中一直存在，所有地方都可以读取。局部作用域变量只在函数内部存在函数外部声明变量就是全局变量函数内部定义的变量外部无法读取，顾称 局部变量使用规则：函数允许访问函数外的变量整个代码结构中只有函数可以限定作用域作用域规则首先使用提升规则分析如果当前作用域中有了该变量，就不再考虑外面的同名变量变量声明提升函数内部会...
2020-03-18 23:04:57
172
原创 react 生命周期
react 生命周期组件的生命周期可分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOM生命周期的方法有：componentWillMount： 在渲染前调用,在客户端也在服务端。componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDO...
2020-03-17 23:22:39
78
原创 vue 路由守卫
路由守卫router.beforeEach((to,from,next) => { })全局前置守卫回调函数中的参数:to：到哪里去，from：从哪里来，next：是一个函数，表示继续执行。下面例子，判断to.path当前将要进入的路径是否为登录或首页，如果是就执行next()，展示当前界面。如果不是，就弹出alert，然后跳转至登录界面。这样就可实现，用户在未登录状态下，保...
2020-03-16 23:01:04
294
原创 vue 组件的生命周期
vue 组件的生命周期beforeCreate实例被创建出来，此时还没有初始化好 data 和 methods 属性;created实例创建完毕，此时 data 和 methods 已经创建完毕，还没有开始编译模板;beforeMount此时已经完成了模板的编译，但还没有挂载到页面中;mounted此时编译好的模板挂载到了页面指定的容器中显示;beforeUpdate状态更新...
2020-03-15 22:45:25
96
原创 vue 基本路由的使用
基本路由的使用router-view：在路由中需要设置一个节点 router-view，用来显示我们路由对应的组件。router-link：相当于一个a标签。component：是属于vue中的特殊节点，在页面中不会直接显示。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...
2020-03-14 21:49:05
141
原创 js写倒计时
倒计时详情代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>倒计时</title> </head> <body> <div id="shijan"></div> <sc...
2020-03-13 23:00:30
70
原创 js实现简单的下拉菜单列表
下拉菜单效果图：基本代码 如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style type="text/css"> html,body{ height:100%; ...
2020-03-12 23:07:43
1344
原创 JavaScript 正则表达式实现表单验证
表单验证效果图：输入格式正确：输入格式错误：基本代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>表单验证</title> <style type="text/css"> input{ ma...
2020-03-11 22:36:40
340
原创 JQuery 实现简单的聊天对话框
聊天对话框效果图：基本代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>聊天对话框</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min...
2020-03-10 21:58:44
1147
原创 JQuery 实现三级菜单
三级菜单效果图：文中所用图片如下：基本代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>三级菜单</title> </head> <script src="https://cdn.bootcss.c...
2020-03-09 22:47:30
1128
原创 jQuery 写手风琴
手风琴基本代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>手风琴</title> <script src="js/jquery-1.11.3.min.js"></script> <style...
2020-03-08 22:58:36
106
原创 jQuery 实现楼梯滚动效果
楼梯滚动效果<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼梯滚动效果</title> <script src="js/jquery-1.11.3.min.js"></script> <style typ...
2020-03-07 20:29:35
224
原创 点击加入购物车，数据存localStorage里
点击加入购物车<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>点击加入购物车</title> <style type="text/css"> *{ margin:0; padding:0; } ...
2020-03-06 21:07:43
498
原创 html css 圣杯布局
圣杯布局基本代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> *{ margin:0; padding:0; } ...
2020-03-05 21:54:31
262
原创 原生 js 进度条拖拽
进度条拖拽基本代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #test{ width: 600px; height: 300px; margin: 5...
2020-03-04 12:53:06
190
原创 原生js写表格的添加与删除
表格的添加与删除首先分析思路，添加：即获取用户在表单中输入的数据，然后通过表格显示出来；删除：即点击“删除”，将表格中的一些数据删除。做好之后的大致效果图如下：点击 ‘添加’ 按钮，把表单中的数据提交到表格内，点击表格中的 ‘删除’ 按钮，即删除当前行。具体代码如下：<!DOCTYPE html><html> <head> <me...
2020-03-03 22:02:25
398
原创 原生js实现选项卡切换
选项卡切换点击不同的 li 切换不同的 div代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选项卡</title> <style type="text/css"> *{ margin:0; ...
2020-03-02 19:29:24
186
原创 js实现弹出窗口的拖拽功能
弹出窗口的拖拽拖拽功能运用到的有 onmousedown 事件，onmousemove 事件以及 onmouseup 事件弹出窗口基本步骤：1、点击点击弹出窗口按钮弹出窗口；2、窗口弹出后，鼠标点击标题的时候我们需要获取鼠标所在位置的横纵坐标，然后获取盒子离页面的横纵方向的距离；3、计算出鼠标相对盒子的距离；4、当鼠标移动的时候，获取鼠标移动的距离，在用鼠标此刻的位置减去鼠标相对盒子的...
2020-03-01 15:43:45
1095
原创 Date 时间对象
Date 时间对象Date对象是js原生的时间库， 用于处理日期和时间。Date.now()：返回当前距离1970年1月1日00:00:00的毫秒数。Date可以当做构造函数使用，对它使用new命令，会返回一个Date的对象实例，不加参数，代表当前时间。对Date求值，返回一个字符串，代表对应的时间。Date()的动态方法Date()Date() 函数可以直接调用，返回一个当前日期和时...
2020-03-01 00:01:15
140
原创 js -数组常用方法
js数组方法JavaScript中创建数组有两种方式：使用 Array 构造函数：var arr = new Array(); //创建一个空数组var arr1 = new Array(5); // 创建一个包含5项的数组var arr2 = new Array("live","list"); // 创建一个包含2个字符串的数组使用数组字面量表示法：var arr3 ...
2020-02-28 23:52:37
261
原创 css - 的几种定位
CSS Position(定位)position 属性值的含义：staticHTML 元素的默认值，也就是说没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。div { position: static; border: 2px solid #ccc;}relative相对定位元素的定位是相对其自身的位置...
2020-02-27 23:37:54
87
原创 JQuery - 淡入淡出效果
jQuery - 淡入淡出通过 jQuery，您可以实现元素的淡入淡出效果。实例jQuery 拥有下面四种 fade 方法：jQuery fadeIn()jQuery fadeOut()jQuery fadeToggle()jQuery fadeTo()jQuery fadeIn() 实现淡入效果，语法如下：$(selector).fadeIn(speed,callback);...
2020-02-26 19:30:27
233
原创 react常见面试题
常见react面试题调用 setState 之后发生了什么？在代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。在 React 得到元素树之后，React 会自动计算出新的树与老树的节...
2020-02-25 23:53:39
294
原创 react--基础路由
react 基础路由首先需要安装路由插件： npm i react-router-dom 然后在App.js中导入：import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';写两个组件:Home组件：import React, { Component } from 'reac...
2020-02-24 20:38:04
78
原创 React---Refs
React RefsReact 支持一种非常特殊的属性 Ref ，可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许引用 render() 返回的相应的支撑实例（ backing instance ）。这样可以确保在任何时间总是拿到正确的实例。使用方法绑定一个 ref 属性到 render 的返回值上： <input ref="myIpt" />在其它...
2020-02-23 19:59:02
71
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人