@西楚霸王-CSDN博客

原创 vue基础 v-系列

前端主要工作：官网：展示公司、炫酷(交互效果多)、数据比较少。基本上一定是前端做小程序：页面不一定很炫酷、数据不一定很多。一定是前端做app：展示公司、页面不炫酷、数据很多。大概率不是前端做后台管理系统：页面不炫酷、数据非常庞大。一定是前端做的功能：公司人员、薪酬福利、请假、公告H5活动页面：页面炫酷、数据不多、一次性使用。一定是前端做的Vue1、作者：尤雨溪2、官网：https://cn.vuejs.org3、渐进式JavaScript 框架渐进式：主张最少jquery:主要用来处

2020-12-09 19:36:28 1814

原创面向对象

面向对象一、面向对象概念面向过程（函数式）：会把整个开发分为若干的步骤，一步一步的去开发完成功能。不利于多人协作开发面向对象：会把一切的数据都看做对象对象：属性变量特点，特性名词方法函数功能动词实例：实例和对象之间的关系，狗和动物的关系。类：es5中没有类(class) 类是对象的模板面向对象特点：继承子类(派生类) 父类(基类，超类)多态封装JavaScript也是一种面向

2020-09-28 16:24:08 129

原创 async和await

async和awaitES2017年引入async函数，能够使异步操作更加简单。什么是async函数？async函数是generator函数的语法糖。async函数就是去掉generator函数中*，替换为了asyncasync函数经常搭配await语句使用。await其实就是替代yied表达式.aync和await，就是一种基于promise的generator的语法糖。一般使用async…await来优化promise的使用。一、async1)async是用来修饰函数的2)修饰后的

2020-09-28 16:23:18 302

原创 promise

