郝鑫芸-优快云博客

原创 webpack笔记

课程介绍webpack：loader、plugin、devtool、性能优化、tree shaking、code split、caching、lazy loading、library、sgimming、HMR、resolve、optimaization、dll、webpacks、production、development、eslint、babel、pwa;webpack简介webpack是一种前端资源构建工具，一个静态模块打包器（module bundier）,在webpack看来，前端的所有资源

2023-07-05 15:10:00 109

原创 Vue3.0配置全局属性

Vue3.0配置全局属性的方法//main.jsimport { createApp} from 'vue'import App from './App.vue'import router from './router'import store from './store'//引入jQuery 模块import $ from 'jquery';const app=createApp(App);app.use(store);app.use(router);app.mount('

2020-12-01 11:07:22 1539 1

原创 web_前端开发JS框架篇-Vue基础进阶版-Vue-cli脚手架

vue项目基本目录结构以及启动最基本组件在文件路径输入 cmdvue-init webpack 文件纯英文小写名称回车4个回车 y n n n vcd 文件名（输入文件首字“v母按teb键，自动切换以”v"开头的）npm install 下载以依赖，自动检索目录package.json，npm run dev 启动一个项目build文件夹:构建项目的文件夹里面的文件都是配置当前项目构建的一些信息；例如：热更新，项目实时更新config文件夹:做项目配置的文件夹比如启

2020-11-15 15:57:57 436

原创 web_前端开发JS框架篇-基础语法-Vue-cli脚手架安装及环境配置

Vue-cli脚手架概述Vue-cli(脚手架):Vue的开发必须是通过脚手架开发Vue的脚手架: vue-cli作用是：辅助我们完成vue项目的搭建以及开发脚手架如何搭建？搭建脚手架需要几个命令行工具没有配置过这些命令的电脑第一次上来需要进行各种安装配置，配置过的就以后直接使用。脚手架安装一共需要安装三个命令:npm命令、 cnpm命令、 vue命令；npm命令是国外的所以我们安装完直接使用会有一些网速比较卡的情况。所谓npm(Node Package Manager)

2020-11-10 00:18:19 225

原创 web_前端开发JS框架篇-Vue基础入门版-基础语法

vuejs概述jQuery库是针对js的dom的封装，封装了好多原生js的dom操作繁琐的地方，那Vuejs是针对 html+css+js的一个封装虽然vuejs没有脱离这三大技术，但是在原有基础上进行了整合推出了组件化开发的概念。MVC框架:Model - - - View - - - Controllor模型 - - - 视图 - - - 控制者框架(vue使用的)：Model - - - View - - - View - - - Model模型 - - - 视图 - - -

2020-11-09 23:35:43 641

原创 webstrom主菜单栏，工具栏取消隐藏的解决方法

问题：webstrom 菜单栏被隐藏解决问题：工具栏也丢失解决：

2020-11-09 22:08:57 2436 2

原创 WEB面试题_虚拟DOM与DOM Diff 的原理

