JavaScript：

  1. ECMAScript：

  2. BOM：

  3. DOM：

    1. 事件

DOM的简单学习

  1. 功能：控制html文档内容

  2. 代码：获取页面标签（元素）对象和Element

    1. document.getElementById("id值")：通过元素id获取元素对象

  3. 操作Element对象

    1. 修改属性值

      1. 明确获取的对象是那个？

      2. 查看api文档，找其中有哪些属性可以设置

    2. 修改标签体内容

      1. 属性，innerhtml

  4. 事件简单学习

    1. 功能：某些组件被执行了某些操作后，触发某些代码的执行。

    2. 如何绑定事件

      1. 直接html标签上，指定事件的属性，属性值就是js代码

        1. 事件：onclick..单击事件

        2. 通过js获取元素对象，指定事件的属性，设置一个函数

小案例：点击实现图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="c" src="img/psc2.jpg">
​
    <script>
        /*
            1.获取图片对象
            2.绑定单击事件
            3.每次切换图片
                规则，
                    如果灯是开的on，切换为off
​
         */
        var light = document.getElementById("c");
        var flag = false;//加入表示判断图片是否是psc2
        light.onclick = function () {
            if (flag) {
                light.src = "img/psc3.jpg";
                flag = false;
            }else {
                light.src = "img/psc2.jpg";
                flag = true;
            }
        }
​
    </script>
</body>
</html>

  1. BOM：

    1. 概念：Browser object Model 浏览器对象模型

      1. 将浏览器各个组成部分封装成对象

        Browser 对象

        • [Window] 窗口对象

          • <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>window对象</title>
            ​
            </head>
            <body>
                <input id="openBtn" type="button" value="打开新窗口">
                <input id="closeBtn" type="button" value="关闭新窗口">
                <script>
                    /*
                    window窗口对象
                        1.创建
                        2.方法
                            1.与弹出框有关的方法
                                alert（）  弹出一个警告框
                                confirm（）显示带有一段信息以及确认按钮和取消按钮的对话框
                                    如果用户点击确定返回true，点击取消返回false
                                prompt（） 显示提示用户输入的对话框
                            2.与打开关闭有关的方法
                                close（）关闭浏览器窗口
                                    谁调用我，我关闭谁
                                open（）打开一个新的浏览器窗口
                                    返回新的Window对象
            ​
                            3.与定时器有关的方法
                                setInterval()   按照指定的周期（以毫秒计）来调用函数或计算表达式。
                                setTimeout()    在指定的毫秒数后调用函数或计算表达式。
                                    参数：
                                        1.js代码或者方法对象
                                        2.毫秒值
                                       返回值：唯一标识，用于取消定时器
                                clearInterval() 取消由 setInterval() 设置的 timeout。
            cl                  clearTimeout()  取消由 setTimeout() 方法设置的 timeout。
                        3.属性
                            1.获取其他BOM对象
                                history
                                location
                                Screen
                                document
                        4.特点
                            window对象不需要创建可以直接使用，window使用window.方法名
                            window引用可以省略，方法名（）
                     */
                    //alert("hello window");
                    //window.alert("111");
                    //var flag =  confirm("确定要退出");
                    //alert(flag);
            ​
                   /* var newWindow;
                    var openBtn = document.getElementById("openBtn");
                    openBtn.onclick = function () {
                        //打开一个新窗口
                       newWindow = open("http://www.baidu.com");
                    }
                    var closeBtn = document.getElementById("closeBtn");
                    closeBtn.onclick = function () {
                        //关闭一个新窗口
                        newWindow.close();
                    }*/
            ​
            ​
                   //一次性定时器
                    //var id =setTimeout("f1();",2000);
                    clearTimeout(id);
                            function f1() {
                                alert('boom');
                            }
            ​
                    //循环定时器
                     var id = setInterval(f1,2000);
            ​
                </script>
            </body>
            </html>

        轮播图案例

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>轮播图</title>
        ​
        </head>
        <body>
        <img id="img" src="img/psc2.jpg" width="100%" height="100%">
        <script>
            /*
                分析：
                        1.在页面上使用img标签
                        2.定义一个方法修改图片的连接
                        3.定义定时器，每隔一段时间换一张图片
        ​
             */
            //修改图片src
            var num = 1;
            function change() {
                num++;
                if(num>3){
                    num = 1;
                }
                var img1 =  document.getElementById("img");
                img1.src = "img/psc"+num+".jpg";
            }
            //2.定义定时器
            setInterval(change,3000);
        ​
        ​
        ​
        </script>
        </body>
        </html>

        • [Navigator] 浏览器对象

        • [Screen]显示器对象

        • [History]历史记录对象

          • 创建（获取）：

            • window.history

            • history

          • 方法

            • back（）加载history列表中的前一个url

            • forward（）加载history列表中的下一个url

            • go（）加载history列表中的某个具体页面

              • 正数，前进几个历史记录

              • 负数，后退几个历史记录

          • 属性

            • length 返回当前窗口的历史列表中的url数量

        • [Location]地址栏对象

          • 创建

            • window.location

            • location

          • 方法

            • reload（）重新加载当前文档，刷新

          • 属性

            • href 设置或返回完整URL

      2. DOM对象

        1. 概念：document object Model 文档对象模型

          1. 将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言