promise是一种异步编程解决方案，回调函数也可以解决异步编程问题,如果层次过深，会出现回调地狱问题下面的代码，先打印2再打印1 因为定时器是异步执行的，互不影响，所以时间短的先执行 function fn1() { setTimeout(function () { console.log(1); }, 1000) } function fn2() {

2020-09-27 19:51:07 108

原创模拟Iterator机制（数组、对象）、Generator

//模拟Iterator机制（遍历器）数组 function makeIteractor(array) { var nextIndex = 0;//遍历过程中的数组的索引 return { next: function () { if (nextIndex < array.length) { return { val.

2020-09-26 21:56:56 114

原创拖拽、全局捕获、多物体运动、碰撞检测、运动的封装、多物体运动、减速运动、回调函数

拖拽 <style> div { width: 100px; height: 100px; background: deeppink; position: absolute; left: 50px; top: 50px; } </style></head><body&gt

2020-09-02 20:47:52 166

原创 CSS3简介、CSS3常用边框属性、 CSS3背景属性、CSS3渐变属性、多列布局

CSS3简介CSS3是最新的CSS标准。CSS3新增选择器属性选择器以box开头<style> div[class^="box"] { background:red; }</style><div class="box">box</div><div class="abox">abox</div><div class="boxa">boxa</div>&

2020-09-01 00:13:44 211

原创 HTML5中新增的布局标签、新增的其他标签、新增标签HTML5兼容、HTML5已移除的标签、新增多媒体标签

HTML5中新增的布局标签html 1990 html4.0.1 1997 html5 2008 稳定版 2012年新增的结构标签（更加语义化）header标签<header>这里是头部区</header>footer标签<footer>这里是页脚区</footer>main标签<main>这里是主体区</main>nav标签<nav>

2020-08-31 23:15:52 200

原创 JavaScript事件、事件的绑定与取消、事件流、键盘事件、滚轮事件、事件的委托

JavaScript事件一、事件基础——事件函数与事件对象事件函数事件触发的时候，要执行的函数事件对象事件触发时，浏览器会将与事件相关的信息包装为对象传递（window.event）事件对象包含一些常见的属性：事件名称，事件目标对象，鼠标位置信息等…事件对象的属性：target：触发事件的对象type:事件的类型clientX,clinetY 鼠标相对于屏幕的位置pageX,pageY 鼠标相对于页面的位置 document.query

2020-08-31 20:28:11 253

原创 BOM、body的位置属性

BOM、body的位置属性一、BOMBOM，browser object model 浏览器对象模型。用来实现js与浏览器的交互BOM的核心对象是window，是Global对象(全局对象，顶级对象)。全局变量、函数、对象都会自动成为window对象的属性、方法。document对象也是window对象的属性全局变量自动成为window对象的属性 var a=10;//全局变量会被追加为window对象的属性 console.log(a); console

2020-08-28 18:03:58 245

原创定时器和运动、Math

定时器和运动一、定时器在JavaScript中有两个setTimeout(code,time) 间隔固定时间之后，执行代码一次setInterval(code,time) 每隔固定时间执行代码一次两个定时器都可以实现定时器功能：function fn() {console.log(‘1’);setTimeout(fn, 1000);//启动一个定时器，1000秒钟之后，调用fn函数}fn();停止定时器：clearTimeout(id) 停止指定的定时器clearInt

2020-08-28 10:12:04 143

原创 DOM

DOM一、概念文档对象模型，在JavaScript中，加载HTML页面时会将HTML页面描绘成一个由节点组成的节点树(DOM树)在DOM中，节点之间的关系有两种：父子关系兄弟关系节点：HTML页面的内容，都可以被称为节点节点分类：元素节点(标签)、文本节点(文字)、属性节点(属性)允许开发人员通过JavaScript来操作HTML和XML二、根据节点知识进行元素查找（1）获取子节点(直接后代)父节点.childNodes: 直接后代（文本节点和元素节点）父节点.child

2020-08-27 21:21:11 191

原创关于map()、parseInt()函数面试题

关于map()、parseInt()函数面试题var arr = [“5”,“8”,“23”];var arr1 = arr.map(parseInt);console.log(arr1); var arr1 = arr.map(parseInt); //这句代码等价于 var arr1 = arr.map(function (item, radix) { return parseInt(item, radix); });

2020-08-27 16:52:20 187

原创数组

数组一、概念什么是数组？数组是JavaScript内置对象 Array，数组可以保存大批量的数据如何检测是否是数组类型typeof一般用于检测基本类型，而检测对象类型，结果均为object，不精确；instanceof一般用于检测引用数据类型(对象类型) 返回结果为布尔值 var arr = new Array(); console.log(arr instanceof Array);//true创建数组？var arr = new Array() 定义一个空数

2020-08-26 19:51:03 144

原创日期对象、字符串对象

日期对象、字符串对象一、对象对象的概念：在JavaScript中一切内容都可以被抽象为对象包装对象：将基础类型包装为对象类型对象：属性特点变量方法功能函数内置对象：Date Array String RegExp …二、日期- Date是JavaScript中为日期和时间的使用而封装的一个对象1.使用var date = new Date();//获取当前时间对象2.常用方法获取年月日时分秒星期值 v

2020-08-25 19:49:20 369

原创 PS常用工具、常见的图片格式和特点、 IE 浏览器常见兼容问题、CSS Hack

PS常用工具常见的图片格式和特点、 IE 浏览器常见兼容问题、CSS HackPS常用工具移动工具移动工具主要负责图层、选区、等的移动、复制操作。快捷键：v抓手工具快捷键：h空格 + 鼠标左键拖动，空格键可临时转换为抓手工具。放大镜工具放大镜工具可以放大或缩小图像。放大：点击放大工具，点击图像。Ctrl+ 加号。按住 alt+ 鼠标滚动滚轮。缩小：点击缩小工具，点击图像。Ctrl+ 减号。按住 alt+ 鼠标滚动滚轮。文字工具快捷键：t文字工具是用来输入文本

2020-08-24 22:52:11 392

原创 CSS精灵、滑动门技术、 BFC、小箭头、文本溢出处理、阿里矢量图标

CSS精灵、滑动门技术、 BFC、小箭头、文本溢出处理、阿里矢量图标CSS精灵什么是 CSS 精灵英文叫法 CSS sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位“ <style> .box { width: 50px; height: 50px; background-image: url(./images/jingling.jpg); } .box1 {

2020-08-24 22:23:23 145

原创页面布局圣杯，双飞翼，等高

圣杯布局1.设置三个盒子，左侧固定，右侧固定，中间自适应，都设置浮动，中间先解析2.左侧盒子，margin-left:-100%,右侧盒子设置，margin-left: -本身宽度3.给父标签设置内边距，然后给左右两侧设置定位移动圣杯布局缺点：当中间部分宽度小于左侧部分宽度时，布局会混乱 - <style> * { padding: 0; margin: 0; }

2020-08-24 09:50:02 172

原创常见问题以及属性、浮动和定位对比、透明度属性（兼容）、盒模型特点

布局技巧盒模型特点所有的子标签和文字都在内容区域默认标签的宽高描述的是内容区域（content-box）边框由三部分组成：宽度，样式，颜色内边距是内容到边框的距离，外边距是盒子外部的空间默认内边距拥有背景色，外边距没有背景色浮动和定位对比CSS 中能够使标签脱离文档流的属性有：float:left;float:right;postion:absolute;position:fixed;对于使用 float 脱离文档流时，其他盒子会无视这个标签，但其他盒子内的文本、图片、

2020-08-23 23:37:51 232

原创定位、圆角属性

定位、圆角属性定位的应用场景和基本原理定位的原理在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性，允许定义标签框相对于其正常位置应该出现的位置，或者相对于父标签、另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置positionstatic 默认静态定位默认

2020-08-23 23:13:17 116

原创浮动、css三大特性、伪元素

浮动、css三大特性、伪元素css三大特性层叠性样式冲突就近原则，也就是后引入生效样式不冲突的代码不会受影响 .box { width: 300px; height: 300px; background-color: red; background-color: blue; } .box { width: 500px;//蓝色 }继承性子标签继承父标签的样式文本

2020-08-23 22:53:57 517

原创表单标签、选择器进阶、背景属性

表单标签、选择器进阶、背景属性表单标签注册和登录目的：收集用户信息,能够输入内容input标签text文本输入类型<input type="text" name="username">password密码类型<input type="password" name="password">radio单选按钮同一组单选框 name 必须相同<input type="radio" name="sex" value="b

2020-08-23 21:12:57 114

原创 CSS基础

CSS基础css简介css是什么Cascading style sheets (层叠样式表)（级联样式表）css作用改变文本内容：(文本大小，文本颜色，对齐方式…)*改变标签的样式改变页面的布局css引入方式行内引入（行内式） <p style="color: red;font-size: 20px;"> hello world </p>特点：结构层和表示层完全不分离，代码冗余，只作用于当前

2020-08-23 18:05:51 155

原创初识HTML5

初识HTML5web的发展史web1.0 时代：简单的静态页面早期三大门户搜狐新浪网易web2.0时代：更注重用户之间的交互用户即是信息的消费者也是制造者微博web3.0时代：人工智能、复杂的页面功能、即时通讯web的前景：pc端的网页、移动端的网页、ios androidvscode编译器的使用快捷键复制本行到下一行 shift+alt+↓复制本行到上一行 shift+alt+↑查找 ctrl+F替换 ctrl+H同时写多行 alt+鼠标左键

2020-08-23 16:40:19 250

原创函数进阶

函数进阶一、变量作用域变量的作用范围在ES5中，根据变量的作用范围不同，将变量分为：全局变量：在整个文档中都有效（任何地方都能访问，任何地方都能修改），在函数外声明的变量都是全局变量 for (var i = 0; i < 3; i++) {//i全局变量 console.log(i);//0 //1 //2 } console.log(i);//3 var a = 10;//全局变量 console

2020-08-22 15:12:31 146

原创 JavaScript面试考试题（一）

1、js数据类型？6大类型基本数据类型：Number String Boolean null undefined复杂类型：Object，array，function2、null和undefined的区别？Null访问一个不存在对象返回的值，表示空对象Undefined：访问一个声明完没有赋值的变量返回的值，表示空变量3、双等号与三等号的区别？==,判断相等，判断的过程中会隐式转换为number类型进行比较 “10”==10 true=== 恒等，严格相等，数值要相等，数据类型也要相同

2020-08-21 22:50:48 510

原创 JavaScript函数

JavaScript函数JavaScript 函数是被设计为执行特定任务的代码块。JavaScript 函数会在某代码调用它时被执行。函数就是一种封装。一、函数1.声明函数和调用函数（函数需要调用才能执行）//函数的定义顺序与调用顺序无关(预解析)函数名();//调用函数function 函数名(){//声明函数函数体;}show();function show() { for (var i = 0; i < 5; i++) {

2020-08-21 21:19:09 144

原创元素查找

元素查找1.根据id查找元素document.getElementById(id)document.getElementById('btn');2.根据标签名查找元素document.getElementsByTagName(tagName)node.getElementsByTagName() 在指定节点下找元素返回值是一个集合，集合中的每一个数据都有索引，从0开始[索引]集合名var os=document.getElementsByTagName('div');var

2020-08-20 23:25:28 195

原创 JavaScript程序结构

程序结构程序的执行顺序，分为顺序结构、分支结构、循环结构三种一、顺序结构程序默认的结构二、分支结构分支结构的特点：在同一个分支结构中只会执行一个分支（1）ifif(条件){代码块1；}执行规则：若条件成立在，则执行if语句对应的代码块var age = 26; if (age >= 18) { alert("你已经成年");//你已经成年 }在同一个分支结构中只会执行一个分支，因为两个if条件是独立的，所以都会输出var a = 5;

2020-08-20 20:49:38 444

原创 JavaScript运算符

JavaScript运算符能够进行运算的符号,根据参加运算的操作数的个数，分为：一元(一目)运算符、二元(二目)运算符、三元(三目)。算数运算符(+)(-)(*)(/)(%)（1）大多数情况用于数值，加号比较特殊，可用于字符串拼接，运算符两边有一个为字符串，则执行拼接操作，拼接结果是字符串类型console.log(33+"a");//33a 33是数值型，经过拼接被隐式装换成了字符串（2）自增自减运算符：对于变量自身来说，运算符的前置和后置无影响var a = 1;a++;cons

2020-08-20 19:14:13 73

原创 JavaScript数据类型

JavaScript数据类型*基本数据类型（原始数据类型、简单数据类型）（1）数值类型（number）所有的数字，无论整数，浮点数。（2）字符串类型（string）用单引号或者双引号包括的所有字符（3）布尔类型（boolean）只有true和false两个取值（4）null(空)有两种产生null的情况：一种是直接为变量赋值为nullval a = null;另一种是当获取不到标签时

2020-08-19 21:21:55 133

原创 JavaScript简介

JavaScript简介JavaScript是什么？ JavaScript是一门弱类型（变量在定义的时候是没有数据类型的，数据类型取决于保存的数据）的语言，同时也是一门解释性语言（解释型语言的程序不需要在运行前编译，在运行程序的时候才翻译，专门的解释器负责在每个语句执行的时候解释程序代码。这样解释型语言每执行一次就要翻译一次，效率比较低）,JavaScript是世界上最流行的脚本语言（脚本语言：执行环境是浏览器）。JavaScript的历史 JavaScript最早...

2020-08-18 22:50:49 161

原创 cenos基本信息和ssh

cenos基本信息和sshcenoscenos是什么？ cenos（英文全称为Community Enterprise Operating System，中文意思是社区企业操作系统）是Linux发行版之一，它是来自于Red Hat Enterprise Linux,依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定性的服务器以cenos替代商业版的Red...

2019-12-18 20:27:00 258

qq_41027812的博客