- 博客(54)
- 收藏
- 关注
RSS订阅原创 Vue 学习：Vue 核心
一套用于动态构建用户界面的渐进式JavaScript 框架。渐进式：Vue 可以自底向上逐层的应用简单应用：只需一个轻量小巧的核心库复杂应用：可以引入各式各样的 Vue 插件开发者：尤雨溪后起之秀，生态完善，已然成为国内前端工程师必备技能。语法：new Vue({directives:{指令名:配置对象}})new Vue({directives{指令名:回调函数}})Vue.directive(指令名,配置对象)Vue.directive(指令名,回调函数)
2022-10-24 14:23:14
1007
1
原创 关卡三： NPM
完成前端开发基础和JavaScript基础学习。NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。NPM作为前端使用较多的包管理工具，具有很强的实用性，需要多尝试使用。
2022-10-16 21:16:23
738
原创 关卡四：git 和 github 使用
Git 是一个开源的分布式版本控制系统，是目前世界上最先进、最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。
2022-10-16 20:19:07
528
原创 关卡二：HTTP协议
通信就是信息的传递和交换。通信的主体通信的内容通信的方式通信协议(Communication Protocol)是指通信的双方完成心态所必须遵守的规则和约定；简单来说就是通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫通信协议。客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议；网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议(HyperText Transfer Protocol)，简称HTTP协议。
2022-10-11 16:49:37
552
原创 关卡一： ajax
Ajax是重要的前后端交互工具，学习时应当注意分辨其和表单的区别，学会使用jquery中的ajax和axios等多种交互手段。Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的。服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。完成前端开发基础和JavaScript基础学习。请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。Ajax可使因特网应用程序更小、更快，更友好。使用 JavaScript。的应用到基于数据的应用。可在不重载页面的情况与。
2022-10-07 18:44:40
263
原创 jQuery 发起 Ajax 请求最常用的三个方法
浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。jQuery 中发起 Ajax 请求最常用的三个方法如下：$.get()$.post()$.ajax()
2022-10-07 17:55:26
1277
原创 关卡三：面向对象编程
1、定义方式方式一：函数声明方式 function 关键字（命名函数）方式二：函数表达式(匿名函数)方式三：new Function()var fn = new Function('参数1','参数2'..., '函数体')Function 里面参数都必须是字符串格式；第三种方式执行效率低，也不方便书写，因此较少使用；所有函数都是 Function 的实例(对象)；函数也属于对象。2、调用方式1. 普通函数console.log('人生的巅峰');}fn();2. 对象的方法var o = {
2022-09-25 19:56:49
461
原创 let、var、const 的区别
变量(variable)简单来说就是存储数据值的容器，也可以说它是一个装东西的盒子。变量的初始化，即声明变量并赋值。变量的声明可以使用 var 和 let 声明变量，都是弱类型，即所声明的变量的类型取决于接受值的类型。
2022-09-25 17:21:14
564
原创 关卡二：基于ECharts数据可视化项目
完成小米官网的开发应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 '立可得' 数据可视化项目。该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 ...ECharts 数据可视化简介与基本使用。
2022-09-21 15:42:02
1010
原创 ECharts 数据可视化简介与基本使用
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。简单来讲就是：ECharts 是一个JS插件，可流畅运行于PC与移动设备，性能优异；兼容性强，兼容当前绝大部分主流浏览器；并能提供很多常用图表，且可定制折线图、柱状图、散点图、饼图、K线图。
2022-09-18 13:11:54
1573
原创 项目一：《小米官网》jQuery重构
小米官网项目的整体布局就不多说了，在项目一：《小米官网》中我就写过了，我就是直接复制粘贴的之前的 html 和 css，只是把JS部分用jQuery重新写了一遍，不想打字了，直接分享下我的jQuery部分的代码吧！小米官网项目的整体布局就不多说了，在。
2022-09-15 21:03:44
698
1
原创 jQuery 五星好评（综合练习）
鼠标进入五角星，当前和之前的所有五角星变为实心，后面的是空心。点击记录该五角星，鼠标移开后该记录点之前所有变为实心，之后的所有变为空心。1.鼠标进入某个五角星，当前和之前的所有五角星变为实心，后面的是空心。3.鼠标移开后该记录点之前所有变为实心，之后的所有变为空心。培养使用 jQuery 综合处理需求能力。2.鼠标点击某个五角星，记录该五角星。
2022-09-13 08:40:48
471
原创 关卡一： jQuery编程
完成JavaScript基础的学习 jQuery 一个优秀的 Javascrīpt 框架，jQuery 中包含了JavaScript 函数库，它可以通过一行简单的标记被添加到网页中。jQuery 库中包含了以下特性：通过本关卡的学习，必须掌握前6者的知识语法及使用。 学习永远都不是记忆，记忆的东西迟早会被遗忘。真正要学习一门技术，最基本的原则就是要理解它。在学习 JQuery 的知识点时，你首先要理解一些概念来辅助你理解这些知识点。JQuery 中的概念主要有这三个： JQuer
2022-09-08 08:58:53
308
原创 前端学习——初识jQuery
1、jQuery 介绍即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我主要学习的就是jQuery。
2022-09-03 20:12:24
346
原创 项目二：《贪吃蛇》
当页面任意位置出现食物，用户控制蛇移动到食物周围，蛇头碰到食物时则吃掉此食物，页面上会在任意位置出现另一个食物，蛇再去吃掉。用户点击页面中的 start 按钮后即可进行新游戏，点击页面即可暂停游戏，再点击出现的暂停按钮即可继续游戏。游戏画布由 30 行 30 列且宽高皆为 20 px 的格子组成，蛇和食物功能的实现实际上都是在这些格子中进行的。蛇分为蛇头和蛇身两个部分，通过数组来存储蛇的位置，点击 start 按钮后，蛇的方向默认往右移动。通过数组存储随机生成的食物的坐标并判断是否与蛇的身体重合。.....
2022-08-31 20:03:21
1295
原创 小米商城项目——首页跳转到登录页面或注册页面的制作分析
其实想要实现这个效果很简单，只需要先在首页把跳转的链接地址设置好，然后再到登录/注册页面进行 JS 的设置即可实现相应效果。首页进行跳转到登录页面或者注册页面的操作时，相应页面变化的同时地址也进行相应变化。...
2022-08-27 21:14:07
1318
原创 项目一：《小米官网》
小米旗舰商城”。二十一世纪是网络休闲生活的时代，在这互联网时代, 网络销售已经变成了现在较大的-一个营销模式。如今信息网络的发展可以说是一日千里，透过网络的运用，可以提供很丰富的商品资料给使用者参考,网络充裕的资讯方便了客户通过信息进行对商品的选择和购买、在销售自己品牌产品的同时，也是对自己产品的推销和品牌的提升。......
2022-08-27 08:57:23
720
原创 CSS 三角——带边框的三角
值得注意的是，right 值右移的距离值是 border 的两倍，要想使三角的边框和 div 边框一致，需要使三角组合得到的边框像素和 div border 像素一致，如果 div border 是1px，那么大的三角形和小的三角形边框差就需要为1px，大三角移动的距离和小三角移动的距离差则为2px，多运行几次代码即可理解。可以使用伪元素 before 和 after来做，其效果就相当于在标签的内部放置一个最前或者最后的标签，添加的标签可以继承父元素的属性，那么通过伪元素就可以组装出带边框的小三角。
2022-08-20 22:22:58
4932
原创 关卡四：BOM 对象
BOM 是 browser object model 的缩写，简称浏览器对象模型 ，提供了独立于内容而与浏览器窗口进行交互的对象；，它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与 HTML 的交互。它的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计 Web 页面的能力。.........
2022-08-12 01:10:59
87
原创 JavaScript 中 e.target 和 this 的区别
通常情况下 terget 和 this 是一致的，但在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），this指向的是父元素，因为它是绑定事件的元素对象，而target指向的是子元素，因为他是触发事件的那个具体元素对象。...
2022-08-08 08:41:43
1470
原创 关卡三： Web API介绍及DOM对象
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 Web API的概念是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。JavaScript是由ECMAScript,DOM,BOM组成，在本关卡主要学习Web API中的DOM对象。 一套操作页面元素的API，DOM可以把HTML看成
2022-08-05 15:57:23
185
原创 JavaScript——简单数据类型和复杂数据类型
函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中。简单数据类型（基本数据类型、值类型）在存储时变量中存储的是。...
2022-07-31 18:03:25
84
原创 关卡二： JavaScript函数及对象
在Java语言中，我们可以定义自己的类，并根据这些类创建对象来使用，在Javascript中，我们也可以定义自己的类，例如定义User类、Hashtable类等等。目前在Javascript中,已经存在一些标准的类,例如Date、Array、RegExp、String、Math、Number等等，这为我们编程提供了许多方便。但对于复杂的客户端程序而言，这些还远远不够，所以又有了自定义对象。......
2022-07-28 23:17:53
94
原创 JavaScript——冒泡排序
我认为本质上其实就是将数组内相邻的两个元素进行比较，然后判断是否交换这两个变量的值，后面的元素依次执行。外层循环控制趟数，里层循环控制每一趟的循环次数；比较数组内相邻的两个元素，根据相应条件判断是否交换它们两个的值；从第一组到最后一组，对每一组相邻的两个元素做同样的工作；每轮循环后，末尾的元素就会是最大或最小的数；针对数组内所有的元素重复上述的操作（除了最后一个）直到没有任何一组数字需要比较为止，输出数组。从 1~30 中选出 5 个能被 2 整除的随机数，并对他们从大到小排序，最后输出一个数组。.
2022-07-23 22:24:41
381
1
原创 关卡一： JavaScript基础语法
JavaScript一种运行在客户端的脚本语言1、作用：表单动态校验（密码强度检测）（JS产生最初的目的 ）网页特效服务端开发(Node.js)桌面程序(Electron)App(Cordova)控制硬件-物联网(Ruff)游戏开发(cocos2d-js)2、JS 的组成ECMAScriptDOM——文档对象模型BOM——浏览器对象模型3、js编写位置行内式开始标签内，把事件和js代码耦合在一起............
2022-07-21 20:59:53
205
原创 温故而知新——CSS3小技巧：width:fit-content
利用CSS3的fit-content属性可以轻松解决以及根据子元素内容的宽度进行宽度设置的问题。（目前这个属性只支持Chrome和Firefox浏览器）
2022-07-18 09:19:12
3645
原创 项目一：《生活资讯网》开发
生活资讯网是一款发布生活资讯新闻的网站。主要为人们提供各类生活资讯，如饮食健康、生活常识、美容养生等全面广阔的内容，本站可以让您能轻易找到您想要的各类生活知识。具体开发过程就不逐一展示了，下面简要分享一下我花费了不少时间才用Bootstrap做出来的轮播图和Accordion折叠部分。轮播图懒得废话，直接看代码吧，有兴趣的可以自己慢慢研究。100%">警惕更年期综合症带来的危害...
2022-07-15 17:22:07
125
原创 温故而知新——CSS元素的显示与隐藏
CSS元素的显示与隐藏可以由display、visibility和opacity这三种属性来控制，废话不多说，直接通过代码来理解：1.display使用 display:none 属性可以隐藏所有的信息，包括文本和图片 2.visibilityhidden 元素是不可见的collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。3.opacityopacity 属性是设置一个元素
2022-07-11 09:53:57
249
原创 温故而知新——学习Bootstrap的一点经验
1、首先，作为Bootstrap的初学者，在开始使用它之前，必需先了解Bootstrap及其工作方式；了解如何将其导入书面代码中以及如何构建Bootstrap项目。在开始编写之前，需要研究其相关代码。Bootstrap文档的所有信息都可以在相关网站上找到：2、其次，掌握HTML5、CSS3和JavaScript的相关知识，并安装最新版本的Bootstrap。3、然后，掌握Bootstrap的重点就是尽可能多地练习使用它。尝试构建一个实际的网站并一边学习一边参阅参考指南来测试该框架。4、另外，插件是网站设计的
2022-07-04 15:57:28
1216
1
原创 前后端交互案例--登录
一、需求分析问题1： 什么时候进行发送请求？点击登录按钮的时候，需要给 form 标签绑定一个表单提交事件。问题2：需要拿到哪些信息？需要拿到用户填写的用户名和密码。问题3：需要如何发送给后端？按照接口文档的规范进行发送。问题4：请求完成以后，我们需要做些什么？根据后端返回的信息，进行一些后续的操作。如果后端返回的是登录成功，那么我们进行页面跳转；如果后端返回的是登录失败，那么我们提示用户错误。二、代码...
2022-05-04 22:26:45
1379
4
原创 Less的安装和使用
一、Less的安装1、安装node.js因为Less是基于node环境的，所以使用Less前必须先安装node.js。安装node.js：从Node.js中下载适应自己电脑的环境进行傻瓜式安装即可判断是否成功安装： 1.Win+R 运行命令cmd，进入命令窗口2.输入node -v ，如果显示了版本号，说明安装成功2、安装Less1.基于node.js在线安装Less：运行cmd命令 "npm install -...
2022-04-22 10:25:38
8365
2
原创 关卡三：移动Web开发
【学习前提】完成Flex伸缩布局的学习，掌握Flex伸缩盒布局的思想。 【阶段说明】掌握rem单位及rem适配方案； 知道Less的是用来干什么的； 会应用Less进行样式开发； 掌握响应式布局原理； 掌握Bootstrap响应式工具的使用。【学习技巧】Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 响应式布局的理念就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。一、rem基础
2022-04-21 21:26:24
385
转载 在VS Code中搭建Java开发运行环境
官网链接：Java in Visual Studio CodeVS Code是靠插件来进行其他语言的开发的，所以先将开发Java要用的插件装好，Ctrl+Shift+X直接搜索出来安装即可：Language Support for Java(TM) by Red Hat Debugger for Java Java Test Runner Maven for Java对于开发简单的Java程序，只需要前两个就可以了，但需要自己再手动构建几个配置文件（.classpath .project.
2022-04-14 14:52:17
683
1
原创 移动端flex弹性布局 （强烈推荐）
flex 弹性布局（强烈推荐） flex布局原理 原理 给父盒子添加flex属性，来控制子盒子的位置排列方式从而实现flex布局 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效 Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局 父项常见属性 flex-direction：设置主轴的方向 ...
2022-04-01 11:11:58
618
6
原创 关卡二：Flex伸缩布局
【学习前提】完成H5C3的学习，掌握相关知识。【阶段说明】知道标准的viewport的书写要求 掌握流式布局的思想 掌握flex盒子布局原理，常用属性【学习技巧】重点理解flex盒子的布局原理一、标准viewport的设置1、布局视口 layout viewport一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页...
2022-03-31 20:43:30
689
原创 简单的CSS3动画案例——奔跑的熊哥
这个动画效果其实很简单，只需要用精灵图的方式加上动画和过渡效果就可以实现，用运动曲线steps()，分成8步steps(8)，每次向x轴负方向移动1/8。具体细节还是直接看代码吧：<div class="bg2"></div><div class="bg1"></div><div class="bear"></div>图片如下：样式：* { padding: 0; ...
2022-03-26 11:17:47
1073
原创 CSS3转换与透视
一、CSS3转换（transform）1、2D转换 2D 转换是改变标签在二维平面上的位置和形状移动：translate 旋转：rotate 设置元素旋转中心点(transform-origin)缩放：scale（x,y） x 与 y 之间使用逗号进行分隔； 可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子； 同时使用多个转换，其格式为 transform: transl...
2022-03-26 10:48:50
786
原创 关卡一：H5C3进阶
【学习前提】完成第一阶段前端开发基础的学习。【阶段说明】 H5是标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。作为新的HTML语言，具有一些新的元素，属性和行为。掌握h5新增的语义化标签、多媒体标签、input表单、表单属性； 掌握CSS3新增属性，选择器，转换，移动，旋转及缩放属性； 掌握CSS3的透视原理。 【学习时长】 3.5天【学习技巧】在学习H5C3的新标签及新特性的时候，重点理解语义化标签的...
2022-03-24 16:12:05
624
原创 实践项目二：品优购电商项目
效果展示：【项目前提】掌握HTML语义化标签； 掌握css基本语法； 掌握css选择器的使用； 掌握css盒子模型； 掌握css浮动； 掌握css定位； 会使用精灵图及图标字体；【项目说明】品优购网上商城是一个综合性的B2B2C 平台，类似京东商城、天猫商城。网站采用商家入驻的模式，商家入驻平台提交申请，有平台进行资质审核，审核通过后，商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。通过本阶段的学习我们需要实现品优购网上商城网站前台的部分页面。包括品优购网站首.
2022-03-13 21:42:43
1671
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人