间歇定时器如何使用,间歇定时器怎么调

首页 > 经验 > 作者:YD1662022-11-03 16:02:11

首先回顾一下以前内容

(一)回顾

1.通过JS控制表单

2.innerText innerHTML

(二)课程目标

1. 节点控制

2. 控制样式属性

3. 改变盒子大小

4 . 川剧变脸

5. 开关效果

6. 关闭广告

7. 隔行变色

(三)节点控制

什么是节点?什么是元素?

页面上的都可以称之为一个节点,包括纯文字、换行等。元素指的是标签;

为什么要用节点控制?

因为getElementsByTagName()没有层级,会把满足标签名的所有元素全部获得

节点控制的关键点是:节点之间的关系

子节点 父节点 兄弟节点

节点是包含元素的

2.1节点类型

node.nodeType = 1; //元素节点

根据值不同,表示不同的节点类型:

1表示元素节点 2表示属性节点 3表示文本节点… 8 注释节点

nodeValue:节点的值

nodeName:节点的名称

注意:元素节点的nodeValue值返回的是null,以后可以用这个进行一些判断

2.2节点层次: 子节点 父节点 兄弟节点

childNodes:子节点 凡是在html中出现的都称为节点;

children:子元素:虽然不是早期DOM标准中的方法,但是所有浏览器都支持

nextSibling:下一个兄弟节点

nextElementSibling:下一个兄弟元素 有兼容性问题

previousSibling:上一个兄弟节点

previousElementSibling:上一个兄弟元素 有兼容性问题

JQuery 不存在兼容问题

firstChild :第一个节点

firstElementChild:第一个子元素 有兼容性问题

lastChild:最后一个子节点

lastElementChild:最后一个子元素 有兼容性问题

parentNode :父节点

(四)通过JS样式属性

style属性是对象,style对象的属性是字符串

style只能获取和设置行内样式

DOM对象中style的属性和标签中style内的值几乎一样

因为在style里面的background-color这样的命名方式在JS是不允许的,所有一般就变成了驼峰命名法 ——就是第二个单词的首字母大写 backgroundColor

只是带有 - 的属性名较为特殊(如background-color变成了backgroundColor),因为在JS中 - 不能作为标识符

3.1 设置和获取样式

通过对象的style属性只能设置和获取行内样式

获取样式的时候 如果行内没有该样式 输出空字符串

设置样式的时候 赋的值是一个字符串 如果这个属性有单位 一定要节点加单位

3.2 什么情况通过class控制样式 什么情况通过style控制样式

哪种方式最便捷采用哪种方式;

但是如果是属性的值会参与一些运算,必须采用控制行内样式的方式

值的运算最多的是 ;字符串拼接 把要替换的 " 替换内容 "

(一)复制节点

var node = cloneNode(true/false);

true :深层复制,把内部节点一起克隆

false:浅层复制,只复制当前元素

(二)追加节点、删除节点

obj.appendChild(要追加的元素);

1.在元素中的最后追加子元素;

2.如果是克隆出来的节点,不会影响原来节点;

3.直接追加,原来节点就会被删除后再追加;

obj.insertBefore(要插入的元素,插到这个元素的前面);

1.在元素中的子元素前面插入子元素;

2.如果是克隆出来的节点,不会影响原来节点;

3.直接追加,原来节点就会被删除后再追加;

obj.removeChild(要移除的子元素);

从元素中移除子元素;

(三)动态创建元素节点

document.write(“内容”)

直接在文档中书写

innerHTML=”内容”

改变元素对象内部的HTML

createElement()

cloneNode()

创建节点并追加

通过这两种方法创建出来的元素只是保存在内存中,必须放到页面上才行!

武汉大牛哥教育是一家真正的育人为本的公司,学习技术到武汉大牛哥教育

间歇定时器如何使用,间歇定时器怎么调(1)

1.节点控制

2.动态创建元素

(一)课程目标

1.函数的定义方式与执行方式

2.预解析

3.变量的作用域

4.作用域链

5.内置对象

6.BOM

(二)函数的定义方式1.函数的定义方式与函数声明的提升;

2.变量声明提升,只提升声明,不提升赋值;

3.函数声明提升,函数的声明提升到当前作用域的前面;

(三)预解析1.就是页面加载的一种准备方式;2.先去全局找var 再找 function3.看var后面有没有赋值4.再找function5.作为了解内容(四)*变量的作用域*

1.变量类型:全局变量 局部变量

2.全局变量:可以作用域所有区域使用

3.局部变量:在函数内部声明的变量,称为局部变量。只能在函数内部使用

4.隐式全局变量:在函数内部不加var的称也是全部变量

5.块级作用域:在其他语言中,{}内部的称为块级作用域,在里面定义的变量,外部是访问不到的。而在Javascript里面是没有块级作用域的,只有函数作用域

(五)作用域链

1.执行过程

var a = 1;

function fn(){

var a = 2;

}

fn();

console.log(a);

执行过程:1.先找全局范围的var和function;预解析,提升变量声明与函数声明; var a undefined fn{}

2.变量赋值与函数执行 var a = 1; fn(),如果能找到,执行fn(){}

3.fn()函数局部执行: var a undefined

4.函数内部赋值 var a = 2; 函数内部作用域

5.输出全局变量 1

2.多个函数嵌套,内部函数可以访问到外部函数作用域的变量。

var a = 1;

function fn(){

a = 2;

}

fn();

console.log(a);

执行过程:

1.先找全局范围的var 与function预解析,提升变量声明与函数声明; var a undefined fn{}

2.变量赋值与函数执行 var a = 1;

3.fn()函数内部执行 a没有声明会继续往上找;

4.a = 2;

5.输出:2

1. 预解析的过程;1.1 先提升 var 和 function的声明 1.2执行:赋值与fn调用

2.函数作用域:一旦执行函数

3. 全局与局部之间的关系;

局部里面 预解析

变量没有声明时候,这个时候跳出局部继续往上找直到找到为止!

(六)内置对象

1.Window对象 .onload 文档加载

windowOnload文档加载
Open(url)Open(url,”_blank”)Open(url,target,”w,h”);打开窗口
Close();关闭窗口
Location.href =”url”;
setTimeout(fn,time)回调函数,毫秒 3000延时定时器
clearTimeout(timerID)清理定时器
setInterval(fn,time)间歇定时器
clearInterval()清理定时器
Location.href
History.forward();History.back();
(七)工厂模式工厂模式就是通过一个函数批量创建对象的方法

间歇定时器如何使用,间歇定时器怎么调(2)

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.