zoukankan      html  css  js  c++  java
  • JS学习四(BOM DOM)

        BOM               


    Screen对象

    console.log(window.width);//屏幕宽度
    console.log(window.height);//屏幕高度
    console.log(window.availWidth);//屏幕可用宽度
    console.log(window.availHeight);//屏幕可用宽度


    ★  location对象

    取到浏览器的URL地址信息:
    完整的URL路径:
    协议名://主机名(IP地址):端口号/文件所在路径?传递参数(name1=value1&name2=value2)#锚点
    例如:
    http://127.0.0.1:8080/wenjianjia/index.html?name=jredu#top

    console.log(location.href);    //返回当前完整路径
    console.log(location.protocol);    //返回协议名
    console.log(location.host);    //返回主机名+端口号
    console.log(location.hostname);    //返回主机名
    console.log(location.port);    //返回端口号
    console.log(location.pathname);    //返回文件路径
    console.log(location.port);    //返回端口号
    console.log(location.search);    //返回开头的参数列表
    console.log(location.hash);   //返回#开头的锚点

     使用JS跳转页面:
    location = "http://www.baidu.com"; 

    其他使用location提供的方法跳转页面的方式
    location.assign("http://www.baidu.com");
    location.replace("http://www.baidu.com");
    location.reload("http://www.baidu.com");

    function assign(){
    //加载新的文档,加载以后,可以回退
    location.assign("http://www.baidu.com");
    }


    function replace(){
    //使用新文档替换当前文档,替换以后,不能回退
    location.replace("http://www.baidu.com");
    }


    function reload(){
    重新加载当前文档,刷新页面
    reload():在本地刷新当前页面,相当于F5
    reload():强制刷新,从服务器端重新加载页面,相当于ctrl+F5强制刷新页面
    location.reload();
    }

    /*
    history 浏览历史
    1、
    console.log(history);
    console.log(history.length);   //表示浏览历史个数

    function back(){
    history.back();  后退按钮
    }
    function forward(){
    history.forward();  前进按钮
    }
    function go(){
    跳转到浏览历史的任意一个页面:
    0表示当前页面,-1表示后一页(back),1表示前一页(forward)
    }


    navigator 了解即可
    包含浏览器的各种系统信息。

    console.log(navigator);

    检测浏览器安装的各种插件。

    console.log(navigator.plugins);

    Window对象的常用方法
    在window对象中的所有方法和属性,均可以省略window关键字。
    window.alert(); 》弹窗
    1.alert():弹出一个警告提示框;
    2.prompt():弹出接受用户的输入;
    3.confirm():弹出带有“确定”“取消”按钮的对话框,点击按钮返回
    4.close():关闭当前浏览器窗口。在个别浏览器中,只能关闭再当前脚本新打开的页面
    (使用超链接、window.open()等方式打开)
    5.open():打开一个新窗口。
    参数一:新窗口的地址;
    参数二:新窗口的名字,并没什么用;
    参数三:新窗口的各种属性设置,"属性=值1,属性2=值2,属性3=值3"
    6.setTimeout: 设置延时执行,只会执行一次;
    setInterval: 设置定时器,每隔n毫秒执行一次。
    接受两个参数:需要执行的function、毫秒数。
    7.clearTimeout:清除延时器
    clearInterval:清楚定时器
    使用方法:设置延时器或者定时器时。可以使用变量接受定时器ID;
    var id =setInterval;
    调用clearInterval时,将id传入,即可清除对应的定时器;
    clearInterval(id);

        DOM               


    【DOM树节点】
    DOM树节点分为三大类:元素节点属性节点文本节点:
    文本节点、属性节点属于元素节点的子节点,操作时,均需要先取到元素节点,在操作子节点。
    可以使用getElement系列方法,取到元素节点。

    【查看元素节点】

    getElementById:通过Id取到唯一节点。如果Id重名,只能取第一个。
    getElementsByName() :通过name属性
    getElementsByTagName() :通过标签名
    getElementsByClassName() :通过class名


    获取元素节点时,一定要注意:获取节点的语句,必须在DOM渲染完成之后执行,可以有两种方式实现:
    ① 将js代码写在body之后;② 将js代码写在window.onload函数中。
    后面三个getElements,取到的是数组格式,不能直接添加各种属性,而应该取出数组的每一个单独操作。
    例如:getElementsByName("name1")[0].onclick=function


    【查看/设置属性节点】
    1.查看属性节点:getAttribute("属性名");
    2.设置属性节点:setAttribute("属性名","新属性值");
    查看和设置属性节点,必须先取到元素节点,才能使用。

    eg:

    var btn1=document.getElementById("btn1");
    btn1.onclick=function(){
      alert(btn1);
    }

    var input1=document.getElementByname("input");

  • 相关阅读:
    c语言,动态数组
    利用Word来发布博客到博客园(onenote类似)
    c语言,volatile
    c语言,变长数组
    C语言,sprintf与sscanf函数[总结]
    c语言,数组和指针
    Linux的notifier机制的应用
    Linux进程上下文切换过程context_switch详解--Linux进程的管理与调度(二十一)
    内核线程的进程描述符task_struct中的mm和active_mm
    Linux用户抢占和内核抢占详解(概念, 实现和触发时机)--Linux进程的管理与调度(二十)
  • 原文地址:https://www.cnblogs.com/suitongyu/p/7440833.html
Copyright © 2011-2022 走看看