定时器

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零基础学习系列五的更多相关文章

  1. JavaScript零基础学习系列四

    案例分享 对象 具体的东西,在以js的眼光看所有的标签都是标签对象,对象是属性的无序集合. 创建对象有两种方式: 直接量: 构造器:所谓的构造器,其实就是函数,只不过这个函数有些特殊,因为它是用于创建 ...

  2. JavaScript零基础学习系列一

    JavaScript Js分成三大块: ECMAScript:语言本身,是标准,js是它的一个具体实现 BOM:浏览器对象模型 DOM:文档对象模型 ECMAScript有三种具体实现: JavaSc ...

  3. JavaScript零基础学习系列三

    函数 函数:为了完成某个功能而定义的代码的集体.函数是数据类型,只读的对象:函数也是对象:代码的重用.(JavaScript中) 定义语法:function 函数名(形式参数1,形式参数2--){ / ...

  4. JavaScript零基础学习系列二

    条件控制 if(条件){//语句块}如果条件(小括号里面的)满足true.那么才会执行大括号里面的代码,如果条件不满足(false),那么不执行,注意:有可能代码不会执行. 例如: if(3>1 ...

  5. salesforce 零基础学习(五十二)Trigger使用篇(二)

    第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...

  6. salesforce lightning零基础学习(十五) 公用组件之 获取表字段的Picklist(多语言)

    此篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type) 我们在lightning中在前台会经常碰到获取pi ...

  7. Python零基础学习系列之二--Python介绍及环境搭建

    1-1.Python简介: Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.Python由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年.像P ...

  8. Community Cloud零基础学习(五)Topic(主题)管理

    我们以前讲过 Service Cloud 零基础(三)Knowledge浅谈,我们日常可以看见很多得文章或者帖子,我们可以将其通过data category / group进行管理.但是一个系统中得文 ...

  9. Python零基础学习系列之三--Python编辑器选择

    上一篇文章记录了怎么安装Python环境,同时也成功的在电脑上安装好了Python环境,可以正式开始自己的编程之旅了.但是现在又有头疼的事情,该用什么来写Python程序呢,该用什么来执行Python ...

随机推荐

  1. (学习笔记)laravel 中间件

    (学习笔记)laravel 中间件 laravel的请求在进入逻辑处理之前会通过http中间件进行处理. 也就是说http请求的逻辑是这样的: 建立中间件 首先,通过Artisan命令建立一个中间件. ...

  2. java基础1.-------抽象类,抽象方法

    抽象类:抽象类不能实例化,类中的方法必须经过子类的重写实现 类里的方法是public修饰时,子类可重写也可不重写 类的方法是abstract修饰时,方法是抽象方法,子类必须重写该方法 类的方法用fin ...

  3. spring springMVC

    spring是一个开源框架,是为了解决企业应用程序开发,功能如下 目的:解决企业应用开发的复杂性 功能:使用基本的javabean代替EJB,并提供了更多的企业应用功能 范围:任何java应用 总之: ...

  4. jq实现发送短信验证码

    前端的工作经常会涉及到短信验证的功能(注册或获取当前手机号信息),于是自己也写了一个,路过的小伙伴可以看一下 未点击状态 点击之后的状态 var timer=""; ; var v ...

  5. emoji哈哈哈哈

    Unicode 官网上的FAQ令人发笑,啊哈哈哈 Q: What are the most popular emoji characters? Q: Do emoji characters have ...

  6. Android--Volley框架的使用

    一.Volley特点 通信更快,更简单(数据量不大,但网络通信频繁) Get.Post网络请求及网络图像的高效率异步处理 排序(可以通过网络请求的优先级进行处理) 网络请求的缓存 多级别取消请求 和A ...

  7. android 启动模式介绍

    Android启动模式 (1)Task:与Android系统是个多任务的系统中的任务是不同的.后者更倾向于多进程和多线程来说的,而这里的任务与application(应用程序)和activity(活动 ...

  8. IOS 网络-深入浅出(一 )-> 三方SDWebImage

    首要我们以最为常用的UIImageView为例介绍实现原理: 1)UIImageView+WebCache:  setImageWithURL:placeholderImage:options: 先显 ...

  9. Node.js 教程 02 - 经典的Hello World

    前言: Node.js的介绍.安装及配置,上一节都已经介绍过了,如果有不清楚的也可以留言或者直接问度娘. 本节: 本节主要以一个简单的例子简单体验一下Node.js,用到了两种方法.下面会介绍. 总之 ...

  10. 11g新特性:Health Monitor Checks

    一.什么是Health Monitor ChecksHealth Monitor Checks能够发现文件损坏,物理.逻辑块损坏,undo.redo损坏,数据字典损坏等等.Health Monitor ...