JavaScript零基础学习系列五
定时器
1.定时器:设定时间,在指定的时间之后执行函数或者是程序
a.反复性定时器:var dingshiqi=Window.setInterval(“函数名()”,时间n[毫秒值]);在每隔定的时间n就会执行一次函数,反复执行
b.一次性定时器:var dingshiqi=window.setTimeout(“函数名()”,时间n[毫秒值]);在指定的时间n毫秒之后执行一次函数,执行以后不在执行
2.清除定时器:让定时器不再执行
a.清除反复性定时器:Window.clearInterval(dingshiqi);
b.清除一次性定时器:window.clearTimeout(dingshiqi);
案例:
星星案例
星星案例修改
案例分享
图片的切换:轮播图经典案例。
DOM树
Document Object Model:文档对象模型
- D:documnet,文档,html文档或者xml文档
- O:object,对象,在转成树模型的时候,得到的对象,它有相应的属性和方法,利用他们可以完成任何操作。
- M:model,模型,树模型,有节点构成的一颗树。节点(元素、属性和文本)转成对象。
DOM的分类 - 核心DOM:提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。
- HTMLDOM:针对HTML文档,提供的专有的属性和方法。
- XMLDOM:针对XML文档,提供的专有的属性和方法。
- EventDOM:事件DOM,提供了很多的常用事件。
- CSSDOM:提供了操作CSS的一个接口。
HTML节点树:
DOM中节点的类型:
- document文档节点:代表整个网页,document文档节点不对应标记。是访问文档中各元素的起点。
- element元素节点:元素节点对应于网页中的各标记。
- attribute属性节点:每个元素都有若干个属性。
- text文本节点:文本节点是最底层节点。
核心DOM公共属性和方法 - nodeName:节点名称。
- nodeValue:节点的值。
- firstChild:第一个子节点。
- lastChild:最后一个子节点。
- parentNode:父节点。
- childNodes:子节点列表,是一个数组。
查找html节点的方法 - document.firstChild
- document.documentElement(兼容性较好)
查找body节点的方法 - document.firstChild.lastChild
- document.body(推荐使用)
在核心DOM中,已经可以实现对网页元素的操作了,为什么还要有HTMLDOM呢?
因为,核心DOM中,对节点的访问,都是从根节点开始的,访问方式十分麻烦。特别是当节点层次很深时,更是麻烦。因此,才有了HTMLDOM。
1、HTMLDOM的新特性
- 每一个HTML标记,都对应一个对象。如:
标记,就是一个img对象。
- 每一个HTML标记的属性,与对应的元素对象的属性,一一对应。
- img属性:src、width、height、border、style、title、id、class等。
- 在JS中,img对象属性:src、width、height、border、style、title、id、className等。
HTML DOM访问HTML元素的方法
1、根据元素的id查找对象——document.getElementById(id)
2、根据HTML标签名找对象
- 描述:根据HTML标签名找对象
- 语法:var arr = parentNode.getElementsByTagName(tagName)
- 参数:tagName就是要查找的标签名称,不能带尖括号。parentNode代表上层节点。
- 返回值:返回一个对象数组。
- 举例:ulObj.getElementsByTagName(“li”)
元素对象
offsetWidth:指元素的可见宽度,不含滚动条中的内容。只读属性。不带px单位。
offsetHeight:指元素的可见高度,不含滚动条中的内容。只读属性。不带px单位。
scrollWidth:指元素的总宽度,包含滚动条中的内容。只读属性。不带px单位。
scrollHeight:指元素的总高度,包含滚动条中的内容。只读属性。不带px单位。
scrollTop:当元素出现滚动条时,向下拖动滚动条,内容向上滚动的距离。可读可写属性。不带px单位。如果该元素没有滚动条,则scrollTop的值为0,该值只能是正值。
scrollLeft:与scrollTop描述一样,只是向左滚动的距离。
书序案例
书讯快递
JavaScript零基础学习系列五的更多相关文章
- JavaScript零基础学习系列四
案例分享 对象 具体的东西,在以js的眼光看所有的标签都是标签对象,对象是属性的无序集合. 创建对象有两种方式: 直接量: 构造器:所谓的构造器,其实就是函数,只不过这个函数有些特殊,因为它是用于创建 ...
- JavaScript零基础学习系列一
JavaScript Js分成三大块: ECMAScript:语言本身,是标准,js是它的一个具体实现 BOM:浏览器对象模型 DOM:文档对象模型 ECMAScript有三种具体实现: JavaSc ...
- JavaScript零基础学习系列三
函数 函数:为了完成某个功能而定义的代码的集体.函数是数据类型,只读的对象:函数也是对象:代码的重用.(JavaScript中) 定义语法:function 函数名(形式参数1,形式参数2--){ / ...
- JavaScript零基础学习系列二
条件控制 if(条件){//语句块}如果条件(小括号里面的)满足true.那么才会执行大括号里面的代码,如果条件不满足(false),那么不执行,注意:有可能代码不会执行. 例如: if(3>1 ...
- salesforce 零基础学习(五十二)Trigger使用篇(二)
第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...
- salesforce lightning零基础学习(十五) 公用组件之 获取表字段的Picklist(多语言)
此篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type) 我们在lightning中在前台会经常碰到获取pi ...
- Python零基础学习系列之二--Python介绍及环境搭建
1-1.Python简介: Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.Python由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年.像P ...
- Community Cloud零基础学习(五)Topic(主题)管理
我们以前讲过 Service Cloud 零基础(三)Knowledge浅谈,我们日常可以看见很多得文章或者帖子,我们可以将其通过data category / group进行管理.但是一个系统中得文 ...
- Python零基础学习系列之三--Python编辑器选择
上一篇文章记录了怎么安装Python环境,同时也成功的在电脑上安装好了Python环境,可以正式开始自己的编程之旅了.但是现在又有头疼的事情,该用什么来写Python程序呢,该用什么来执行Python ...
随机推荐
- (学习笔记)laravel 中间件
(学习笔记)laravel 中间件 laravel的请求在进入逻辑处理之前会通过http中间件进行处理. 也就是说http请求的逻辑是这样的: 建立中间件 首先,通过Artisan命令建立一个中间件. ...
- java基础1.-------抽象类,抽象方法
抽象类:抽象类不能实例化,类中的方法必须经过子类的重写实现 类里的方法是public修饰时,子类可重写也可不重写 类的方法是abstract修饰时,方法是抽象方法,子类必须重写该方法 类的方法用fin ...
- spring springMVC
spring是一个开源框架,是为了解决企业应用程序开发,功能如下 目的:解决企业应用开发的复杂性 功能:使用基本的javabean代替EJB,并提供了更多的企业应用功能 范围:任何java应用 总之: ...
- jq实现发送短信验证码
前端的工作经常会涉及到短信验证的功能(注册或获取当前手机号信息),于是自己也写了一个,路过的小伙伴可以看一下 未点击状态 点击之后的状态 var timer=""; ; var v ...
- emoji哈哈哈哈
Unicode 官网上的FAQ令人发笑,啊哈哈哈 Q: What are the most popular emoji characters? Q: Do emoji characters have ...
- Android--Volley框架的使用
一.Volley特点 通信更快,更简单(数据量不大,但网络通信频繁) Get.Post网络请求及网络图像的高效率异步处理 排序(可以通过网络请求的优先级进行处理) 网络请求的缓存 多级别取消请求 和A ...
- android 启动模式介绍
Android启动模式 (1)Task:与Android系统是个多任务的系统中的任务是不同的.后者更倾向于多进程和多线程来说的,而这里的任务与application(应用程序)和activity(活动 ...
- IOS 网络-深入浅出(一 )-> 三方SDWebImage
首要我们以最为常用的UIImageView为例介绍实现原理: 1)UIImageView+WebCache: setImageWithURL:placeholderImage:options: 先显 ...
- Node.js 教程 02 - 经典的Hello World
前言: Node.js的介绍.安装及配置,上一节都已经介绍过了,如果有不清楚的也可以留言或者直接问度娘. 本节: 本节主要以一个简单的例子简单体验一下Node.js,用到了两种方法.下面会介绍. 总之 ...
- 11g新特性:Health Monitor Checks
一.什么是Health Monitor ChecksHealth Monitor Checks能够发现文件损坏,物理.逻辑块损坏,undo.redo损坏,数据字典损坏等等.Health Monitor ...