美文网首页
JavaScript——BOM篇

JavaScript——BOM篇

作者: Colin_Version | 来源:发表于2016-07-28 13:09 被阅读41次

    JavaScript组成部分
    1、EMCAScript(基本语法)
    2、BOM( Browser Object Model) 浏览器对象模型
    浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述,如果我们要操作浏览器的一些属性,我就可以通过浏览器对象模型的对象进行操作。


    window对象
    window代表了一个新开的窗口

    常用方法:
    open()——打开一个新的窗口。
    resizeTo() ——将窗口的大小更改为指定的宽度和高度值。
    moveBy() ——相对于原来的窗口移动指定的x、y值。
    moveTo() ——将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
    setInterval() ——每经过指定毫秒值后就会执行指定的代码。
    clearInterval() ——根据一个任务的ID取消的定时任务。
    setTimeout() ——经过指定毫秒值后执行指定的代码一次


    注册事件
    方式一: 直接在html元素上注册

    <body onload="ready()">
    function ready(){
                        alert("body的元素被加载完毕了..");   
                    }
    

    方式二:可以通过js代码找到对应的对象再注册——推荐使用

    var bodyNode = document.getElementById("body");
                
                bodyNode.onload = function(){
                    alert("body的元素被加载完毕");  
                } 
    

    常用的事件
    鼠标点击相关:
    onclick 在用户用鼠标左键单击对象时触发。
    ondblclick 当用户双击对象时触发。
    onmousedown 当用户用任何鼠标按钮单击对象时触发。
    onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

    鼠标移动相关:
    onmouseout 当用户将鼠标指针移出对象边界时触发。
    onmousemove 当用户将鼠标划过对象时触发。

    焦点相关的:
    onblur 在对象失去输入焦点时触发。
    onfocus 当对象获得焦点时触发。

    其他:
    onchange 当对象或选中区的内容改变时触发。
    onload 在浏览器完成对象的装载后立即触发。
    onsubmit 当表单将要被提交时触发。


    地址栏对象(location)
    href ——设置以及获取地址栏的对象
    reload() ——刷新当前的页面


    screen(屏幕)对象
    availHeight——获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
    availWidth ——获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
    height——获取屏幕的垂直分辨率。
    width——获取屏幕的水平分辨率。


    DOM入门
    DOM(Document Object Model) 文档对象模型
    一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述,我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性,则可以改变浏览器当前显示的内容。

    通过html元素的标签属性找节点

    document.getElementById("html元素的id") 
    document.getElementsByTagName("标签名") 
    document.getElementsByName("html元素的name")
    

    通过关系(父子关系、兄弟关系)找节点

    parentNode  获取当前元素的父节点。
    childNodes  获取当前元素的所有下一级子元素。
    firstChild  获取当前节点的第一个子节点。
    lastChild  获取当前节点的最后一个子节点。
    nextSibling  获取当前节点的下一个节点。(兄节点)
    previousSibling  获取当前节点的上一个节点。(弟节点)
            
    

    创建字节入插入节点、设置节点的属性

    document.createElement("标签名")  创建新元素节点
    elt.setAttribute("属性名", "属性值")  设置属性
    elt.appendChild(e)  添加元素到elt中最后的位置
    elt.insertBefore(newNode, oldNode)  添加到elt中,child之前。elt必须是oldNode的直接父节点。                               
    elt.removeChild(child)  删除指定的子节点。elt必须是child的直接父节点。
    

    正则表达式
    正则表达式的创建方式:

    方式1:
            /正则表达式/模式
            
    方式2:
            new RegExp("正则表达式",模式);
    

    模式:

        g (全文查找出现的所有 pattern)   
        i (忽略大小写)
    

    正则表达式对象常用的方法:

    test()  使用正则对象去匹配字符串,如果匹配成功返回ture,否则返回false 
    exec()  根据正则表达式去查找字符串符合规则的内容
    

    相关文章

      网友评论

          本文标题:JavaScript——BOM篇

          本文链接:https://www.haomeiwen.com/subject/tokajttx.html