05 2020 档案
摘要：实现功能： 1. 点击左边的小li，会滚动到右边对应的内容区（电梯导航 -> 内容区） ① 当滚动到某一位置时，就让电梯导航显示出来 ② 点击电梯导航页面可以滚动到相应内容区域 ③ 核心算法：因为电梯导航模块和内容区模块是一一对应的，所以对应的索引号是一样的 ④ 当点击电梯导航某个小模块时，就可以拿
阅读全文
摘要：① 核心原理：使用animate动画返回顶部。 ② animate动画函数里面有个scrollTop属性，可以设置位置。 ③ 但是是元素做动画，因此使用 $("body, html").animate({scrollTop: 0}); <script> // 页面打开时就到一个固定的位置 $(doc
阅读全文
摘要：具体功能可参考网站：http://www.todolist.cn/ 实现功能如下： 1. 文本框里面输入内容，按下回车，就可以生成待办事项。 2. 点击待办事项的复选框，就可以把当前数据添加到已完成事项里面。 3. 点击已完成事项的复选框，就可以把当前数据添加到待办事项里面。 4. 但是本页面内容刷
阅读全文
摘要：下面从6个方面介绍jQuery事件： jQuery事件注册 jQuery事件处理 jQuery事件对象 jQuery拷贝对象 多库共存 jQuery插件 1. jQuery事件注册 单个事件注册： 语法： element.事件(function() {}) // 例如 $("div").click(
阅读全文
摘要：<!-- 页面布局 --> <div class="box" id="weibo"> <span>微博发布</span> <textarea class="txt" col="30" row="10"></textarea> <button class="btn">发布</button> <ul><
阅读全文
摘要：购物车页面如下： 实现的主要功能有6点： 1. 全选功能 ① 全选思路：里面3个小得复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。 ② 因为checked是复选框得固有属性，此时需要利用prop()方法获取和设置该属性。 ③ 把全选按钮状态赋值给3个
阅读全文
摘要：从下面7个方面介绍jQuery常用的API： jQuery选择器 jQuery样式操作 jQuery效果 jQuery属性操作 jQuery文本属性值 jQuery元素操作 jQuery尺寸、位置操作 1. jQuery选择器 ① jQuery基础选择器 原生JS获取元素方式很多，很杂，而且兼容性情
阅读全文
摘要：实现功能： ① 鼠标经过某个小li有两步操作： ② 当前小li宽度变为224px，同时里面的小图片淡出，大图片淡入 ③ 其余兄弟小li宽度变为69px，小图片淡入，大图片淡出 <!-- 页面布局 --> <div class="king"> <ul> <li class="current"> <a
阅读全文
摘要：实现功能： ① 点击上部的li，当前li添加current类，其余兄弟移除类 ② 点击的同时，得到当前li的索引号 ③ 让下面内容区里面相应索引号的item显示，其余的item隐藏 <div class="tab_list"> <ul> <li class="current">商品介绍</li> <
阅读全文
摘要：① 核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏 ② 需要得到当前小li的索引号，就可以显示对应索引号的图片 ③ jQuery得到当前元素索引号$(this).index() ④ 中间对应的图片，可以通过eq(index)方法去选择 ⑤ 显示元素show()，隐
阅读全文
摘要：<!-- 页面布局 --> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li> <a href="#">私信</a> </li> <li> <a href="#">评论/a> </li> <li> <a href="#">@我</a> </li&
阅读全文
摘要：1. jQuery概述 ① JavaScript库 仓库：可以把很多东西放到这个仓库里面，东西只需要到仓库里面查找到就可以了。 JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画a
阅读全文
摘要：实现功能： 页面滚动某个地方就显示，否则隐藏 点击可以返回顶部 下面详细地说明具体的实现步骤： ① 滚动到某个地方后显示 ② 事件：使用scroll页面滚动事件 ③ 如果被卷去的头部（window.pageYOffset）大于某个数值 ④ 点击返回顶部的图片，使用window.scroll(0, 0
阅读全文
摘要：移动端轮播图功能和PC端基本一致。 实现功能： 可以自动播放图片 手指可以拖动播放轮播图 下面详细地说明具体的实现步骤： 1. 自动播放功能： ① 开启定时器 ② 移动端移动可以使用CSS3的translate移动。注意， 使用translate不需要添加就可以移动 ③ 想要图片优雅的移动，就需要添
阅读全文
摘要：从以下4个方面介绍移动端特效： 触屏事件 移动端常见特效 移动端常用开发插件 移动端常用开发框架 1. 触屏事件 移动端浏览器兼容性较好，我们不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件touch（也称触摸事件），Android和IOS都
阅读全文
摘要：随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。 本地存储特性： ① 数据存储在用户浏览器中 ② 设置、读取方便、甚至页面刷新不丢失数据 ③ 容量较大，sessionStorage约5M、l
阅读全文
摘要：从下面5个方面介绍PC端的网页特效： 元素偏移量offset系列 元素可视区client系列 元素滚动scroll系列 动画函数封装 常见网页特效案例 1. 元素偏移量offset系列 offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得
阅读全文
摘要：轮播图也称为焦点图，是网页中比较常见的网页特效。 功能需求： 1. 鼠标经过轮播图模块，左右按钮显示，鼠标离开则隐藏左右按钮。 2. 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 3. 图片播放的同时，下面小圆圈模块跟随一起变化。 4. 点击小圆圈，可以播放相应图片。 5. 鼠标不经
阅读全文
摘要：实现功能： ① 鼠标经过某个小li，筋斗云跟着到当前小li的位置 ② 鼠标离开这个小li，筋斗云就复原为原来的位置 ③ 鼠标点击了某个小li，筋斗云就会留在点击这个小li的位置 具体实现思路如下： 利用动画函数做该动画效果 原先的筋斗云的起始位置是0 鼠标经过某个小li，就把当前小li的offset
阅读全文
摘要：这个案例功能是模仿京东的一个小功能，如下图所示： 鼠标移动到箭头时，问题反馈这个盒子从右边滑动出来，鼠标一离开，向左边滑动过去 <!-- CSS样式 --> <style> .sliderbar { position: fixed; right: 0; bottom: 100px; width: 4
阅读全文
摘要：1. 原先侧边栏是绝对定位（相对于body来定位） 2. 当页面滚动到一定位置时（header部分全部被卷去时），侧边栏改为固定定位 3. 页面继续滚动，会让“返回顶部”显示出来（滚动到main区域时，显示“返回顶部”） 需要用到页面滚动事件scroll，因为是页面滚动，所以事件源是document
阅读全文
摘要：整个案例可以分为三个功能模块： ① 鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开则隐藏遮挡层和大图片的盒子的功能：就是显示与隐藏。 ② 黄色的遮藏层要跟随鼠标移动的功能： 把鼠标坐标给遮挡层不合适，因为遮挡层是用定位方式设置的，所以它的坐标是以父盒子为准的 首先获得鼠标在盒子里的坐标 之后
阅读全文
摘要：下面是flexible.js的源码： // 立即执行函数 (function() {})() 或者 (function() {} ()) // 主要作用：创建一个独立的作用域，里面所有的变量都是局部变量，避免了命名冲突问题 // 立即执行函数不需要调用，立马能够自己执行 (function flex
阅读全文
摘要：实现功能：弹出框也称为模态框 ① 点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层，display: block; ② 点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层，display: none; ③ 鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动 ④ 鼠标松开，可以停
阅读全文
摘要：下面从以下7个方面介绍BOM： BOM概述 window对象的常见事件 定时器 JS执行机制 location对象 navigator对象 history对象 1. 什么是BOM？ BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其
阅读全文
摘要：主要实现的是数据在不同页面中的传递功能 ① 第一个登录页面，里面有提交表单，action提交到index.html页面 ② 第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果 ③ 第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的location.search
阅读全文
摘要：<button>点击</button> <div></div> <script> var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.addEventListener('cl
阅读全文
摘要：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。 1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window） // 1. 全局作用域或者普通函数中this指向全
阅读全文
摘要：实现功能：点击按钮后，该按钮60秒内不能再次点击，防止重复发送短信 ① 按钮点击之后，会禁用按钮（disabled为true） ② 同时按钮里面的内容会有变化，注意button里面的内容通过innerHTML修改 ③ 里面秒数是有变化的，因此需要用到定时器 ④ 定义一个变量，在定时器里面，不断递减
阅读全文
摘要：① 这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval） ② 三个黑色盒子里面分别存放时分秒 ③ 三个盒子利用innerHTML放入计算的小时、分钟、秒数 ④ 问题：第一次执行也是间隔毫秒数，因此刚刷新页面会有空白 ⑤ 解决方法：最好采取封装函数的方式，这样可以先调用用一次这个
阅读全文
摘要：① 核心思路：5秒之后，就把这个广告隐藏起来 ② 用定时器setTimeout() <body> <img src="images/ad.jpg" alt="" class="ad"> <script> var ad = document.querySelector('.ad'); setTimeo
阅读全文
摘要：下面从这七个方面来介绍事件高级： 注册事件（绑定事件） 删除事件（解绑事件） DOM事件流 事件对象 阻止事件冒泡 常用的鼠标事件 常用的键盘事件 1. 注册事件（绑定事件） 给元素添加事件，称为注册事件或者绑定事件。 注册事件有两种方式：传统方式和方法监听注册方式。 传统注册方式： 利用on开头的
阅读全文
摘要：实现功能：当我们在文本框输入内容时，文本框上面自动显示大字号的内容 ① 快递单号输入内容时，上面的大号字体盒子（con）显示出来（这里面的字号更大） ② 表单检测用户输入：给表单添加键盘事件 ③ 同时把快递单号里面的值（value）获取过来赋值给con盒子（innerText）作为内容 ④ 如果快递
阅读全文
摘要：① 核心思路：检测用户是否按下了s键，如果按下了s键，就把光标定位到搜索框里面 ② 使用键盘事件对象里面的keyCode判断用户按下的是否是s键 ③ 搜索框获得焦点：使用js里面的focus() 方法 <body> <input type="text"> <script> var search =
阅读全文
摘要：① 鼠标不断的移动，使用鼠标移动事件：mousemove ② 在页面中移动，给document注册事件 ③ 图片要移动距离，而且不占位置，所以需要使用绝对定位 ④ 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个 x 和 y 坐标作为图片的 top 和 left 值就可以移动图片 这个案例
阅读全文
摘要：1. 禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }) 2. 禁止鼠标选中（selec
阅读全文
摘要：什么是DOM？ 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 ① 对于JavaScript，为了能够使Java
阅读全文
摘要：<script> // 1. 先准备好学生的数据 var datas = [{ name: '张三', subject: 'JavaScript', score: 100 }, { name: '李四', subject: 'JavaScript', score: 98 }, { name: '王五
阅读全文
摘要：<textarea name="" id=""></textarea > <button>发布</button> <ul></ul> <script> // 1. 获取元素 var btn = document.querySelector('button'); var text = document
阅读全文
摘要：<script> // 1. 获取元素 var nav = document.querySelector('.nav'); var lis = nav.children; // 得到4个小li // 2. 循环注册事件 for (var i = 0; i < lis.length; i++) { l
阅读全文
摘要：①Tab栏切换有2个大的模块 ②上面的选项卡模块，点击某一个，当前这个底色会是红色，其余不变（排他思想），用修改类名的方式 ③下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面 ④规律：下面的模块显示内容和上面的选项卡一一对应相匹配。 ⑤核心思路：给上面的tab_list里面的
阅读全文
摘要：① 全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可 ② 下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选按钮就不选中。 <script> // 1. 全
阅读全文
摘要：<script> // 1. 获取元素，获取的是tbody里面所有的行 var trs = document.querySelector('tbody').querySelectorAll('tr'); // 2. 利用循环绑定注册事件 for (var i = 0; i < trs.length;
阅读全文
摘要：<ul class="baidu"> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"><
阅读全文
摘要：精灵图的每个小图标的坐标都是有规律的。 <script> // 1. 获取元素，所有的小li var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { // 让索引号乘以44就是每个小li的背景
阅读全文
摘要：<img src="images/s.gif" alt=""> <div>上午好</div> <script> // 根据系统不同时间来判断，所以需要用到日期内置对象 // 利用多分支语句来设置不同的图片 // 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性 // 需要一个div元
阅读全文
摘要：1. Web APIs阶段与JavaScript语法阶段的关联性是什么？JS基础学习的是ECMAScript基础语法，Web APIs是JS的应用，大量使用JS基础语法做交互效果。 2. 什么是API？API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能，不用纠结内部如何实现。 3. 什
阅读全文
摘要：响应式开发不需要单独制作移动端页面。 响应式开发原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕（手机） x < 768px 小屏设备（平板） 768px <= x < 992px 中等屏幕（桌面显示器） 992px <= x <
阅读全文
摘要：前面两篇介绍了流式布局和flex弹性布局，在介绍rem之前，我们先考虑以下三个问题： 1. 页面布局文字能否随着屏幕大小变化而变化？ 2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？ 3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？ rem的出现完美的解决了上面的三个问题。
阅读全文
摘要：flex是flexble Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设置为flex布局以后，子元素的float（浮动）、clear（清除浮动）和vertical-align（垂直居中，margin: 0 auto是水平居中）
阅读全文
摘要：DPG图片压缩技术： 京东自主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。 能够兼容jpeg，实现全平台、全部浏览器的兼容支持。 经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。 webp图片格
阅读全文
摘要：流式布局（百分比布局）： 流式布局，也就是百分比布局，也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充 流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width
阅读全文
摘要：移动端布局和PC端有所区别： 1) 单独制作移动端页面（主流） 流式布局（百分比布局） flex弹性布局（推荐） less+rem+媒体查询布局 混合布局 2) 响应式页面兼容移动端 媒体查询 bootstrap 移动端布局需要了解几个概念： 1. meta视口标签 <!-- 视口的设置：devic
阅读全文
摘要：1.首先在GitHub上新建一个空项目 注意记住该项目的远程链接，后面会用到 2.打开git bash命令行，新建一个空文件夹，进入该文件夹内，并使用命令git init进行初始化 3.输入命令 git clone 将GitHub上的远程项目克隆到本地 4.等待克隆项目完成之后，进入到该项目中，输入
阅读全文
浙公网安备 33010602011771号