# my_frontend_learning **Repository Path**: w3cteching/my_frontend_learning ## Basic Information - **Project Name**: my_frontend_learning - **Description**: 主要内容来源于http://www.fgm.cc/learn，作为学习之用 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2020-07-29 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # my_frontend_learning #### 项目介绍 作为学习之用 #### 软件架构 新手上路，老司机请慢速行驶！ #### 来源 http://www.fgm.cc/learn #### 目录说明 #### 1.1控制div属性： 主要涉及document.getElementsByTagName、document.getElementById、for循环的使用、数组运用 this.index用法、sytle.cssText的使用 #### 1.2 网页换肤 主要是涉及，样式表切换【！important】； 默认样式表的启用，则是通过link标签引入外部样式； for/in语句，循环遍历对象的属性； 条件判断&&表达式1&&表达式2&&...&&表达式n; #### 1.3 函数接收参数并弹出 主要涉及：有参函数的建立和值传递； #### 1.4 使用循环将3个div变成红色 主要涉及：for循环的使用，由最近几节课可以看出，for循环常用于同一功能附加。 #### 1.5 鼠标移入、移出改变样式 主要涉及：鼠标事件onmouseover【移入】和onmouseout【移出】的应用； 技巧：原文中使用到hover的用法，对于"LoVe HAte"伪类中，hover的使用范围更广、频率会更高 #### 1.6 密码提示框 主要涉及：使用鼠标移入和移出事件控制div信息的显隐，此功能可以扩展，主要针对带有隐藏效果的元素和属性。 #### 2.1 输入法选择 主要涉及：是之前6节课的一次综合，css中新增vertical-align【垂直对齐，line-height【行高】，display【元素框类型】，伪类hover，从某种程度上可以替代鼠标移入移出造成的样式变化。 注意css样式结构书写，本节个人作业中，因为样式表的书写，造成部分要是并不能正常使用。 【原因暂时不清楚2018.5.2】, #### 2.2 点击div显示innerHTML 主要涉及：text-indent【文本首行缩进】，innerHTML的用法 #### 2.3 求数组中所有数字的和【作业不会】 主要涉及：键盘输入事件（onkeyup,onkeydown,onkeypress）,正则表达式初试，属性replace的使用 #### 2.4 弹出层效果 【作业不会】 主要涉及： css3样式==>opacity【透明度】的使用/margin负值的应用/display的实际应用 #### 2.5 函数传参改变div属性 主要涉及： 全局变量和局部变量的作用域和值变化。元素的属性操作：removeAttrbute的使用 #### 2.6 图片列表：鼠标移入移出图片透明度 主要涉及：鼠标事件滑动和透明度样式的联合调试页面 擅用css类和js通过类名控制样式 #### 2.7 简易选项卡 主要涉及：this，index的用法，for/in语句便利属性使用 #### 2.8 简易js年历 主要涉及：for/in函数使用和onmouseover配合使用效果。 #### 2.9 单一按钮显示、隐藏 主要涉及：if...else...语句转换为条件表达式？条件1：条件2。 vertical-align用于垂直对齐设置。 背景图片使用repeat属性设置如何重复背景图像 #### 2.10 提示框效果 主要涉及：after伪类使用配合clear清浮动，visibility:hidden 关于css的书写，简易步骤：重置各类元素的margin和padding为0-->尊崇从上到下，从外到内自定义样式。 #### 2.11 鼠标移过，改变图片路径 主要涉及：盒子宫格布局 #### 2.12复选框全选，全不选，反选 主要涉及：块标签、行内标签的搭配使用，功能函数定义和调用，计数循环的运用，自定义表格dl的使用。 #### 3.1 typeof字符类型显示 主要涉及：[typeof的运用，转义字符的使用](https://blog.csdn.net/stewen_001/article/details/22871737) #### 3.2 用parseInt解析数字，并求和 主要涉及：parseInt数字转化，使用正则表达式限制input.value值数据类型，element.innerHTML默认获取到的数据类型为字符串，可以用console.log #### 3.3 累加按钮，自加1 主要涉及：获取input的value值的数据类型为字符型，若需要做数据运算，需要使用parseInt进行数据类型转换；函数设定return返回到调用函数，将函数计算的值进行二次运算或者通过其他方式体现出来。注意通过条件对比得到的值都需要变量存储。 #### 3.4 输入数字，比较大小 主要涉及：parseInt转换为数字，math方法使用。 #### 3.5 页面加载后累加，自加1 主要涉及：setInterval()重载方法，可以成为定时器。 #### 3.6 判断数字是否为两位数 主要涉及：获取字符长度。 #### 3.7 网页计算器-----------------【难点】 主要涉及：块元素+行内元素实现内容水平和垂直同时居中；position:relative和position:absolute的配合定位，附加float定位;switch使用；eval方法使用；slice方法；replace方法 逻辑符号：&&，&，||，|的运用和区别 通过设置状态变量，使用逻辑运算控制函数功能的变化 #### 3.8简易网页时钟-----------------【难点】 主要涉及：Date()对象和其方法的使用，setInterval()方法的使用。fon/in循环控制属性的变化 #### 3.9倒计时时钟-----------------【难点】 主要涉及：setInterval的启动和消除应用，分秒转换和重新赋值 #### 4.1setTimeout应用 主要涉及：了解setTimeout和setInterval的区别,证明了变量即对象以及巧妙运用达成减少代码的书写量 #### 4.2自动播放-幻灯片效果 主要涉及：定时器setInterval配合透明效果opacity实现图片淡入导入和幻灯片效果，relative-absolute配合内部定位，函数的运用 #### 4.3自动改变方向-幻灯片效果 主要涉及：和4.2章节关联，此章节引入布尔值并巧妙运用，通过判断状态的变化，而改变执行函数的变化。 > 我在做题的时候，欠缺的就是这最后一步，布尔值的引用。不过，收获就是：如果遇到多种结构相似的执行函数，可以考虑布尔值的引用 #### 4.4arguments应用-求出函数参数总合 主要涉及：初次接触arguments，大概可以简单的理解为：arguments为无参函数在需要传入参数时的参数对象集合，可以参考数组通过索引值获得该集合对应位置的参数。 #### 4.5css函数-设置、读取对象的属性 主要涉及:在个人代码中，主要使用了window.getComputedStyle()方法用于获取元素的样式,注意注意字符需要**双引号**包括。 在原文代码中，再一次的深入使用对象的概念，暂时还看不懂，先跳过了 #### 4.6当前输入框高亮显示 主要涉及：js动作中onfocus和onblur的使用 #### 4.7数组练习：各种数组方法的使用 主要涉及：三元表达式的运用，其中，表达语句1和表达语句2中，如果涉及到多个表达式，需要用**英文逗点分割**。 **数组长度为0和数组为空，用于初始化数组的灵活运用**，**里还有疑问，对于两者的区别不甚明了** > split()方法，用来分割字符 > splice()方法对数组的添加、删除和替换。 > join()方法，返回一个字符串，该字符串是通过把arrayObject每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入separator 字符串而生成的 > shiift()和unshift()方法的联合使用，进行数组的**头部**中对象的添加或者删除。 > pop()和push()方法的联合使用，对数组的**尾部**中对象的添加或者删除。 #### 4.8事件练习：封装兼容性添加、删除事件的函数 主要涉及：使用addEventListener【为元素绑定事件】和removeEventLstener【接触事件绑定】。注意ie兼容性使用，attchEvent和detachEvent，功能同上 **重点**：关于封装事件监听，需要完全掌握！！！！！！！ #### 4.9星级评定系统 主要涉及：雪碧图的定位， + js操作对象的样式的左侧距离：如：oUl.offsetLeft = oSpan[0].offsetWidth + oUl.style.marginLeft + offsetWidth = this.width + 2\*border + 核心是fnPoint()函数的运用，将运算收纳在一个可控的范围内 #### 5.1模拟select控件 主要涉及：阻止事件冒泡对父元素事件的影响。 #### 5.2显示单击的坐标 主要涉及：浏览器对象的坐标获取，event.clientX[获取对象x坐标]，event.clientY[获取对象y坐标] #### 5.3用户按下键盘，显示keyCode 主要涉及：DOM event对象中keyCode属相的使用 #### 5.4阻止右键菜单（阻止默认事件） 主要涉及：oncontextmenu属性的使用--->阻止右键菜单弹出 #### 5.5跟随鼠标移动（大图展示） 主要涉及：onmouseover,onmousemove,onmouseout的联合使用。 image对象的创建，元素的创建(document.createElement)、插入(appendChild)和移除(removeChild)； **重点**offsetWidth等元素视图属性的运用。 #### 5.6自定义右键菜单 主要涉及：oncontextmenu属性的使用---->阻止冒泡 #### 5.7用键盘控制div 主要涉及：window.event事件，伴随keyCode的变化和ctrlKey的参与时，盒子样式的变化 #### 5.8div闪烁 主要涉及：setInterval和clearInterval的应用 #### 6.1完美拖曳 主要涉及： 关于数组的push，pop等应用，鼠标事件的触发和冒泡阻止 #### 6.2 仿腾讯微博效果 主要涉及： 事件绑定和删除，以及函数式编程思想 #### 6.3 自定义右键多级目录 主要涉及： 定时器的运用， html结构对于js的编写的影响，很多章节都在都透露着 面向对象语言中使用面向过程的思维进行js功能编写 #### 7.1 自动往返轮播（缓冲效果） 主要涉及： 从这一章节开始，着重强调练习**定时器**运行 #### 7.2 图片切换 主要涉及： onload对于预加载的图片的应用，缓动动画的应用和使用 #### 7.3 移动效果 主要涉及： 堆栈的原理通过push，pop，shift以及unshift的应用实现， json数据的存取应用 #### 8.1 iphone手机解锁效果 主要涉及： 缓动动画的应用，setCpature()让一个元素捕获所有的鼠标事件 releaseCapture()打断当前的鼠标事件 #### 8.2 自定义滚动条 主要涉及： 结构规划，css样式书写，js函数编程思想应用（面向对象语言中的面向过程思考） [event.wheelDelta和event.detail](https://www.cnblogs.com/ertingbo/p/7093298.html) #### 8.3 拖曳-clone 主要涉及： **样式兼容性判断**:获取判断，setCature和releaseCapture对onmousedown的同时应用【ie专用】 #### 8.4 拖曳并可以改变大小 主要涉及： 函数编程的思维建立，