JavaScript 03

JavaScript 03

 

 

目录

JavaScript 03

一、DOM、事件简单知识

1. DOM简单知识

2. 事件简单知识

二、BOM

1. BOM概述

2. Window：窗口对象

3. Location：地址栏对象；

4. History：历史记录对象

 #END

---

 

一、DOM、事件简单知识

1. DOM简单知识

1.1 功能：控制HTML文档的内容；

1.2 Element：获取页面标签（元素）对象；

document.getElementById("id值");

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

1.3 Element对象：

① 修改属性值：

• 明确获取的对象；
• 查看API，寻找可以设置的属性；

② 修改标签体内容：（属性）innerHTML

• 获取元素对象
• 使用innerHTML属性修改标签体内容；

1.4 使用：

    <script>
        var word = document.getElementById("word");
        alert("祝愿");
    </script>

    <script>
        var word = document.getElementById("word");
        alert("换");
        word.innerHTML = "先前还不知晓周幽王为何肯为褒姒烽火戏诸侯<br>后来瞧见你上扬的嘴角世间的一切似乎都能就此说通";
    </script>

2. 事件简单知识

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

2.2 如何绑定事件

• 直接在HTML标签上，指定事件的属性（操作），属性值就是js代码；
• 事件：onclick（单击事件）

2.3 使用：

    <script>
        // 获取对象
        var word = document.getElementById("word");
        function fun() {
            alert('已点击');
        }
        // 绑定事件
        word.onclick = fun;
    </script>

 

二、BOM

1. BOM概述

1.1 概念：Browser Object Model 浏览器对象模型；

1.2 组成：

① Window：窗口对象；

② Navigator：浏览器对象；

③ Screen：显示器屏幕对象；

④ History：历史记录对象；

⑤ Location：地址栏对象；

2. Window：窗口对象

2.1 方法：

1. 与弹出框有关的方法：

alert()：显示带有一段消息和一个确定按钮的警告框；

confirm()：显示带有一段消息以及确定按钮和取消按钮的对话框；

① 如果用户点击确定按钮，方法返回true；

② 如果用户点击取消按钮，方法返回false；

prompt()：显示可提示用户输入的对话框；

返回值：获取用户输入的值；

   <script>
       window.alert("欢迎");
       alert("光临");
   </script>

    <script>
        var flag = confirm("您确定要退出？");
        if (flag) {
            alert("期待您的下次光临！");
        } else {
            alert("已返回！");
        }
    </script>

    <script>
       var name = prompt("请输入一部您喜欢的动漫");
       alert(name);
    </script>

2. 与开发关闭有关：

① close()：关闭浏览器窗口；

哪个浏览器窗口调用，关闭哪个浏览器窗口；

② open()：打开一个新的浏览器窗口；

返回新的window对象；

    <script>
       var openBtn = document.getElementById("openBtn");
       openBtn.onclick = function() {
           open("http://www.baidu.com");
       }
    </script>

 

3. 

① clearTimeout()：取消由 setTimeout()方法设定的timeout；

② setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式；

③ clearInterval()：取消由 setInterval()方法设置的timeout；

④ setTimeout(参数)：

参数：js代码或者方法对象、毫秒值；

返回值：唯一标识，用于取消定时器；

    <script>
        // 一次性定时器
        setTimeout("fun();", 2000);
        var id = setTimeout(fun1(), 2000);
        // 取消一次性定时器
        clearTimeout(id);
        function fun() {
            alert("空空落落又满满当当");
        }
        function fun1() {
            alert("昏昏沉沉又明明白白");
        }
        function fun2() {
            alert("明了");
        }
        // 循环计时器
        var id1 = setInterval(fun2, 2000);
        // 取消循环定时器
        clearInterval(id1);
    </script>

2.2 属性：

① 获取其他BOM对象：history、location、navigator、screen；

② 获取DOM对象：document；

2.3 特点：

① window对象不需要创建可以直接使用；如：window.方法名();

② window引用可以省略；

3. Location：地址栏对象；

3.1 概述：location对象包含有关当前 URL 的信息；

3.2 创建：

window.location; // 一
location; // 二

3.3 方法：reload()：重新加载当前文档；

    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            location.reload();
        }
    </script>

3.4 属性：href：设置或返回完整的url；

    <script>
        var href = location.href;
        alert(href);
        var go = document.getElementById("go");
        go.onclick = function() {
            location.href = "http://www.baidu.com";
        }
    </script>

4. History：历史记录对象

4.1 概述：包含用户在浏览器窗口访问过的url；

4.2 创建：

window.history; // 一
history; // 二

4.3 方法：

① back()：加载history列表中的上一个URL；

② forward()：加载history列表中的下一个URL；

③ go(参数)：加载history列表中某个具体的页面；

参数：正数为前进几个历史记录；负数为后退几个历史记录；

        var forward = document.getElementById("forward"); // 获取按钮
        forward.onclick = function () {
            // 前进
            history.forward();
            // 后退
            history.back();
            history.go(1);
        }

4.4 属性：length：返回当前窗口历史列表中的URL数量；

          var length = history.length;
          alert(length);

 

 

 

 #END