<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[function_road的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/function_road</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; function_road]]></copyright><item><title><![CDATA[day07_WebAPIs]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/91968955</link><guid>https://blog.youkuaiyun.com/function_road/article/details/91968955</guid><author>function_road</author><pubDate>Fri, 14 Jun 2019 13:49:05 +0800</pubDate><description><![CDATA[day07 - Web APIs

学习目标:
能够写出移动端触屏事件
能够写出常见的移动端特效
能够使用移动端开发插件开发移动端特效
能够使用移动端开发框架开发移动端特效
能够写出 sessionStorage 数据的存储以及获取
能够写出 localStorage 数据的存储以及获取
能够说出它们两者的区别

1.1. 触屏事件
1.1.1 触屏事件概述
移动端浏览器兼容性较好，我们不需要考虑...]]></description><category></category></item><item><title><![CDATA[day06_WebAPIs]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/91968893</link><guid>https://blog.youkuaiyun.com/function_road/article/details/91968893</guid><author>function_road</author><pubDate>Fri, 14 Jun 2019 13:48:18 +0800</pubDate><description><![CDATA[day06 - Web APIs

学习目标:
能够封装简单动画函数
能够理解缓动动画的封装
能够使用动画函数
能够写出网页轮播图案例
能够写出移动端触屏事件

**1.1. **动画函数封装
1.1.1 缓动效果原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
核心算法： (目标值 - 现在的位置) &nbsp;&...]]></description><category></category></item><item><title><![CDATA[day05_WebAPIs]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/91968786</link><guid>https://blog.youkuaiyun.com/function_road/article/details/91968786</guid><author>function_road</author><pubDate>Fri, 14 Jun 2019 13:47:07 +0800</pubDate><description><![CDATA[day05 - Web APIs

学习目标:
能够说出常见 offset 系列属性的作用
能够说出常见 client 系列属性的作用
能够说出常见 scroll 系列属性的作用
能够封装简单动画函数

**1.1. **元素偏移量 offset 系列
1.1.1 offset 概述
offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。...]]></description><category></category></item><item><title><![CDATA[day04_WebAPIs]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/90672417</link><guid>https://blog.youkuaiyun.com/function_road/article/details/90672417</guid><author>function_road</author><pubDate>Wed, 29 May 2019 15:49:09 +0800</pubDate><description><![CDATA[day04 - Web APIs

学习目标：
能够说出常用的3-5个键盘事件
能够知道如何获取当前键盘按下的是哪个键
能够知道浏览器的顶级对象window
能够使用window.onload事件
能够使用window.onresize事件
能够说出两种定时器的区别
能够使用location对象的href属性完成页面之间的跳转
能够使用location对象获取url中的参数部分
能够使用histo...]]></description><category></category></item><item><title><![CDATA[day03_WebAPIs]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/90672394</link><guid>https://blog.youkuaiyun.com/function_road/article/details/90672394</guid><author>function_road</author><pubDate>Wed, 29 May 2019 15:48:22 +0800</pubDate><description><![CDATA[day03 - Web APIs

学习目标：
能够使用removeChild()方法删除节点
能够完成动态生成表格案例
能够使用传统方式和监听方式给元素注册事件
能够说出事件流执行的三个阶段
能够在事件处理函数中获取事件对象
能够使用事件对象取消默认行为
能够使用事件对象阻止事件冒泡
能够使用事件对象获取鼠标的位置
能够完成跟随鼠标的天使案例

1.1. 节点操作
1.1.1 删除节点

nod...]]></description><category></category></item><item><title><![CDATA[day02_WebAPIs]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/90672376</link><guid>https://blog.youkuaiyun.com/function_road/article/details/90672376</guid><author>function_road</author><pubDate>Wed, 29 May 2019 15:47:33 +0800</pubDate><description><![CDATA[day02 - Web APIs

学习目标：
能够说出排他操作的一般实现步骤
能够使用html5中的dataset方式操作自定义属性
能够根据提示完成百度换肤的案例
能够根据提示完成全选案例
能够根据提示完成tab栏切换案例
能够区分元素节点、文本节点、属性节点
能够获取指定元素的父元素
能够获取指定元素的所有子元素
能够说出childNodes和children的区别
能够使用createEl...]]></description><category></category></item><item><title><![CDATA[day01_WebAPIs]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/90672348</link><guid>https://blog.youkuaiyun.com/function_road/article/details/90672348</guid><author>function_road</author><pubDate>Wed, 29 May 2019 15:46:44 +0800</pubDate><description><![CDATA[day01 - Web APIs

学习目标：
能够通过ID来获取元素
能够通过标签名来获取元素
能够通过class来获取元素
能够通过选择器来获取元素
能够获取body和html元素
能够给元素注册事件
能够修改元素的内容
能够区分innerText和innerHTML的区别
能够修改像div这类普通元素的属性
能够修改表单元素的属性
能够修改元素的样式属性

1.1. Web API介绍
1....]]></description><category></category></item><item><title><![CDATA[JavaScript基础第06天笔记]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/90672320</link><guid>https://blog.youkuaiyun.com/function_road/article/details/90672320</guid><author>function_road</author><pubDate>Wed, 29 May 2019 15:45:27 +0800</pubDate><description><![CDATA[JavaScript基础第06天笔记
1 - 内置对象
1.1 内置对象
​	 JavaScript 中的对象分为3种：
		**自定义对象 、内置对象、 浏览器对象**
前面两种对象是JS 基础 内容，属于 ECMAScript；  第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是**最基本而必要的功能...]]></description><category></category></item><item><title><![CDATA[JavaScript基础第05天笔记]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/90672302</link><guid>https://blog.youkuaiyun.com/function_road/article/details/90672302</guid><author>function_road</author><pubDate>Wed, 29 May 2019 15:44:42 +0800</pubDate><description><![CDATA[JavaScript基础第05天笔记
1 - 作用域
1.1 作用域概述
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

JavaScript（es6前）中的作用域有两种：


全局作用域
局部作用域（函数作用域）

1.2 全局作用域
作用于所有代码执行的环...]]></description><category></category></item><item><title><![CDATA[JavaScript基础第04天笔记]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/90672279</link><guid>https://blog.youkuaiyun.com/function_road/article/details/90672279</guid><author>function_road</author><pubDate>Wed, 29 May 2019 15:44:04 +0800</pubDate><description><![CDATA[JavaScript基础第04天笔记
1 - 数组
1.1 数组的概念

数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。
数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

1.2 创建数组
JS 中创建数组有两种方式：


利用  new 创建数组

var 数组名 = new Array() ...]]></description><category></category></item><item><title><![CDATA[JavaScript基础第03天笔记]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/90672263</link><guid>https://blog.youkuaiyun.com/function_road/article/details/90672263</guid><author>function_road</author><pubDate>Wed, 29 May 2019 15:43:30 +0800</pubDate><description><![CDATA[JavaScript基础第03天笔记
1 - 循环
1.1 for循环


语法结构
for 循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：
for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}




