Sweat_candy的博客

原创 Ajax加强

1、XMLHttpRequest的基本使用1.1 什么是XMLHttpRequestXMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。1.2 使用xhr发起GET请求步骤：创建 xhr 对象调用 xhr.open() 函数调用 xhr.send() 函数监听 xhr.onreadystatechange 事件// 1. 创建

原创 服务器的基本概念与初识Ajax

客户端与服务器1.客户端与服务器1.1 服务器上网过程中，负责存放和对外提供资源的电脑，叫做服务器。1.2 客户端上网过程中，负责获取和消费资源的电脑，叫做客户端。2、URL地址2.1 URL地址的概念URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。2.2 URL地址的组成部分URL地址一般由三部组成：① 客户端与服务器之间的通信

转载 前端面试题——React

#React部分1、什么时候使用状态管理器从项目的整体看用户的使用方式复杂不同身份的用户有不同的使用方式多个用户之间可以协作与服务器大量交互，或使用WebSocketView要从多个来源获取数据从组件角度看某个组件的状态，需要共享某个状态需要在任何地方都可以拿到一个组件需要改变全局状态一个组件需要改变另一组件的状态组件有相当大量的，随着时间变化的数据state 需要有一个单一可靠数据源所有state放在顶层组件已经无法满足需求了2、优点提高了应用的性能可

转载 前端面试题记忆——JQuery

JQuery部分1、常见函数以及含义get（）取得所有匹配的DOM元素集合get（index）取得其中一个匹配得元素.index表示取得第几个匹配的元素append（content）向每个匹配的元素内部追加内容after（content）在每个匹配的元素之后插入内容html（）/html（var）取得或设置匹配元素的html内容find（expr）搜索所有与指定表达式匹配的元素bind（type，[data]，fn)为每个匹配元素的特定事件绑定事件处理函数empty（）删除匹配的元素集合

转载 前端面试题记忆——性能优化

性能优化部分1、性能优化的方面

转载 前端面试题记忆——浏览器

浏览器部分1、 浏览器中输入url到页面显示，整个过程发送了什么域名解析发起tcp三次握手建立tcp连接后发起http请求服务器响应http请求，浏览器得到html代码浏览器解析html代码，并请求html代码中的资源浏览器对页面进行渲染呈现给用户2、cookie的弊端每个特定的域名下最多生产的cookie的个数有限制IE和Opera会清理最近最少使用的cookie，firefox会随机清理cookiecookie最大为4096字节，为了兼容一般不超过4096字节安全性问题，如

转载 前端面试题记忆——css、html

CSS、HTML部分1、HTML和HTML5有什么区别？文档声明区别HTML:超文本标记语言，一种纯文本类型的语言HTML5: 文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发结构语义区别HTML:没有体现结构语义化的标签HTML5: 添加了许多具有语义化的标签，如：<article>、<aside>、<audio>、<bdi>...绘图区别HTML:可伸缩矢量图形，用于定义网络的矢量的图形HTML5: HTM

转载 前端面试题记忆——Vue

vue部分1、优点轻量级、速度快、简单易学低耦合、可重用性、独立开发文档齐全，且文档为中文文档2、vue父组件向子组件传递数据props3、子组件向父组件传递事件$emit4、v-show和v-if指令得共同点和不同点相同点：都可以控制dom元素得显示和隐藏不同点v-show 改变display属性，dom元素并未消失，切换时不需要重新渲染页面v-if直接将dom元素从页面删除，再次切换需要重新渲染页面5、让CSS只在当前组件中起作用scoped6、

转载 前端面试题记忆——JavaScript部分

JavaScript部分1、 js数据类型基本数据类型Number、Null、Undefined 、String 、Symbol、 Boolean引用数据类型Object、Array、Date、Function、RegExp2、js声明变量和函数的提升在js中声明会提升到最顶部执行函数的高于变量的函数内部如果用var声明相同名称的外部变量，函数不再向上查找匿名函数不提升3、闭包读取其他函数内部变量的函数一个函数内返回一个函数优点读取函数内部的变量将变量始终保

