js基本语法+es6(异步)+js内部原理(闭包,原型链,继承)。 我们BOM浏览器进行操作,DOM文档,事件。:js文档理论
offset,client,scroll。+ 动画特效。 + js交互案例。:页面一些特性。
记住50个案例,就好!
BOM: 1 分时间问候案例。 2 隐藏明文案例 3管理二维码案例。4循环精灵图。 5显示隐藏文本框内容
6密码框验证信息。7 排他思想。 8百度换肤 9表格各行变色。10 购物车 表格全选。11tab切换布局!12下拉菜单。
13 发布留言。删除留言。14动态生成表格。 15禁止选中文字。 16获取鼠标的坐标。17 快递单号查询。
BOM: 1 5s后端自动关闭广告。 2 倒计时定时器。 3 5s跳转网页。
offset: 1 拖动模态框。 2 放大镜效果。3 淘宝固定侧边栏。
动画: 1动态移动效果。
综合:轮播图。
0JS特效
-
图片切换 衣服相册切换效果
初学者小白实现图片切换 封装图片切换代码 图片切换完整版 -
显示和隐藏图片
-
关闭小广告
-
百度换肤
-
千千音乐盒实现全选和反选
-
P1111 表单验证 随机验证码校验 上传图片验证
-
P1414 发布评论
-
P1515 九宫格布局 九宫格布局定位实现
-
P1717 日期特效
-
定时器的回顾 数字时钟案例
-
transform的应用
-
长图滚动案例
1 offset,client,scroll家族。
css里面获取位置,盒子的大小,。但是如何通过js来获取呢?那么 需要通过offset
offset 偏移量。
element.offsetTop , offsetLeft:距离左边的位置,和顶部的位置。 没有右边和下边。
距离是有标准的!以什么为标准呢。如果父元素,以父元素。没有父元素,以body为准。
element.Width, element.Height : 盒子本身的宽度和高度。
(包括padding,border)
element.offsetParent: 获取父元素的。
返回带有定位的父亲,一级一级向上找,否则返回的是body。
element.parentNode返回的是最近一级的亲父亲,无论父亲有没有定位。
offset和style的区别。
1 e.offsetWidth <->e.style.width style只能获取行内样式值。不能获取style里面的。
2 offset带来的数字的,不带单位。e.style.width:获得带有单位的字符串。
3 e.offsetWidth 包含:padding+border+width。e.style.width:width
4 e.offset只能读取,不能改。 e.style.width ='200px' 可以读可以更改。
因此想要获取元素的大小位置,offset更合适。 如果想改变元素,style更合适。
1 获得元素 距离 带有定位父元素的位置。 offsetParent.
2 获取元素自身的大小。
3 返回的数值不带单位。
案例一: 获取鼠标的坐标。
鼠标在页面的坐标。 e.PageX e.PageY
子距离左侧的距离。e.offsetWidth,e.offsetTop
client: client和offset基本一样。除了element.clientWidth ,e.clientHeight:不包含边框!
立即执行函数:1.写法 ( function(){} ) () . ( fcuntion(){} () )
2.第二个()可以传入参数。
3. 独立创建一个作用域。所有变量都是局部变量。
元素滚动scroll系列。
scrollHeight,scrollWidth: 不包含边框,指的是实际大小。尤其是滚动距离。
元素的距离:
offset 系列主要获取的是元素的位置: offsetLeft,offsetTop
client经常获取元素的大小: client Width, clientHeight
scroll经常获取滚动的距离:scrollTop,scrollLeft
页面的滚动距离:window.pageXoffset获得
2 动画。基本动画,匀速动画,幻速动画,透明度动画,动画封装。
动画函数封装!
定时器setInterval()不断移动盒子位置。
1 获得盒子当前的位置。
2 盒子加一个位置。
3 定时器不断重复这个动作。
4 加一个结束定时器的条件。
5 此元素需要定位才可以,才能使用e.style.left
3 常用js特效。
4 事件。 事件流。事件对象。事件处理程序。事件对象属性。
mouse enter : 只会经过自身盒子会触发。不会冒泡。mouseleave也不会冒泡。
mouse over: 经过自身盒子会触发,经过子盒子还会触发。子盒子冒泡到父盒子。