名称
作用




初始化变量
通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。


条件表达式
...]]></description><category></category></item><item><title><![CDATA[JavaScript基础第02天笔记]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/90672247</link><guid>https://blog.youkuaiyun.com/function_road/article/details/90672247</guid><author>function_road</author><pubDate>Wed, 29 May 2019 15:42:45 +0800</pubDate><description><![CDATA[JavaScript基础第02天
1 - 运算符（操作符）
1.1 运算符的分类
运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有：


算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

1.2 算数运算符


算术运算符概述
概念：算术运算使用的符号，用于执行两个变量或值的算术运算。



浮点数的...]]></description><category></category></item><item><title><![CDATA[JavaScript基础第01天笔记]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/90672214</link><guid>https://blog.youkuaiyun.com/function_road/article/details/90672214</guid><author>function_road</author><pubDate>Wed, 29 May 2019 15:41:47 +0800</pubDate><description><![CDATA[JavaScript基础第01天
1 - 编程语言
1.1 编程

编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
从事编程的人员，就是程序员。  但是一般程序员都比较幽默，为了形容自己的辛苦工作，也成为“...]]></description><category></category></item><item><title><![CDATA[移动web开发之响应式布局]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/89930917</link><guid>https://blog.youkuaiyun.com/function_road/article/details/89930917</guid><author>function_road</author><pubDate>Tue, 07 May 2019 22:17:28 +0800</pubDate><description><![CDATA[移动端WEB开发之响应式布局
1.0 响应式开发原理
1.1 响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
设备的划分情况：

小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）

1.2 响应式布局容器
响应式需要一个父级做为布局容器，来配合子...]]></description><category></category></item><item><title><![CDATA[移动web开发_rem布局]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/89930906</link><guid>https://blog.youkuaiyun.com/function_road/article/details/89930906</guid><author>function_road</author><pubDate>Tue, 07 May 2019 22:16:57 +0800</pubDate><description><![CDATA[移动web开发之rem布局
rem基础
rem单位
rem (root em)是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
/* 根html 为 12px */
html {
   font-size: 12px;...]]></description><category></category></item><item><title><![CDATA[移动web开发_flex布局]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/89930895</link><guid>https://blog.youkuaiyun.com/function_road/article/details/89930895</guid><author>function_road</author><pubDate>Tue, 07 May 2019 22:16:24 +0800</pubDate><description><![CDATA[移动web开发——flex布局
1.0传统布局和flex布局对比
1.1传统布局

兼容性好
布局繁琐
局限性，不能再移动端很好的布局

1.2 flex布局

操作方便，布局极其简单，移动端使用比较广泛
pc端浏览器支持情况比较差
IE11或更低版本不支持flex或仅支持部分

1.3 建议

如果是pc端页面布局，还是采用传统方式
如果是移动端或者是不考虑兼容的pc则采用flex

2.0 f...]]></description><category></category></item><item><title><![CDATA[移动web开发_流式布局]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/89930882</link><guid>https://blog.youkuaiyun.com/function_road/article/details/89930882</guid><author>function_road</author><pubDate>Tue, 07 May 2019 22:15:23 +0800</pubDate><description><![CDATA[移动web开发流式布局
1.0 移动端基础
1.1浏览器现状
PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。
移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。
国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主...]]></description><category></category></item><item><title><![CDATA[HTML5CSS3_day03]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/89930873</link><guid>https://blog.youkuaiyun.com/function_road/article/details/89930873</guid><author>function_road</author><pubDate>Tue, 07 May 2019 22:14:52 +0800</pubDate><description><![CDATA[day02 - 移动web开发_H5C3
1.1. 学习目标

理解

3d转换的中的3d移动，3d旋转
动画属性的设置和使用
animate.css动画库的使用



1.1. 3D转换（变换）
3d转换是改变标签在3坐标系上的位置和形状的一种技术   以下知识点最好结合 3d模型工具来理解
1.1.1. 3维坐标系
3维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的

x轴 水平向右
...]]></description><category></category></item><item><title><![CDATA[品优购-day03笔记-完善品优购的首页&制作列表页]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/89930823</link><guid>https://blog.youkuaiyun.com/function_road/article/details/89930823</guid><author>function_road</author><pubDate>Tue, 07 May 2019 22:11:59 +0800</pubDate><description><![CDATA[typora-copy-images-to: media

第01阶段.WEB基础：品优购-day03笔记-完善品优购的首页&amp;制作列表页

学习目标

完善 品优购项目的首页 index.html
制作 品优购项目的列表页 list.html

品优购项目(三)

第01阶段.WEB基础：品优购-day02笔记-品优购首页

1. 品优购首页布局
命名集合：




名称
说明




...]]></description><category></category></item><item><title><![CDATA[品优购-day02笔记-品优购项目-首页]]></title><link>https://blog.youkuaiyun.com/function_road/article/details/89930812</link><guid>https://blog.youkuaiyun.com/function_road/article/details/89930812</guid><author>function_road</author><pubDate>Tue, 07 May 2019 22:11:24 +0800</pubDate><description><![CDATA[typora-copy-images-to: media

第01阶段.WEB基础：品优购-day02笔记-品优购首页

学习目标

能跟上老师的节奏，完成品优购项目的首页 index.html

品优购项目(二)
1. 品优购首页布局
命名集合：




名称
说明




快捷导航栏
shortcut


头部
header


标志
logo


购物车
shopcar


搜索
sear...]]></description><category></category></item></channel></rss>