原创 上传码云并发布部署静态网站

上传码云并发布部署静态网站准备工作： 需要下载git软件 需要码云注册账号git 可以把我们的本地网站提交上传到远程仓库（码云 gitee）里面 类似以前的 ftp码云 就是远程仓库， 类似服务器码云创建新的仓库。利用git 提交 把本地网站提交到 码云新建的仓库里面在网站根目录右键-- Git Bash Here如果是第一次利用git提交，请配置好全局选项git config --global user.name "用户名"git config --g

原创 插件swiper的使用和图标字体的上传下载

1. swiper 插件使用官网地址：https://www.swiper.com.cn/下载需要的css和js文件 html页面中 引入相关文件官网找到类似案例，复制html结构，css样式 js 语法根据需求定制修改模块2. 图标字体上传下载上传步骤：让UI美工准备好 图标字体（必须是svg格式）点上传按钮（保留颜色并提交）生成之后加入购物车即可点击下载 — 下载代码小技巧： 如何批量下载全部字体图标呢？var span = document.que

原创 jQuery 属性操作、文本属性值、元素操作以及尺寸、位置操作

原创 jQuery入门及jQuery的选择器、样式操作和效果

1. jQuery 概述1.1 JavaScript 库仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuer

原创 品优购项目(上)

目标- 能够遵循品优购代码规范- 能够在品优购首页中引入 favicon 图标- 能够说出三大标签 SEO 优化- 能够在品优购首页中使用字体图标- 能够说出 LOGO 需要哪些 SEO 优化品优购项目规划网站制作流程原型图：页面的布局，告知我们开发人员，整个页面的结构是怎样的，说白了就是什么地方放什么内容效果图：告知我们开发人员，最终做出来的成品应该是什么样子，相比原型图，效果图里面包含内容，风格，字体大小等等品优购项目介绍项目名称：品优购项目.

原创 品优购项目（下）

目标能够写出列表页能够写出注册页能够把品优购网站部署到本地服务器能够把品优购网站上传到远程服务器品优购项目首页制作main 主体模块制作以前书写的就是模块化中的公共部分。main 主体模块是 index 里面专有的，注意需要新的样式文件 index.cssmain 盒子宽度为 980 像素，高度是455像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动main 里面包含左侧盒子，宽度为 721像素，左浮动，focus 焦点图模块ma

原创 ECharts数据可视化项目

可视化面板介绍​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。01-使用技术完成该项目需要具备以下知识：div + css 布局flex 布局Less原生js + jquery 使用rem适配echarts基础02- 案例适配方案设计稿是1920pxflexible.js 把屏幕分为 24 等份cssrem 插件的基准值是 80px插件-配置按钮—配置扩展

原创 移动端+京东移动端首页制作

一：移动端的viewport手机拥有了浏览器的初期,人们并没有专门为移动设备设计页面,造成的直接结果就是,访问的页面是直接将电脑页面进行缩放,操作起来有诸多不便,viewport就是用来解决这个问题的1.viewport的概念:移动设备上,用来显示网页的区域.a)如果把移动设备的浏览器(也有可能是app中的webview) ,当做相框的话b)viewport就相当于相框中的画,可能会比相框小,可能会比相框大,如果刚好一样大,那就皆大欢喜.2.修改viewport:我们可以通过meta标签去修改vi

原创 响应式开发

一：网页布局方式1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。注：以上几种布局方式并不是独立存在的

原创 案例——微金所页面

1.效果图2.整体页面结构块<!--顶部通栏--><header class="wjs_header"></header><!--导航--><nav class="wjs_nav"></nav><!--banner轮播图--><div class="wjs_banner"></div><!--信息--><div class="wjs_info"></d

原创 HTML5+CSS3

HTML5新特性概述HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。语义化标签 （★★）以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的<div class=“header”> </div><div class=“nav”> </div><

原创 案例——京东三角+CSS三角形

案例：京东三角1.效果图2.代码参考<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="...

原创 CSS（六）

