学习总结

1定时器

①.setTimeout() // 间隔多长时间执行一次(会返回一个数字型的标识)

②.setInterval() // 间隔多长时间执行,是不断地执行。

③.clearTimeout() // 清除定时器,括号里面放的是定时器的名称timeId

2 window.onload()

是window中的事件作用是等待页面加载结束后触发当前事件。

3 变量的作用域

在JS当中没有块级作用域,只有两个作用域。一个是全局作用域,另一个是局部作用域。

4 JS预解析机制

JS在代码执行之前,会进行预解析。把变量的声明,函数的声明,参数等提到作用域的最前面。(匿名函数的形式是类似于赋值表达式的所以不会提前)

5 offset系列

5.1 offset系列和demo.style系列的区别

①.Offset系列是用来得到对象的大小,相对于offset系列。demo.style只能获取元素的行内式样式,而offset可以获取元素的内嵌式样式。

②.demo.style是字符而offset是字符串。

③.demo.style用于设置行内样式而offset是只读属性不能设置样式。一般用offset获取二用demo.style设置

④.Offsetheight=padding+border+with而style.height则是设置width

⑤.offsetleft 是到达最近定位的父盒子的左侧或者顶部的距离,(外边到内边的距离即自身border到父元素padding 的距离)。如果父元素没有定位则以body为主。

offsetleft是以border的左上角为基准,而demo.style.left是以margin为基准的。

⑥.Offsetparent 返回当前对象最近带有定位的父元素,如果当前的父元素都没有定位则返回的是body

6 匀速动画

6.1 动画的原理

leader =  leader +step

Step 是根据自身需求所定义的,leader是动画开始是元素的位置,即初始位置。让定时器不断的执行某个函数修改盒子的位置属性最后就形成了动画的效果。

7  scrollHeight和scrollTop

7.1 srollHeight

获取被撑开的之后的大小width+padding

7.2 scrollTop

滚动出的距离,超出盒子上面的部分

7.3 获取页面滚动出去的距离

||之前是支持chrome,foxfire。后面则是兼容ie的。

ScrollTop =

document.body.scrollTop||document.documentElement.scrollTop

scrollLeft =

document.body.scrollLeft||document.documentElement.scrollLeft

8 缓动动画

缓动动画的内容就是在匀速动画的基础上不断改变每次的step的值让动画可以产生类似的一个动画效果。

9获取任意样式的值

Function getstyle(){

If(window.getComputerStyle){

return window.getComputerStyle(element,null)[attr];

}else{

Return element.currentStyle[attr];

}

}

10 事件参数e

当事件发生的时候,系统就会自动给事件处理函数传递一个参数,这个参数就是e。它会提供事件相关的一些数据。

11 e.clientX和e.pageX

e.clientX是获取鼠标在可视区域的位置。

e.pageX 是获取鼠标在页面中的位置。(在IE8中不支持e这个事件参数一般是使用window.event)

12 注册事件

12.1 行内式注册

12.2 匿名函数注册

12.3 addEventListener

btn.addEventListener("click",handle,false);

JavaScript 基础第十天的更多相关文章

  1. 回归JavaScript基础(十)

    主题:创建对象 原型模式 JavaScript中的每个对象都有一个prototype属性(原型属性),这个属性是一个指针,指向一个对象,而这个对象可以由一些属性和方法组成.被指向的对象,可以是多个对象 ...

  2. javascript基础拾遗(十二)

    1.javascript的单线程特性 在javascript中,所有的代码都是单线程的 因此所有的网络操作,浏览器事件,都必须是异步执行的,异步执行的逻辑是回调. function callback( ...

  3. javascript基础拾遗(十)

    1.支持ES6标准的浏览器 IE10+ Chrome Safari Firefox 移动端浏览器统一都支持 需要注意的是,不同浏览器对各个特性的支持也不一样 2.window对象 当前浏览器窗口对象 ...

  4. 学习笔记 第十五章 JavaScript基础

    第15章   JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组 ...

  5. 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  6. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  7. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  8. (转)JAVA AJAX教程第二章-JAVASCRIPT基础知识

    开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用 ...

  9. css3基础教程十六变形与动画animation

    前面我们讲过的变形与动画一般都是通过鼠标的单击.获得焦点,被点击或对元素进行一定改变后以后触发效果的,那么有没有像Flash一样自动播放的动画效果呢?答案当然是肯定的,这就是我们今天要讲到的anima ...

随机推荐

  1. 批量执行SQL语句,进行删除,插入或者更改。

    private bool ExecuteTransaction(List<string> list) { using (SqlConnection connection = new Sql ...

  2. Java基础知识系列——日期

    日期类型也是在编程中经常用到的一种数据类型. Java中的日期类型为Date. 另外需要记住三个类: java.text.SimpleDateFormat; java.util.Calendar; j ...

  3. iOS 自定义图片和文字垂直显示按钮<上面是图片,文字显示下面>

    #import <UIKit/UIKit.h> @interface VerticalButton : UIButton @end #import "VerticalButton ...

  4. setValue和setObject的区别

    在NSMutableDictionary的方法中有setValue forKey与setObject forKey,它们都可以用来设置某一个key值对应的value 1,setValue: forKe ...

  5. Bug集

    1. Spring MVC 双请求问题 viewresolver一定要放在servlet-dispatcher.xml里,否则会导致在请求成功后以后渲染页面,然后又发一次请求的状况,最后导致页面无法显 ...

  6. java中关于正则一些基础使用

    希望能帮到有需要的朋友.-----转载请注明出处. 对于正则处理相关的知识,我一开始是从网上找资料配合使用Java API1.6的一个中文版进行学习,很感谢翻译这个版本的团队(机构)或者个人,很感谢那 ...

  7. node服务器

    markdown support HTTP服务器 一.服务器基本方法 "use strict"; // 1.加载http模块 const http = require('http' ...

  8. python自我输出源程序

    1.参考相应c程序 s='s=%s%s%s;print s%s(chr(39),s,chr(39),chr(37))';print s%(chr(39),s,chr(39),chr(37)) http ...

  9. windows环境下安装vue+webpack的开发环境

    本人最近在学习vue,在学习的过程中遇到对的问题和解决方法 1.我们首先要安装node.js.node.js的官方地址为:https://nodejs.org/en/download/,下载完毕,按照 ...

  10. flask-admin章节五:wtforms FormField超级炫酷使用

    1. 概述 查看wtforms代码树fields目录的core.py,会发现在文件开头有这样的语句: __all__ = ( 'BooleanField', 'DecimalField', 'Date ...