day10 javascript高级

DOM简单学习：为了满足案例要求

　　功能：就是控制html文档的内容

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

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

　　　　2.怎么来操作获取的元素对象呢?

　　　　　　　1.通过属性可以实现：

　　　　　　　　　　　　对象.innerHTML="内容"   可以修改标签体内容

　　　　　　　　　　　　对象.innerTEXT="内容"   可以修改标签体内容但是不能识别html标签

 

事件简单学习

　　事件概念： 某些组件被执行了某些操作后，触发某些代码的执行。比如  我点击按钮应该发生什么  等等

　　如何绑定事件：

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

　　　　　　例如：

　　　　　　　　

    <body>
            <img id="light" src="img/off.gif"  onclick="fun();">
        
            <script>
                function fun(){
                    alert('我被点了');
                    alert('我又被点了');
                }
            
                function fun2(){
                    alert('咋老点我？');
                }
            
    </script>
        </body>

 

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

　　　　例如：　　

<body>
<img id="light2" src="img/off.gif">

<script>
    function fun2(){
        alert('咋老点我？');
    }

    //1.获取light2对象
    var light2 = document.getElementById("light2");
    //2.绑定事件
    light2.onclick = fun2;
</script>
</body>

 

BOM:

　　1. 概念：Browser Object Model 浏览器对象模型
 　　　　　　 将浏览器的各个组成部分封装成对象。

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

　　3.window：窗口对象

　　　　　　1.创建

　　　　　　2.方法　　　　

　　　　　　　　　　1. 与弹出框有关的方法：
　　　　　　　　　　　　　　alert() 显示带有一段消息和一个确认按钮的警告框。
　　　　　　　　　　　　　　confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
　　　　　　　　　　　　　　　　* 如果用户点击确定按钮，则方法返回true
　　　　　　　　　　　　　　　　* 如果用户点击取消按钮，则方法返回false
　　　　　　　　　　　　　　prompt() 显示可提示用户输入的对话框。
　　　　　　　　　　　　　　　　* 返回值：获取用户输入的值
　　　　　　　　　　2. 与打开关闭有关的方法：
　　　　　　　　　　　　close() 关闭浏览器窗口。
　　　　　　　　　　　　　　* 谁调用我 ，我关谁
　　　　　　　　　　　　open() 打开一个新的浏览器窗口
　　　　　　　　　　　　　　* 返回新的Window对象
　　　　　　　　　　3. 与定时器有关的方式
　　　　　　　　　　　　　　setTimeout() 在指定的毫秒数后调用函数或计算表达式。
　　　　　　　　　　　　　　　　* 参数：
　　　　　　　　　　　　　　　　　　1. js代码或者方法对象
　　　　　　　　　　　　　　　　　　2. 毫秒值
　　　　　　　　　　　　　　　　* 返回值：唯一标识，用于取消定时器
　　　　　　　　　　　　　　clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

　　　　　　　　　　　　　　setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
　　　　　　　　　　　　　　clearInterval() 取消由 setInterval() 设置的 timeout。

　　　　　　3.属性

　　　　　　　　1. 获取其他BOM对象：
　　　　　　　　　　history
　　　　　　　　　　location
　　　　　　　　　　Navigator
　　　　　　　　　　Screen:
　　　　　　　　2. 获取DOM对象
　　　　　　　　　　document

　　　　　　4. 特点
　　　　　　　　　　* Window对象不需要创建可以直接使用 window使用。 window.方法名();　　　　　　　

　　　　　　　　　* window引用可以省略。 方法名();

　　

　　4. Location：地址栏对象
　　　　　　1. 创建(获取)：
　　　　　　　　1. window.location
　　　　　　　　2. location

　　　　　　2. 方法：
　　　　　　　　* reload() 重新加载当前文档。刷新
　　　　　　3. 属性
　　　　　　　　* href 设置或返回完整的 URL。

　　5. History：历史记录对象
　　　　1. 创建(获取)：
　　　　　　1. window.history
　　　　　　2. history

　　　　2. 方法：
　　　　　　* back() 加载 history 列表中的前一个 URL。
　　　　　　* forward() 加载 history 列表中的下一个 URL。
　　　　　　* go(参数) 加载 history 列表中的某个具体页面。
　　　　　　* 参数：
　　　　　　　　* 正数：前进几个历史记录
　　　　　　　　* 负数：后退几个历史记录
　　　　3. 属性：
　　　　　　* length 返回当前窗口历史列表中的 URL 数量。

 

posted @ 2020-07-05 15:44  LinResolute  阅读(132)  评论(0)    收藏  举报