一、 CSS 三角介绍网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。一张图， 你就知道 CSS 三角是怎么来的了, 做法如下：div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-height:0; font-size: 0;}1. 我们用c...

原创 提高页面的加载速度的方法——精灵图和字体图标

1. 精灵图1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。为什么使用精灵图（目的）：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。精灵图举例:1.2 精灵图（sp.

原创 案例——淘宝轮播图和土豆网鼠标经过显示遮罩

综合案例 - 淘宝轮播图1 效果图5.2 布局分析3 步骤1. 大盒子我们类名为： tb-promo 淘宝广告2. 里面先放一张图片。3. 左右两个按钮 用链接就好了。 左箭头 prev 右箭头 next 左按钮样式（border-radius：左上，右上，右下，左下），右按钮定位，提取左右按钮共同的样式代码（并集选择器）4. 底侧小圆点ul 继续做。 类名为 promo-nav 中间长方形椭圆 ul的定位（水平居中，离...

原创 CSS（五）

1. 定位(position) 介绍1.1 为什么使用定位我们先来看一个效果，同时思考一下**用标准流或浮动能否实现类似的效果**？场景1： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。<img src="images/ding.png" />结论：要实现以上效果，标准流 或 浮动都无法快速实现所以：1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。2.定位则是可以

原创 学成在线页面制作

页面展示：学成在线，是典型的企业级网站。学习学成网的目的，是为了整体感知企业级网站布局流程一、前期准备素材- 学成在线PSD源文件- 开发工具 = PS（切图） + sublime（代码） + chrome（测试）二、 前期准备工作先把前期准备工作做好， 采取结构与样式相分离思想。1. 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。2. 用vscode打开study目录文件夹.3. study 目录内新建 images 文件夹，用于...

原创 CSS属性书写顺序

生活中衡量一个人有气质： 穿着打扮 举止言行 等等编程中如何衡量一个人的代码能力：规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验..建议遵循以下顺序：1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）2. 自身属性：width / height / margin / padding / border / ba...

原创 前端编程中利用PS切图还原设计图

​一. PS 切图1.1. 常见的图片格式序号 格式 特点和常用的用途 1 jpg JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们**产品类的图片** 经常用jpg格式的 2 gif GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果, 实际 **经常用于一些图片小动画效果** 3 png png图像格式，是一种新兴的网络图形格式，结合了GIF和JPEG的优点...

原创 CSS(四)

一、其他样式1、圆角边框在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。语法：border-radius:length; - 参数值可以为数值或百分比的形式- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角- 分开写：border-top-left-radius、bo...

原创 jQuery的$.get(‘url‘,function(data){},‘json‘)最后一个参数的含义

最后一个参数是指定data的类型为指定类型('json'),如果不写默认为text,无法解析传过来的json串如果指定为'json',那么后台必须有json类型的返回值传过来,function中的代码才能执行.如果没有返回值即 data为空,要还想执行function中的方法,就不能指定返回值类型.直接去掉"json" ,function中的方法就能执行.总之,data的类型必须和指定类型匹配. 是"json"的话,data必须为"json"且不能为空，否则没有结果也不会报错....

转载 获取页面的URL

利用Javascript获取页面的URL，这个问题起来好像很复杂，很多人第一次去想这个问题，估计在琢磨到底又是哪个Javascript函数。其实不是，Javascript获取当前页的URL的函数就是我们经常用来重定向的window.location.href。比如下面的函数： <script> var url=window.location.href; var loc = url.substring(url.lastIndexOf('/')+1, url.lengt

原创 案例——产品模块

产品模块的代码

原创 CSS(三)

一、css三大特性1、层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则:- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式- 样式不冲突，不会层叠2、继承性​ CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。子元素可以继承父元素的样式：​ （text-，font-，line-这些元素开头的可以继承，以及c..

原创 案例——五彩导航

放在上面导航栏上进行变色

原创 CSS(二)

笔记

原创 CSS(一)

笔记

原创 HTML(二)

笔记

原创 HTML(一)

HTML学习笔记