![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
Shirley_0513
这个作者很懒,什么都没留下…
展开
-
typescript
安装ts版本的react项目create-react-app myapp --typescript一,声明数据类型var myname:string=""var my:string|number|boolean =12var munumber:number= 0 var mybool:boolean = truevar arr1:string[] = ['111','222','333']var arr2 :(string|number)[] = [1,'aaa','bbb',2]二,定原创 2020-08-31 17:01:41 · 158 阅读 · 0 评论 -
vue组件化
全局组件root component 父组件,跟组件 中包含两个navbar子组件scrit标签引入的弊端: 没有高亮,没有代码提示 ,css被遗忘模块化开发会引入 .vue文件 , 里面包含html js cssVue.component('navbar",{ template : "<div>navbar</div>" //dom结构})封装的组件访问不到外面的方法一个自定义组件中只能有一个根元素(不能有多个平级的标签)父子之间的状态无法共享,不能直接访问(原创 2020-07-16 09:51:39 · 115 阅读 · 0 评论 -
回调函数
回调函数就是一个参数 ,将这个函数作为参数传到另一个函数里面, 当那个函数执行完之后 ,再执行传进去的这个函数 ,这个过程就叫做回调 。function foo(){}foo(function(){}) //传进去一个匿名函数function foo(cb){}foo(function(){}) //cb和这个function等价关系, function(){}叫做回调函数场景 :1.不能复用的语句 ,可以放到回调函数中。2.解决异步调用的顺序。function foo( cb原创 2020-07-04 11:25:44 · 166 阅读 · 0 评论 -
Git
一, git的使用想要使用git, 要先做贡献者。git config --list 查看git设置的全局信息必须要设置 user.name 和 user.emailgit config --global user.name “xxx”git config --global user.email “xxx”设置错了,怎么删除git config --global --unset user.name如何用git去维护文件新项目: git init .git文件夹已有的项目 : gi原创 2020-07-03 11:28:37 · 120 阅读 · 0 评论 -
Gulp
一, gulp工具用自动化构建工具增强你的工作流程 , gulp安装Gulp工具 , 是基于node.js环境的 , 所以要现有node.js环境才行。npx 不需要安装到电脑里就可以用 ,gulp将开发流程中让人痛苦或耗时的任务自动化 ,从而减少你所浪费的时间 , 创造更大价值安装npm install – global gulp-cli 在命令行中去使用gulp命令npm install --save-dev gulp 在代码中去使用 require(‘gulp’)2.创建gu原创 2020-07-02 12:57:18 · 152 阅读 · 0 评论 -
nodejs小爬虫demo
var http = require('http');var https = require('https');// cnpm i -S cheeriovar cheerio = require('cheerio');//发起一个get请求//http.get(url)https.get('https://www.lagou.com/',(req)=>{ var res = ''; req.on('data',(chunk)=>{ //事件,可以分批次爬到数据原创 2020-07-01 18:54:49 · 132 阅读 · 0 评论 -
sass
一,简介sass文件的后缀名 ?xxx.sassxxx.scss把这种浏览器不认识的文件 , 转成浏览器认识的文件.sass | .scss -> .css怎么转换?1.用工具 gulp工具 webpack工具2.sass官网自带的工具3.网上有很多第三方的工具 koala(考拉)4.vsCode有插件 (方便学习) Easy Sass官网https://sass-lang.comhttps://www.sass.hk.sass -> 语法类似于pythonbo原创 2020-07-01 14:50:54 · 105 阅读 · 0 评论 -
require.js库
在ES6模块化没出现之前, 就已经有一个前端模块化库, 叫require.js优势是: 兼容性非常好。很多第三方js文件提供了require.js操作方式。比如jquery.js 没提供 export 接口 , 不能写 import $ from ‘jqeury.js’思想也是和es6模块化一样 , 解决冲突 , 解决依赖 ,兼容性更好。es6 有工具可以给语法转换成es5步骤:1.解释型库, 需要按照require.js库的语法进行模块化开发2.官网: requirejs.org3.定原创 2020-06-29 13:43:56 · 405 阅读 · 0 评论 -
模块化开发
一 , 模块化开发思想一个模块就是实现特定功能的文件 , 有了模块 , 我们就可以更加方便的使用别人的代码, 想要什么功能 , 就加载什么模块。模块化特点 :1 . 形成一个独立的文件 , 例如 .js文件2 . 有封闭的环境 。 只有对外提供接口 , 外面才能使用模块 。3 . 模块与模块之间可以相互调用。好处:1.可以使用第三方文件2.解决冲突3.解决依赖// 如果a.js 与 b.js 的文件中都有 tab这个方法 , 调用的时候容易冲突function tab(){}fu原创 2020-06-29 09:33:52 · 430 阅读 · 0 评论 -
jQuery的工具方法
一, JQ 中的 ajaxJQ的ajax也内置了promise规范$.ajax('data.json').then(function(data){ console.log(data);})$.get() 的底层是 $.ajax();$.post() 的底层是 $.ajax();$(’#elem’).click() -> $(’#elem’).on();get() 四个参数 url , data , success ,dataTypepost用法完全一样$.get('原创 2020-06-28 16:53:17 · 368 阅读 · 0 评论 -
搜索功能demo
<body> <div> <input type="text"> <button>search</button> </div> <ul></ul> <script> var input = document.querySelector("input"); var btn = do原创 2020-06-23 14:46:36 · 186 阅读 · 0 评论 -
Cookie
一,cookie 与 本地存储的区别Cookie 和storage 很像 , 但是有区别。1.cookie的存储量很小,一般大小不超过4kb,storage 5M。cookie的存储量小是因为cookie本身不是做存储的,主要是用来跟踪用户身份的。2.cookie需要服务器环境http的特点是无状态的,cookie用来跟踪用户身份。cookie可以在客户端与服务端来回传输。3.sessiongStorage 数据不共享 , localStorage数据共享 ,cookie是数据共享的 (同一原创 2020-06-22 16:22:37 · 869 阅读 · 1 评论 -
跨域
跨域 ,指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对Javascript施加的安全限制。www.a.com-> from.html -> ajax -> urlurl -> www.b.com跨域的原因是浏览器进行了限制一,同源策略同源策略: 是一种约定, 是浏览器最核心也最基本的安全功能 ,如果缺少了同源策略, 则浏览器的正常功能可能都会受到影响。同源指的是三个相同1.协议相同http://www.a.comhttps://www.原创 2020-06-22 11:45:38 · 116 阅读 · 0 评论 -
本地存储
用户的数据存储起来需要数据库,本地存储不需要服务器环境。一,基本用法1.存储sessionStorage.setItem('username','xiaoming');特点,sessionStorage存储的数据, 在页面之间不共享 ,浏览器关闭重新打开也没有了。是临时性存储的。localStorage 是永久性存储。页面之间是共享的。浏览器甚至电脑关了,也依然在。localStorage .setItem('username','xiaoming');2.取出localStorage.原创 2020-06-19 16:58:28 · 240 阅读 · 1 评论 -
PHP中操作mysql
mysql原创 2020-06-19 08:23:12 · 133 阅读 · 0 评论 -
PHP基础
http://localhost/phpmyadmin/http://localhost/phpmyadmin/index.phpphp基本操作PHP需要服务器环境支持php的后缀名是.php<?php?>.php文件是可以添加html代码的,但是html文件不能添加html代码原创 2020-06-18 15:49:56 · 107 阅读 · 0 评论 -
React
一,特点1.声明式设计,react采用声明规范,可以轻松描述应用2.高效,react通过对DOM的模拟(虚拟DOM),最大限度的减少与DOM的交互3.灵活,react可以与已知的库或框架很好地配合4.JSX,JSX是Javascript语法的扩展5.组件,通过react构建组件,使得代码容易得到复用6.单向响应的数据流,从而减少了重复代码二,视图层的开发模式与函数式编程react是...原创 2020-03-19 14:53:01 · 116 阅读 · 0 评论 -
NodeJS
一,简介Node是一个JS的运行环境,与浏览器一样Node是一个应用程序,需要安装,官网 :https://nodejs.org/en/中文官网,nodejs.cn建立js文件当前文件的运行方式1.打开cmd命令行2.切换到当前文件的所在目录3.node [空格] 文件名[01demo.js]声明,因为脱离了浏览器,所有DOM没有了,BOM没有了,只有ECMAScript语法了...原创 2020-03-16 14:56:16 · 184 阅读 · 0 评论 -
正则表达式
一,正则表达式正则表达式是由特殊字符组成的一组规则表达式,用于检测字符串是否符合某种规则正则的定义,一,/正则表达式/标识符 字面量二,new RegExp(正则表达式,标识符) 构造函数想要表达数字var numReg = /5/想要表达字符var strReg = /s/想要表达其他字符var otherReg = /%/检查一个字符串是否是“abcdef”定义一个正则...原创 2020-02-26 10:32:42 · 787 阅读 · 0 评论 -
Javascript中的构造函数
一,构造函数构造函数:指的是用来创建对象的一种函数es6之前, 类就叫构造函数 ,people类一个函数,当使用new调用的时候,会当作构造函数来执行ECMAScript 内置了很多构造函数 Array Object Function Date Error String Boolean Number等console.log(new Array());console.log(new O...原创 2020-01-28 14:29:33 · 271 阅读 · 0 评论 -
AJAX
一,AJAX简介Asynochronous JavaScript And XML 异步的JS和XMLXML是一种文档也是一种数据格式,叫做可扩展标记语言,与HTML相似。也是由标签书写,但是它的标签可以自定义XML在前端,已经被JSON代替,但称呼上依旧延续AJAX。AJAX的本质是通过JS发起HTTP请求,去服务器请求数据,回到浏览器中处理数据,更新页面,所以有的人管AJAX的特点叫做...原创 2020-01-25 13:56:03 · 172 阅读 · 0 评论 -
jQuery入门
一,简介jQuery是一个前端工具库,主要解决了操作DOM元素。jQuery对象jQuery是一个类,是一个函数,调用jQuery($)方法返回一个jQuery的实例,叫jQuery对象、jQuery对象是一个类数组对象,有数字下标和length属性。数字小标对应的是原生元素,length表示当前的jQuery对象中一共包含多少个原生元素。4选择元素$(selector)返回值是一个...原创 2020-01-22 18:58:39 · 1757 阅读 · 1 评论 -
es6基础
1原创 2020-01-22 18:47:25 · 285 阅读 · 0 评论 -
Javascript中的继承(未完)
一,原型式继承原创 2020-01-19 08:31:11 · 166 阅读 · 0 评论 -
Javascript中的对象
对象JS中数据类型分为两大类:基本类型数据, 引用类型数据 。主要区别是位于的内存位置不同。值类型:存储在栈中引用类型:存储在堆里对象是属性的无序集合。属性:分两部分:属性名、属性值。属性值可以是任意的数据类型: 字符串、数字、布尔值、null、undefined、数组、对象、函数等对象的属性操作可以通过两种语法: 方括号语法、 点语法主要区别:方括号里,是一个JS的执行环境 里面可...原创 2020-01-15 11:03:59 · 303 阅读 · 0 评论 -
Javascript中的数组
数组的作用 var arr = [23, 32, 4, 56, 176, 887, 9, 0, 54];使用数组中的值 数组[下标] 或者 数组[索引]数组.length表示数组的长度for循环最最常用的用途就是循环数组for (var i = 0; i < arr.length; i++) { console.log(arr[i])}一,数组的方法(es5之前)...原创 2020-01-15 11:01:56 · 284 阅读 · 1 评论 -
Javascript中的字符串
字符串具备许多的方法 ,任何的字符串方法不会改变原字符串,因为字符串的方法的操作都是在新的字符串中。JS是一门基于对象的编程语言。值类型中,除了undefined和null之外 都有包装类型字符串的包装类是 String布尔值的包装类是 Boolean数字的包装类是 Number一,字符串的方法 (es6之前)(1)字符串中的转义 \字符串定义""或者’’,可以使用单引号包裹双引号,...原创 2020-01-15 10:48:35 · 206 阅读 · 0 评论 -
Javascript中的节点
一,节点DOM将所有的文档中的内容都定义为节点根据不同的类型分为12种节点。需要记住的有: 1 元素 2 属性 3 文本 8 注释 9 文档 // 节点属性 节点值 节点名 节点类型 var box1 = document.getElementById("box1"); // 获取节点集合 var nodeList = box1.childNodes; // 获取不同的节...原创 2020-01-14 10:42:37 · 252 阅读 · 0 评论 -
javascript 函数(二)call,apply,bind
函数是工具 封装\复用\执行的时机函数中有3个内容: arguments\return\thisthis的变化规则: 谁调用 this就是谁 当没有明确的调用者时 指向window 严格模式下 调用者不明确时 this是undefinedcall\apply\bind函数拥有三个方法 其中 call apply是ES5之前就存在的 bind方法是ES5中新增这三个方法都一个特点:改变函...原创 2020-01-13 16:02:19 · 193 阅读 · 0 评论 -
Javascript中的BOM
Browser Object Model 浏览器对象模型window是BOMBOM由:location、 history、 document(DOM)、alert、confirm、console、prompt、navigator、getComputedStyle等等等等组成location 负责地址栏中的内容通过该对象的href属性可以跳转页面window.location.href =...原创 2020-01-13 11:37:56 · 141 阅读 · 0 评论 -
Javascript的小demo(2):放大功能
放大功能运用的是鼠标事件 onmousedown() , onmousemove(),onmouseup()计算鼠标距离视口左边 e.clientX计算元素距离视口左边 box.offsetLeft获取元素的宽度 box.clientWidth /box.offsetWidth<head> <style> .box1{ ...原创 2020-01-11 11:16:11 · 125 阅读 · 0 评论 -
Javascript的小demo(1):拖拽功能
1原创 2020-01-11 10:45:45 · 144 阅读 · 0 评论 -
javascript的快捷尺寸和快捷位置
快捷尺寸元素盒模型分content ,padding ,border , marginbox.clientWidth (包括content + padding)box.clientHeightbox.offsetWidth(包括content + padding + border )box.offsetHeightbox.clientLeft(左边框的宽度)box.clientTop...原创 2020-01-10 17:04:12 · 133 阅读 · 0 评论 -
Javascript中的事件
鼠标事件事件对象在编程时,起提供数据的作用function(e){}这里的e表示event事件在IE中兼容,用window.evente.screeX 鼠标距离屏幕左侧的距离e.screeY 鼠标距离屏幕顶部的距离e.clientX 鼠标到视口左侧的距离e.clientY 鼠标到视口顶部的距离e.pageX 鼠标到页面左侧的距离e.pageY 鼠标到页面顶部的距离(IE中没...原创 2020-01-10 16:39:53 · 343 阅读 · 0 评论 -
Javascript的浅拷贝与深拷贝
定义一个对象(这是原对象) var obj = { name: "zhangSan", son: { son1:"liSi", son2:"wangWu", son3:{ daughter:"zhaoLiu" ...原创 2020-01-08 11:38:11 · 98 阅读 · 0 评论 -
javascript 函数(一)
一个函数的组成,由4部分组成:1 function关键字 2 函数名(可以省略) 3 ()形参列表 4 {} 函数体定义函数有多种方式:我们现在学习两种1 函数声明function demo() { }2 函数表达式(本质,就是定义了一个变量保存了一个匿名函数)var demo1 = function() { }函数的参数:分两种。...原创 2020-01-04 10:40:03 · 390 阅读 · 0 评论 -
Javascript小知识点
一,JS的代码书写放在两个位置1:页面内的script标签内 2: 外部的JS文件中script标签的书写位置1: head标签里(此时一定要将代码放入window.onload) 2: body的末尾二,JS是一门弱类型语言,指的是在定义变量的时候,不需要指定类型。而且可以让变量先保存一个数字,再在程序运行的过程中,让该变量去保存其它类型的数据。数据类型:基本数据类型(原始数...原创 2019-12-31 11:07:53 · 140 阅读 · 0 评论 -
浏览器的兼容
一、主流浏览器(常用浏览器)Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游二、浏览器内核*Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器代表作品IE,因为IE捆绑在Windows中,所以占有极高的市场份额,又称IE内核或是MSHTML,此...原创 2019-12-25 14:37:25 · 362 阅读 · 2 评论 -
CSS Sprites的原理 (图像整合技术)
图像整合把一些有规律的小图标整合在一张图片上,利用背景图片的可移动性background-position去使用的技术优点: 减少图像的体积,减少向服务器的 请求次数减少网络带宽的占有提高网页加载速度提高用户体验度...原创 2019-12-25 08:56:27 · 308 阅读 · 1 评论 -
布局
一,媒体查询(响应式布局)通过媒体查询设置不同的设备或尺寸(设置不同的断点)添加对应的样式布局效果,使用媒体查询功能大于等于min-width时应用对应css效果@media only screen and (min-width:300px){ body{ background:#ff0; }}大于等于min-width,小于等于max-width时,应用对应css效果@m...原创 2019-12-23 09:11:46 · 219 阅读 · 0 评论