JavaScript 基础第十天
学习总结
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 基础第十天的更多相关文章
- 回归JavaScript基础(十)
主题:创建对象 原型模式 JavaScript中的每个对象都有一个prototype属性(原型属性),这个属性是一个指针,指向一个对象,而这个对象可以由一些属性和方法组成.被指向的对象,可以是多个对象 ...
- javascript基础拾遗(十二)
1.javascript的单线程特性 在javascript中,所有的代码都是单线程的 因此所有的网络操作,浏览器事件,都必须是异步执行的,异步执行的逻辑是回调. function callback( ...
- javascript基础拾遗(十)
1.支持ES6标准的浏览器 IE10+ Chrome Safari Firefox 移动端浏览器统一都支持 需要注意的是,不同浏览器对各个特性的支持也不一样 2.window对象 当前浏览器窗口对象 ...
- 学习笔记 第十五章 JavaScript基础
第15章 JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组 ...
- 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式
JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...
- Javascript基础回顾 之(一) 类型
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Bootstrap <基础三十二>模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- (转)JAVA AJAX教程第二章-JAVASCRIPT基础知识
开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用 ...
- css3基础教程十六变形与动画animation
前面我们讲过的变形与动画一般都是通过鼠标的单击.获得焦点,被点击或对元素进行一定改变后以后触发效果的,那么有没有像Flash一样自动播放的动画效果呢?答案当然是肯定的,这就是我们今天要讲到的anima ...
随机推荐
- bootstrap 时间控件带(时分秒)选择器
1.控件下载地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm,参数设置说明也在这个链接下面: 2.具体参数说明(复制原链接) ...
- ruby Matrix 输出 格式化
require 'matrix' class Matrix def to_pretty_s s = "" i = 0 while i < self.column_size s ...
- 使用PHP发送email进行账号激活或者密码修改操作
使用PHPMailer编写发送邮件 PHPMailer需PHP的socket扩展支持,而PHPMailer链接qq域名邮箱时需要ssl加密方式(qq邮箱最近做了限制,新开域名邮箱不再允许通过smtp协 ...
- ASP.NET5 Beta8可用性
ASP.NET5 beta8现已上都的NuGet作为一个工具升级到Visual Studio2015!此版本极大地扩展.NET核心对OS X和Linux所支持的范围.您现在可以使用网络,加密和全球化特 ...
- 半小时快速了解redis,基于ubuntu 12.04 + redis 2.8.9
一.什么是redis ? 其官方介绍是: Redis is what is called a key-value store, often referred to as a NoSQL databas ...
- 使用selenium控制滚动条(非整屏body)
方法原理: (1)使用jQuery CSS 操作 - scrollTop() 方法,设置 <div> 元素中滚动条的垂直偏移,语法:$(selector).scrollTop(of ...
- SQL 统计整个服务器上各个数据库占用的空间
create procedure [dbo].[P__SpaceUsedView]asbegin if not exists (select 0 from tempdb..sysobjects whe ...
- 准备开发一款开源NES模拟器
前几天无意见看到一些NES的开发资料,勾起了小时候暑假的无数美好回忆,做为一名码农,萌发了自己写一款模拟器的想法.一来可以加深自己对整个系统/游戏的理解,一来可以实现小时候的梦想:),希望可以坚持下来 ...
- 2. Abstract Factory(抽象工厂)
意图: 提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类. 适用性: 一个系统要独立于它的产品的创建.组合和表示时. 一个系统要由多个产品系列中的一个来配置时. 当你要强调一系列相关 ...
- java Thumbnails 加载网络图片,处理返回base64
URL url = new URL("图片网络地址"); BufferedInputStream in = new BufferedInputStream(url.openStre ...