首页 > 编程语言> > day34_javaScript深入

day34_javaScript深入

2020-02-24 22:54:25 作者：互联网

DOM简单学习

概念：

Browser Object Model 浏览器对象模型

* 将浏览器的各个组成部分封装成对象。

组成：

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

Window：窗口对象

特点

Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。方法名();

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

alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。如果用户点击确定按钮，则方法返回true。如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。返回值：获取用户输入的值

与打开关闭有关的方法：

close() 关闭浏览器窗口。谁调用我，我关谁
open() 打开一个新的浏览器窗口。返回新的Window对象

与定时器有关的方式

setTimeout() 在指定的毫秒数后调用函数或计算表达式。参数： 1. js代码或者方法对象 2. 毫秒值* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>



</head>
<body>

    <img id="img" src="img/banner_1.jpg" width="100%">

    <script>
        /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次。


         */


        //修改图片src属性
        var number = 1;
        function fun(){
            number ++ ;
            //判断number是否大于3
            if(number > 3){
                number = 1;
            }
            //获取img对象
            var img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }

        //2.定义定时器
        setInterval(fun,3000);

    </script>
</body>
</html>

属性：
获取其他BOM对象：

history
location
Navigator
Screen:

获取DOM对象

document

Location：地址栏对象

创建(获取)：

window.location
location

方法：

reload() 重新加载当前文档。刷新

属性

href 设置或返回完整的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>

</head>
<body>
    <input type="button" id="btn" value="刷新">

    <input type="button" id="goItcast" value="去">
    <script>
        //reload方法，定义一个按钮，点击按钮，刷新当前页面
        //1.获取按钮
        var btn = document.getElementById("btn");
        //2.绑定单击事件
        btn.onclick = function(){
            //3.刷新页面
            location.reload();
        }


        //获取href
        var href = location.href ;
        //alert(href);
        //点击按钮，去访问
        //1.获取按钮
        var goItcast = document.getElementById("goItcast");
        //2.绑定单击事件
        goItcast.onclick = function(){
            //3.去访问
            location.href = "https://www.baidu.com";
        }

    </script>
</body>
</html>

标签：img,对象,day34,javaScript,number,href,深入,location,按钮
来源： https://www.cnblogs.com/wurengen/p/12345623.html