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);

时间: 2024-09-29 09:35:57

JavaScript 基础第十天的相关文章

回归JavaScript基础(十)

主题:创建对象 原型模式 JavaScript中的每个对象都有一个prototype属性(原型属性),这个属性是一个指针,指向一个对象,而这个对象可以由一些属性和方法组成.被指向的对象,可以是多个对象的原型,这样创建的对象就共享了一个原型对象. 1 function Person() { 2 } 3 4 Person.prototype.name = "xuchaoi"; 5 Person.prototype.age = 24; 6 Person.prototype.sayName =

JavaScript基础知识十五(原型链批量设置公有属性)

function Fn(){ this.x = 100; } /* 1.把原来原型指向的地址赋值给我们的pro,现在它们 操作的是同一个内存空间*/ var pro = Fn.prototype; pro.getA =function(){}; pro.getB =function(){}; pro.getC =function(){}; /*2.重构原型的方式->自己新开辟一个堆内存,存储我们公有的. 属性和方法,把浏览器原来给Fn.prototype开辟的那个替换掉*/ Fn.prototy

javascript基础学习(十五)

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的secure 一.cookie介绍 cookie实际上就是一些信息,这些信息以文件的形式存储在客户端计算机上.在javascript中,cookie主要用来保存状态,或用于识别身份. 二.创建与获取cookie 创建cookie的语法代码如下所示:document.cookie="name=value&q

JavaScript基础--小案例:在网页指定位置弹出错误信息(十二)

案例分析:点击按钮后,在网页上指定区域,提示错误信息!5秒后,错误信息提示自动消失! 1 <script languag="javascript" type="text/javascript"> 2 var clearId; 3 function test(){ 4 document.getElementById("showMsg").style.cssText="width:200px;height:50px;left:6

JavaScript基础--事件驱动和访问CSS技术(十)

1.原理: 2.快速入门案例 js中的事件主要分为4种: 案例:监听鼠标点击事件,并能够显示鼠标点击的位置x,y <script language="javascript" type="text/javascript"> function test1(e){ window.alert('x='+e.clientX+'y='+e.clientY); } function test2(e){ window.alert('x='+e.clientX+'y='+

javascript基础学习(十二)

javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显示器的信息. 目前显示器分辨率为800X600或1024X768两种. screen.height:屏幕的高度 screen.width:屏幕的宽度 screen.availHeigh:屏幕的有效高度 screen.availWidth:屏幕的有效宽度 二.History对象 History对象可以

JavaScript基础--DOM对象加强篇(十四)

1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 writeln 向文档输出文本或者js代码,与write不一样的地方是,writeln是换行输出. 比如: document.write("hello");document.writeln("ok"); hello ok 但是对浏览器来看,输出效果没有区别. 1.3 g

javascript基础学习(十)

javascript之数组 学习要点: 数组的介绍 定义数组 数组元素 数组的方法 一.数组的介绍 数组中的元素类型可以是数字型.字符串型.布尔型等,甚至也可以是一个数组. 二.定义数组 1.通过数组的构造函数来定义数组: var arr=new Array(); var arr=new Array(size); var arr=new Array(element1,element2,...); 2.直接定义数组: var arr=["字符串",true,13]; ps: 和Objec

学习笔记 第十五章 JavaScript基础

第15章   JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组等核心知识和技法 能够编写简单的脚本,解决网页中常见特效和互动效果 15.1  JavaScript入门 JavaScript是一种轻量级.解释型的Web开发语言.现代浏览器都已嵌入了JavaScript引擎./sc 15.1.1 在网页中插入JavaScript代码 使用<script>标签,可