- 博客(27)
- 收藏
- 关注
RSS订阅原创 react项目:Ant-Design篇
一、创建react项目打开命令窗口，创建react项目：npx create-react-app my-reactsrc/新建component文件夹放组件，在App.js里可以引入about组件src/component/about:rfce回车(这需要安装一个VScode插件ES7 react/redux），组件内容 import React, { useState， useEffect } from "react";npm i axiosimport axios from “a
2020-08-08 14:46:47
1342
原创 使用Vue创建一个项目的步骤
vue create xxx看路由官方文档，动态路由匹配 ，编程式导航 ，命名路由，命名视图， 重定向， 路由传参$route创建好，进入文件夹npm run serve创建一个 .prettierrc: 用来调规范格式报错{“singleQuote”: true,“semi”: false,“trailingComma”: “none”}src/assets/images用来放图片,1、图片可以直接写路径src="";2、如果图片写在JS文件里，需要在data(){return}里
2020-07-18 15:22:11
943
原创 正则
// RegExpvar str = prompt()// var reg = new RegExp('a')// 字面量创建正则：字面量定义正则的话两条斜线之间的任意字符都是有含义的，都会纳入到正则判断里// var reg = /a/// var reg = /[abc]/ // abc三个字母任意出现一个就行// var reg = /[abc]1/ // 匹配 a1 b1 c1// var reg = /[0-9]/ // 数字// var reg = /[a-z]/ // 小写字
2020-05-17 20:28:09
100
原创 事件冒泡、监听、委托
事件冒泡事件冒泡是从自己开始一层一层往外传播事件的过程。一个完整事件流一定是包含捕获 -> 目标 -> 冒泡 这样一个完整过程，但是浏览器在处理事件的时候默认在冒泡阶段处理IE浏览器不认识捕获，只能在冒泡阶段处理如果某些情况下不希望冒泡，那么可以阻止阻止冒泡的兼容写法：阻止事件从当前元素往外传播document.querySelector('#father').onclick = function (e) { console.log('father') e = e || win
2020-05-17 19:03:10
110
原创 操作位置动画
点击事件，元素左移var div = document.querySelector(‘div’)document.querySelector(‘button’).onclick = function () {var timer = setInterval(function () {// offsetLeft先获取，获取之后+5，然后再赋值给样式的left，不要忘了单位// offsetLeft是实时获取的，只要样式发生了变化，offsetLeft随之更新了div.style.left = div
2020-05-16 22:15:59
83
原创 DOM
获取DOM元素document.getElementById(’’)document.getElementsByClassName(’’)document.getElementsByTagName(’’)querySelector只能取到第0个满足选择器的元素document.querySelector(’‘’）把所有满足选择器的元素全部取到document.querySelectorAll(’’)后代、子代选择器都可以在这里直接写document.querySelector(‘div p
2020-05-16 22:00:28
106
原创 JavaScript-日期
var date = new Date()console.log(date.getFullYear())console.log(date.getYear()) // 现在已经不用了，获取的是1900到当前年份的差值console.log(date.getMonth()) // 月份是 0~11console.log(date.getDate()) // 得到日期的号数console.log(date.getHours())console.log(date.getMinutes())cons
2020-05-15 09:04:16
116
原创 数组去重
方法一：for循环var arr = [4,5,3,5,6,6,5,6,7,88,13]//比较length-1趟for (var i = 0; i<arr.length-1;i++) {//当前这一趟比较从i+1开始，到length-1 结束for (var j=i+1; j<arr.length; j++){if(arr[i]===arr[j]){arr.splice...
2020-04-27 20:03:55
95
原创 array.api
var arr = [1,2,3,4]var arr1 = [5,6,7,8]concat数组合并，并不会修改源数组，而是得到一个新的数组var arr2 = arr.concat(arr1, [10,10,10])console.log(arr, arr1)console.log(arr2)join以指定字符来把数组每个元素拼接成一个字符串var str = arr.joi...
2020-04-26 19:07:58
77
原创 数组
数组声明1、字面量的方式声明数组var arr = [3,4,5,6,7]2、new运算符声明数组。传多个参数，这些参数就都是数组的值var arr1 = new Array(4,5,6,7,8)//如果要访问数组元素，可以通过索引(下标)都是从0开始的console.log(arr[1]) //4 用new运算符声明数组，但是实参只传递一个，这一个实参是数组...
2020-04-21 18:10:55
77
原创 JS--switch-case
多分支语句switch (表达式) { case 值1: *如果表达式的值跟case的值1是一样的，那么这里的代码就会执行* break; case 值2: *如果表达式的值跟case的值2是一样的，那么这里的代码就会执行* break; case 值3: *如果表达式的值跟case的值3是一样的，那么这里的代码就会执行* break; def...
2020-04-21 17:26:59
314
原创 JS--if
if基础单分支if (判断条件) {（当条件成立的时候执行的代码）}双分支if (判断条件) {（条件成立时执行的代码）} else {（当条件不成立的时候执行的代码）}多分支if (判断条件1) {// 当条件1成立的时候执行的代码} else if (判断条件2) {// 当条件1不成立但是条件2成立的时候执行的代码} else if (判断条件3) {...
2020-04-21 17:14:03
161
原创 响应式布局
响应式布局绝大部分项目:PC端 ~~> 官网移动端 ~~> 移动端网页,app,小程序… 响应式布局: 为了适应不同的设备,分辨率 不同的设备(pc电脑端 平板电脑 手机端) x 宽度 500px<= x <800px css 1 800px<= x <1000px css 2 1000px<...
2020-03-24 22:38:26
61
原创 flex布局
flex-grow:;数字不带单位,定义项目剩余的宽度进行扩张(放大)flex-shrink:;数字不带单位,项目总宽度超出容器时的缩小设置0 本身的大小,不缩小也不放大1 平均分配,默认值flex-basis: 0%;项目的长度 综合写法: felx:放大 缩小 长度; 一般后两者默认不写多列布局:column-count:;分列column-gap:;列间距colu...
2020-03-23 20:48:48
85
原创 弹性盒布局--骰子
<style type="text/css"> *{margin: 0;padding: 0;} /*body{display:flex;}*/ div{ width: 100px; height: 100px; background: #ccc; margin: 100px; border-radius:10px; box-shado...
2020-03-22 14:55:22
221
原创 背景相关属性
背景相关属性: background-origin:;背景原点(起始位置) border-box padding-box content-box background-clip:;背景裁剪 border-box padding-box content-box background-size:水平大小 垂直大小;背景图...
2020-03-22 14:54:30
68
原创 flex相关属性
calc(x - y)方法运算符号前后一定要空格 标准盒模型: box-sizing:content-box; 宽高是独立的 内边距是独立的,会把元素撑大, 边框是独立 注:宽高不包含内边距和边框 怪异盒模型: box-sizing:border-box; 宽高包含内边距和边框 怪异盒模型触发方式: 方式一: 丢失<!DOCTYPE html> 在ie...
2020-03-22 14:42:44
112
原创 阴影
文本阴影: text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色; text-shadow:第一份阴影,第二份阴影;盒子阴影:box-shadow:水平阴影 垂直阴影 模糊度 阴影大小 颜色 内外阴影(可选);默认影子在外面(忽略不写)设置影子在内部( inset ) box-shadow:第一层阴影,第二层阴影,第三层阴影; 哈哈哈哈哈哈哈 ...
2020-03-22 14:34:46
59
原创 阿里图标库
怎么用阿里图标库一、登录账号二、在图标库搜索图标，并加入购物车三、新建文档四、保存到本地调用图标方式一: 在本地引入1: 去官网下载2: 在页面引入外部css文件3: 挑选对应的类名 方式二:在线引入 1: 在页面引入链接地址 2: 挑选对应的类名 3: 去官网下载 4: 修改引入css文件的路径...
2020-03-20 11:41:13
323
原创 选择器
渐进增强:(从小到大) 先保证最基本的功能 ~> 用户体验的提升优雅降级:(从大到小) 先针对版本较高的设备进行项目构建,保证用户体验的完美 ~>牺牲一些效果,保证最基本的功能选择器(选择符): id class 类型(div span...) 后代选择器 伪类选择器 伪元素选择器... 属性选择器: e[attr] 选中e元素,且e元素有at...
2020-03-18 21:15:11
60
原创 表单
action=“提交地址”；method=“提交方式”；get postinput type="radio" 单选按钮 注意：同一组的name属性值必须一致，才可以大道互斥的效果 checked="checked"默认选中 type="checkbox"多选框 注意：name值不需要一致 disabled="禁止选择"...
2020-03-17 19:41:56
89
原创 HTML5基本标签
语义化标签:(有指定内容的仓库)是一个容器<水果仓库>放水果<水果仓库><服装仓库>放服装</服装仓库> 语义化标签: section: 类似于div,偏向画结构 article: 偏向于内容展示 aside: 偏向于在旁边的内容,在一侧的 header: 内容的头部,网页的头部,头部区域 footer: 内...
2020-03-17 19:36:28
95
原创 HTML-动态
过渡：让元素的动画发生平滑的效果，而不是生硬直接的效果1:什么属性在做动画 transition-property: 属性1，属性2，属性n；2：过渡时间需要多久 transition-duration:2s;3：等待时间 transition-delay: 3s;4：动画类型，不写默认匀速 5：综合写法 transition:过渡属性 过渡时间 等待时间 动画类型；o...
2020-03-15 19:52:19
180
原创 HTML5入门笔记
i/em: 倾斜，只占据自己内容大小的位置，em有语义化，权重更高b/strong: 加粗u: 下划线,只占据自己内容大小的位置 hr:水平线 br:换行 特殊符号： ；:空格； <；/>；:左右尖括号 ©；：版权号，其余的直接搜索列表大全 sup: 上标 ...
2020-03-15 19:39:04
153
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人