虚拟DOM与DOM Diff 的原理虚拟DOMDOM 操作慢是对比于JS原生API，如数组操作，任何基于DOM的库（VUE/React）都不可能在操作DOM时比DOM快。他是什么？一个能代表DOM树的对象，同窗含有标签名、标签上的属性、事件监听和子元素们，以及其他属性。(React中)虚拟DOM的样子const vNode = { key:null, props:{ children:[ //子元素们 {type:'span',...}, {type:'span

2020-11-03 21:51:29 548

原创 WEB机试题--最大透明度轮播效果

2020-10-25 21:57:25 239

原创 WEB面试题（2）

JS交互问题汇总1.JS中能够实现跟服务器后台交互的手段有哪些?Asynchronous Javascript And XML js的异步请求对象script标签的src属性location.href, assign replace, window.open() , background-image:url("") , form表单 , 超链接跳转到服务器程序 , img 的src属性 , video和audio 的src属性 , link的href , iframe(了解)form表单交互

2020-10-25 21:46:07 4471

原创 Web_后台篇-PHP+MySql

数据库:数据存储的仓库有对应的数据库管理系统很方便的对数据进行增删改查‘；Mysql 中型数据库数据库的数据最终还是存储在磁盘的而数据库存在的意义在于能够高效的管理和操作数据大型，中型，小型指的是数据库在较大数据量时是否能够依然维持较高的操作效率MySql 服务 : MySql 服务器端程序 MySql 客户端程序 SQL 语句学习数据库就是学习SQL语句 SQL: Structured Query Language 结构化查询语言专门用来操作数据库创建数据

2020-10-16 20:00:18 474 1

原创 Web_cookie(缓存)的使用及 cookie的增删改查封装

cookie的基本使用什么是缓存？干嘛用的？每次访问网页都得从服务器请求该网页的数据；如果短时间内，多次刷新那么就要多次反复请求，这样做的问题很明显：增大服务器压力；页面加载缓慢很卡。所以浏览器本身再带缓存功能。把访问过的数据在本地存储一份，如果短时间内再次请求，那么不去向服务器要数据，而是把本地存储的缓存数据拿出来。这样增加了访问速度，和访问效率，以及用户体验更好。所以缓存的目的：是为了提高页面加载速度。高级缓存分为：一级缓存二级缓存三级缓存那么前端有没有缓存的手段？

2020-10-16 11:55:04 319

原创 Web_Ajax 模拟百度下拉提示框

Ajax 模拟百度下拉提示框百度搜索地址栏提交：https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=7525&req=2&csor=3&pwd=sd百度提交的键名：wd=步骤:每次输入获取内容调用ajax 请求百度数据遍历返回的数据创建li 拼接li*{ margin:0; padding:0;}

2020-10-15 11:43:55 188

原创 Web_Ajax

交互的概念:交流和互通有无表示双方在一起按照一定的规则进行沟通并传输数据。解释一些交互中能够用到的概念:客户端：谁请求服务谁就是客户端服务端：谁提供服务谁就是服务端协议：http https ftp:// thunder:// media://规定了交互双方的一些规则: 什么时候、在什么地方、交互内容是什么。MAC地址(物理地址)：查看本机MAC地址:win+R 输入cmd回车输入ipconfig -all 回车；30-5A-3A-EA-69-5B 。

2020-10-10 16:00:47 118

原创 Web_Ajax 聊天机器人JSON文件版完成

需求: 点击按钮发送输入框内容能够显示返回的信息实现聊天效果步骤:获取元素 btn input msgListbtn点击事件获取输入框输入的内容创建一个ownMsg的div 设置输入的内容把创建出来的onwMsg的div拼接到msgList里面去发送本次输入的内容ajax给服务器在返回的数据里面再次创建robot的div设置返回内容把robotMsg的div拼接到msgList里面去让聊天界面滚动到最底部<div id="box"> <div id

2020-10-10 14:12:12 266

原创 Web_jQuery

内容：掌握jQuery的思想设计与理念官网：http://jquery.com/;汉化：http://www.css88.com/jqapi-1.9/;在线API：http://api.jquery.com/;jQuery在线API: http://hemin.cn/jq/;所谓框架:就是个人或者团队开发出来的帮助程序猿快速开发的工具代码。第三方(第三方框架) 说的是：我一方、我的代码一方、别人的代码一方(第三方框架)。一般形容框架都是完整的一套代码体系；简单的封装三两个方法不能称之为框架。

2020-10-09 11:17:55 169

原创 WEB面试题（1）

HTML部分问题汇总1.列举一些块级标签和行内标签(越多越好)····························································2.标签的四大通用属性是什么?分别的作用是什么?title：鼠标提示文本；id：属性可用作链接锚(锚点)，配合css选择器使用，选择指定的唯一的元素；class：属性规定元素的类名，配合css使用；style：属性规定元素的行内样式，给元素添加样式；······························

2020-09-09 11:39:24 2956

原创 WEB笔试题

1.分别写出10个行内标签和5个块级标签(h系列算一个标签)2.请写出CSS中几种浏览器的前缀写法-moz- 火狐等使用Mozilla浏览器引擎的浏览器 ;-webkit- Safari, 谷歌浏览器等使用Webkit引擎的浏览器;-o- Opera浏览器(早期);-ms- Internet Explorer (IE);3.请写出5个CSS中有兼容问题的属性名称4.请写出JS创建对象的四种方式一，字面量创建 var obj={ 键1:值1, 键2:值2, 方法名1:function

2020-09-05 17:50:03 291

原创 WEB机试题--无缝轮播

*{ margin: 0; padding: 0;}#box{ width: 500px; height: 200px; padding: 5px; margin: 50px auto; border: 1px solid #999999;}.inner{ width: 500px; height: 200px; overflow: hidden; position: relative;}ul,ol{

2020-09-04 20:48:45 289

原创 WEB机试题--原生JS特效的旋转木马

2020-09-04 20:47:59 317

原创 WEB机试题--原生JS的放大镜

2020-09-04 20:46:40 245

原创 WEB机试题--使用canvas绘制验证码

input,canvas,button{ vertical-align: bottom;}<input type="text" id="codeinp"><canvas title="点我刷新验证码" width="120" height="40" style="border: 1px solid #000;"> 对不起,您的浏览器不支持canvas</canvas><button>验证</button>var m

2020-09-04 20:46:05 280

原创 Web_CSS3_3d卡片旋转【案例】

卡片旋转案例<body><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li></ul></body> <style> *{

2020-08-19 15:43:09 628

原创 Web_java script基本使用D_面向对象(3)_属性绑定and函数绑定的两方式

对象属性绑定的两种方式:什么方式绑定什么方式调用！1.对象.属性名=属性值var per={}per.name="大强";2.对象[“属性名”]=属性值per["name"]="强哥";console.log(per.name);或者:对象[字符串变量]=属性值var str="name";str="haha";per[str]="强哥";console.log(per.name);//undefined 因为绑定的属性名是hahaconsole.log(per.hah

2020-08-19 10:38:14 109

原创 Web_java script基本使用D_面向对象(2)_创建函数四种方式（构造函数）

一，字面量创建js对象是键值对集合 var obj={ 键1:值1, 键2:值2, 方法名1:function(){}, 方法名2:function(){}}二，new 对象创建new Object();O大写var obj=new Object(); //创建一个空白对象// console.log(obj);obj.name="小白";obj.age=12;obj.show=function () { console.log("秀儿同学");}obj.

2020-08-19 10:25:20 203

原创 Web_java script倒计时带界面案例【改进版】

需求:点击按钮时获取输入框的终点时间然后跟当前时间作对比进行倒计时天数的计算步骤:1.获取元素 btn daotime span: day hour minute second ms2.给btn添加点击事件3.获取输入框输入的事件然后传入new Date里面4.判断时间格式是否正确如果正确继续5.启动定时器6.把终点时间和当前时间都转换成毫秒值做减法7.求出差值的毫秒值后转换生天小时分秒毫秒8.分别设置到页面的span里面去9.判断差值时间如果小于等于

2020-08-19 09:57:50 808 1

原创 Web_java script_Dom基础部分

JavaScript分成三部分ECMAScript js语法基础DOM：Document Objet Mode(文档对象模型)，我们把html和css还有js构成的html文件，看成一个文档，把这个文档看做一个对象封装到内存中，就是我们DOM要学习的内容。在DOM中，最顶级的对象就是document对象，这个对象不用我们j创建。js内置对象，已经创建好了，直接拿来用就行。通俗理解：document对象就是当前html的祖宗对象。DOM会把整个页面封装...

2020-08-19 04:42:04 172

原创 Web_java script_Dom_对象模块化封装（简版）

全局变量如果太多就会造成全局污染我们可以用对象模块化封装var itszt={}模块化的理解1.什么是模块?将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信var itszt={ dom:{ getAllSibling:function (ele) { var siblingArr=[]; var childArr=ele.parentNode.children;

2020-08-19 02:46:34 195

原创 Web_java script_Dom_注册事件监听的方式与绑定兼容封装及事件解绑与事件绑定兼容封装

系统提供好的注册事件监听的方式给元素添加事件的方式（三种）行内添加事件 —<div onclick="show()"></div>（不推荐）；属性绑定的方式 —添加事件: ele.onclick=function(){}有事件层叠覆盖问题添加事件监听的方式 — ele.addEventListener("不带on的事件名称",事件驱动函数,布尔值);没有覆盖问题添加事件监听的方式 — 元素对象.attachEvent("带on的事件名称",事件驱动函数

2020-08-19 01:56:02 155

原创 Web_java script基本使用D_面向对象(1)

面试题：怎么理解面向对象面向对象的核心思想：一切皆对象，只会对象最事情。面向对象是基于面向过程的编程思想。面向对象是面向每个步骤。面向对象是把这个步骤封装起来，封装给一个对象，强调对象调用功能。角色发生改变：从执行者变成调用者。js是基于对象的编程语言，并不完全是面向对象的语言。js是脚本语言，不算是编程语言脚本语言：作为补充的语言。编程语言：作为一门独立的语言存，如java虽然是基于对象的，但有面向对象的特点，所以我们要掌握面向对象。面向对象编程思想诞生面向对象这个思想，很早之

2020-08-17 17:05:44 109

原创 Web_java script基本使用C_数组

数组是存在诸多变量数据的容器，可以统一管理很多数据，在进行运算。优点：方便统一管理。数组的创建：array1.字面量创建 var arr=[];创建一个空数组 var arr=[2,3,4,5,6,7,8,9];创建一个带初始元素的数组2.new 对象创建 new关键字动态创建var arr=new Array();创建一个空数组var arr=new Array(33,77,55,44,22);创建一个带初始元素的数组var arr=new Array(3);创建一个具有初始

2020-08-17 15:59:58 202

原创 Web_java script基本使用C_函数

函数的基本使用函数：有时候被称为方法，封装一段代码，能够反复使用。调用函数：就是执行函数里面代码。函数就是把一段代码用大括号包起来，然后起个名，然后反复使用。优点：提高代码复用率，什么时候调用时候时候执行。格式：function 函数名(){ 函数体代码；}调用函数：函数名();调用函数就是为了执行里面的代码。函数的参数使用有时候方法里面有一些数据，需要调用者，传入进行使用。这时需用到，函数的参数。格式：function 函数名(参数1，参数2，参数3){ 函

2020-08-17 15:54:45 252

原创 Web_java script基本使用B_运算和循环

数学运算符++ 累加， – 递减（单目运算符）；+加 -减 *乘 / 除%取模求余数，保留整数，x%y 是 x对y取模，即x/y的商的余数。js中有单目/双目/三目运算符a+b 双目运算符；+号是运算符；a和b是操作数；常见算数表达式a+b+c (也是双目表达式)a++++是一个运算符，这里面只有一个操作数（即单目运算符）单目运算符：++ – 格式： ++变量或变量++ ++变量自增1 a++相当于a=a+1 a++就是把a的值改变为

2020-08-17 15:30:07 217

原创 Web_java script_Date日期对象

Date日期对象创建日期对象:默认是当前时间；var date=new Date(); 获取指定时间日期的date对象(兼容性最强)—推荐 var date=new Date("2020-05-12 14:25:16"); var date2=new Date("2017/01/27 12:00:00");根据时间标准格式获取日期对象(了解)var date=new Date("Sun May 12 2019 14:25:16 GMT+0800 (中国标准时间)");

2020-07-08 21:52:41 268

原创 Web_java script基本使用C_数组_数组遍历方法(5种)

数组的其他五种遍历方式:item是数组的每一个元素, index是当前元素的索引值1. [every]对数组中每一项运行以下函数，如果都返回true，every返回true，如果有一项返回false，则停止遍历 every返回false；array.every(function(item,index,arr) {})var arr=["关羽","狼人","张三丰","张无忌","5G","九尾狐"];//arr是当前数组对象var boo=arr.every(function(item,in

2020-07-08 21:02:03 257

原创 Web_java script_Date日期对象_日期格式化方法

var date=new Date(); console.log(date.toString()); //标准时间字符串 console.log(date.valueOf()); //距离1970年毫秒值 console.log(date.toDateString()); //拿出标准时间字符串中日期部分 console.log(date.toTimeString()); //拿出标准时间字符串中的时间部分

2020-07-08 20:07:00 318

原创 Web_java script基本使用A_引入方式_变量的作用_数据类型_变量命名规则_number和string类型及转换方法

console.log(“在控制台打印输出内容”);console.warn(“在控制台打印警告内容”)；console.error(“在控制台打印错误内容”);document.write(“在页面输入内容”);document.write("<h1>标题</h1>");alert(“弹窗显示内容”)；prompt(“弹窗输入框”);confirm(“弹窗选择”);var choice=confirm("请选择")；console.log("choice");.

2020-07-07 21:30:05 196

原创 Web_java script冒泡排序法及四次优化详解

冒泡排序法，从小到大排序var arr=[8,1,5,3,7];console.log("操作前原数组：",arr);for(var j=0;j<arr.length-1;j++){ var boo=true; for(var i=0;i<arr.length-1-j;i++){ if(arr[i+1]){ boo=false; var temp=arr[i]; arr[i]=arr[i+1]; arr[i+1]=temp; } console.lo

2020-07-07 21:26:15 580 1

qq_40041509的博客