Javascript学习，DOM对象，方法的使用的更多相关文章

  1. JavaScript学习——DOM对象

    1.DOM操作 Document:整个html文件都称之为一个document文档 Element:所有的标签都是Element元素 Attribute:标签里面的属性 Text:标签中间夹着的内容为 ...

  2. JavaScript学习04 对象

    JavaScript学习04 对象 默认对象 日期对象Date, 格式:日期对象名称=new Date([日期参数]) 日期参数: 1.省略(最常用): 2.英文-数值格式:月 日,公元年 [时:分: ...

  3. Javascript学习4 - 对象和数组

    原文:Javascript学习4 - 对象和数组 在Javascript中,对象和数组是两种基本的数据类型,而且它们也是最重要的两种数据类型. 对象是已命名的值的一个集合,而数组是一种特殊对象,它就像 ...

  4. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  5. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  6. javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

  7. DOM 对象方法

    DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTagName() 返回包含带有指定 ...

  8. JavaScript之DOM对象的获取

    之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...

  9. JavaScript学习笔记——对象分类

    对象的分类 一.对象的分类 1.内置对象 Global Math 2.本地对象 Array Number String Boolean Function RegExp 3.宿主对象 DOM BOM 二 ...

  10. JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）

    DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象 ...

随机推荐

  1. Atcoder Educational DP Contest I - Coins (概率DP)

    题意:有\(n\)枚硬币,每枚硬币抛完后向上的概率为\(p[i]\),现在求抛完后向上的硬币个数大于向下的概率. 题解:我们用二维的\(dp[i][j]\)来表示状态,\(i\)表示当前抛的是第\(i ...

  2. Yocto项目介绍及入门 -- 嵌入师工程师必备利器

    目录 写在前面 1. Yocto项目是什么 2. Yocto项目有什么用 3. 如何快速上手Yocto项目 4. 带你通过Yocto项目编译一个自定义镜像文件 写在前面 博主目前从事BMC工作,由于公 ...

  3. HDU 6390 GuGuFishtion（莫比乌斯反演 + 欧拉函数性质 + 积性函数）题解

    题意: 给定\(n,m,p\),求 \[\sum_{a=1}^n\sum_{b=1}^m\frac{\varphi(ab)}{\varphi(a)\varphi(b)}\mod p \] 思路: 由欧 ...

  4. freeRTOS V10.0.1移植到STM32F407标准库 - 环境Keil5

    最近因为工作需要用到FreeRTOS,其实开始本人内心是拒绝的因为自己只学习过UCOSIII还没实际上过什么大又复杂的工程,但是谁让FreeRTOS他是Free的呢公司成本考虑肯定是不会选择USOS的 ...

  5. JavaScript 实现 (ECMAScript 6)

    JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象: DOM 描述了处理网页内容的方法和接口: BOM 描述了与浏览器进行交互的方法和接口. ECMAScript.DOM ...

  6. webpack OSS All In One

    webpack OSS All In One 阿里云 OSS 对象存储(Object Storage Service,简称OSS),是阿里云对外提供的海量.安全和高可靠的云存储服务 https://c ...

  7. GMV (Gross Merchandise Volume)

    GMV (Gross Merchandise Volume) 商品总销量 https://www.zhihu.com/question/20146641 GMV=1销售额+2取消订单金额+3拒收订单金 ...

  8. asm 查看字节码

    a.asm global Start section .text inc dword [esi] push edi mov edi,[esp+0x14] λ nasm -f win32 a.asm - ...

  9. 修改yapf中的列宽限制值

    yapf是一款由Google开源的Python代码自动格式化工具,它根据PEP 8规范可以帮我们自动格式化我们的代码,让代码更规范.更漂亮.但是其中最大列宽被限制为80,如果超过80,在格式化时就会被 ...

  10. C# NOPI 项目实战(经典)(可下载项目源码)

    1 -.首先说明下项目目的: 之前我有写过一篇  "NPOI操作EXCEL" 这篇文章主要介绍了如何安装NPOI,以及NPOI具体如何使用,并且用具体实例介绍了excel导入到da ...