码迷,mamicode.com
首页 > Web开发 > 详细

js操作BOM对象

时间:2017-11-02 20:05:11      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:信息   mat   value   端口   func   发送请求   out   idt   f11   

技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>window对象</title>

    <!--
    BOM:(浏览器对象模型  Browser   Object Model)
       浏览器页面的 前进   后退  刷新  页面跳转 都是Bom!
       对整个浏览器窗口进行交互的对象模型!
     包含的内容(对象):
     1.window对象
           01.history  属性
           02.location 属性
     2.document对象


     window对象
         常用的属性:
           01.history  属性
           02.location 属性
         常用的方法:
            alert()  :只有一个对话框和一个确认按钮
            prompt() :提示用户输入的对话框
            confirm():有一个确认按钮和取消按钮的对话框
            close(): 关闭浏览器窗口
            open():打开一个新的浏览器窗口
            定时函数:
             01.setTimeout():在指定毫秒数之后,执行某个方法! 只执行一次
             02.setInterval():每间隔指定的毫秒数,都会执行一次!

       window.open("弹出的窗口url","窗口的名称","窗口的特性")

    -->
</head>
<body>

<script  type="text/javascript">

    var  flag= confirm("确定关闭本窗口吗?");
      if(flag){
          window.close();  //浏览器窗口关闭
      }else{
          //window.open("http://www.baidu.com","百度首页");
          window.open("http://www.baidu.com","百度首页","height=400,width=400");
      }

</script>
</body>
</html>
window对象
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>history对象</title>
    <!--
       history对象常用的三个方法:
       01.back()   :后退
       02.forward():前进
       03.go()       :跳转至指定的url
     -->
</head>
<body>

  <a href="02history对象.html">当前页面</a>
  <a href="03history对象2.html">下一个页面</a>
  <a href="javascript:history.forward()">history.forward()下一个页面</a>
  <a href="javascript:history.go(2)">history.go(2)下一个页面</a>


<script type="text/javascript">



</script>


</body>
</html>
history对象
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>history对象2</title>
</head>
<body>
history对象2  第二个页面

<a  href="javascript:history.back()">history.back()后退一个页面</a>
<a  href="javascript:history.go(-1)">history.go(-1)后退一个页面</a>

</body>
</html>
history对象2
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>location对象</title>
    <!--
    location对象
       常用方法:
        reload():刷新页面
        replace():使用新的页面替换当前页面
       常用属性:
        host:主机名+端口号
        hostname:主机名
        href:完整的url
        hash:返回#之后的所有字符串
        search:返回?之后的所有字符串
    -->

</head>
<body>

<a  href="javascript:doubleC();">百度</a>

<script type="text/javascript">
     document.write("host值为:"+location.host+"<br/>");
     document.write("hostname值为:"+location.hostname+"<br/>");
     document.write("href值为:"+location.href+"<br/>");
     document.write("hash值为:"+location.hash+"<br/>");
     document.write("search值为:"+location.search+"<br/>");
   var flag=   confirm("确定跳转页面吗?");
     if(flag){
         location.href="http://www.baidu.com";
     }
    //当用户点击百度 超链接时触发的事件
    function  doubleC(){
        location.href="http://www.jd.com";
    }

</script>

</body>
</html>
location对象
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>document对象</title>
    <!--
    document对象
      常用的方法:
        write():在页面中书写内容
        getElementById(): 获取页面中指定id的对象! 一个对象
        getElementsByName("sex"): 获取页面中所有name属性值为sex的对象 ! 数组
        getElementsByTagName("div"): 获取页面中所有标签为div的对象 ! 数组

    常用的属性:
    referrer:
            当浏览器向web服务器发送请求的时候,一般会带上referrer,
            告诉服务器我是从哪个页面链接过来的,服务器基此可以获得一些信息用于处理。
    url: 返回当前页面的url
    -->
</head>
<body>

 <script type="text/javascript">
     document.write("document.referrer的值是:"+document.referrer);

 </script>

</body>
</html>
document对象
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>referrer属性</title>
</head>
<body>
 <a  href="05document对象.html">推广地址</a>
</body>
</html>
referrer属性
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{font-size:14px;
            line-height:30px;
        }
        input{margin:1px;
            width:90px;
            font-size:12px;
            padding:0;
        }
        #node{
            width:100px;
            font-size:24px;
            font-weight:bold;
            float: left;
        }
    </style>
    <script type="text/javascript">
        /*改变层内容*/
        function changeLink(){
            //获取页面中id属性值是node的节点
          var  node= document.getElementById("node");
         //   node.innerText="<h1 style=‘color:red‘>haha</h1>";   innerText:会把整个内容当成文本来输出!
              node.innerHTML="<h3 style=‘color:red‘>haha</h3>";//innerHTML:会编译内容中的html标签以及样式
        }
        /*获取所有input标签中所有的value值*/
        function all_input(){
          var allInputs= document.getElementsByTagName("input");  // 是一个数组
            var result="";
            for(var i=0;i<allInputs.length;i++){
                result+= allInputs[i].value+"<br/>";
            }
            //把所有的结果 给 id=s的元素
            document.getElementById("s").innerHTML=result;
        }
        /*获取所有name属性值是season的value*/
        function s_input(){
            var allSeasons= document.getElementsByName("season");  // 是一个数组
            var result="";
            for(var i=0;i<allSeasons.length;i++){
                result+= allSeasons[i].value+"<br/>";
            }
            //把所有的结果 给 id=s的元素
            document.getElementById("s").innerHTML=result;
        }

    </script>
</head>
<body>
<div id="node">新浪</div>
<input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br />
<br /><input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br /><input name="b2" type="button" value="显示input内容" onclick="all_input()" />
<input name="b3" type="button" value="显示season内容" onclick="s_input()" />
<p id="s"></p>
</body>
</html>
getElement系列
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Date对象</title>
    <!--
    Date对象:
      getDate():获取是一个月中的哪一天? 1-31
      getDay():获取是一周中的哪一天?  0-6
      getHours():获取是一天中的小时  0-23
      getMinutes():获取是分钟 0-59
      getSeconds():获取是秒数  0-59
      getMonth():获取是一年中的第几个月?  0-11
      getFullYear():获取年份
      getTime():返回1970年1月1日到现在的毫秒数
    -->
</head>
<body>


<script type="text/javascript">
       var  today=new Date();  //当前的系统时间
      document.write(today);
    //获取年月日
      var year= today.getFullYear();
      var month= today.getMonth()+1;
      var date= today.getDate();
      var hours= today.getHours();
      var min= today.getMinutes();
      var s= today.getSeconds();
   document.write("当前系统时间是:"+year+"年:"+month+"月:"+date+"日&nbsp;&nbsp;&nbsp;"+hours+":"+min+":"+s)
</script>
</body>
</html>
Date对象
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Math对象</title>

    <!--
    Math对象:
       ceil():向上取整
       floor():向下取整
       random():随机数
       round():四舍五入
    -->
</head>
<body>
  <script  type="text/javascript">

      document.write("25.5ceil===》"+Math.ceil(25.5)+"<br/>");
      document.write("25.5floor===》"+Math.floor(25.5)+"<br/>");
      document.write("25.5round===》"+Math.round(25.5)+"<br/>");

  </script>
</body>
</html>
Math对象
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定时函数</title>
    <!--
    01. setTimeout函数   在一个指定的时间点,去指定一个指定的函数
    02.setInterval函数   每隔多少时间就会执行一次指定的函数
    -->
</head>
<body>
   <div id="nowTime"></div>
   <button type="button"  onclick="setOne();"> setTimeout函数</button>
   <button type="button"  onclick="clearOne();"> 清空setTimeout函数</button>


   <button type="button"  onclick="setTwo();"> setInterval函数</button>
   <button type="button"  onclick="clearTwo();"> 清空setInterval函数</button>

<script type="text/javascript">
    var  num=0;  //成员变量
  function one(){
      //获取页面中空元素 并赋值
      document.getElementById("nowTime").innerHTML="数字:"+(++num);
  }

    //声明 定时函数的变量
    var  timeout,intervar;
     function setOne(){  //设置定时函数
         timeout=setTimeout("one()",2000);
     }

    function  clearOne(){//清空定时函数
        clearTimeout(timeout);
    }



    function  setTwo(){  //周期性的执行 one()函数
        intervar=setInterval("one()",1000);
    }
    function  clearTwo(){  //周期性的执行 one()函数
        clearInterval(intervar);
    }

</script>
</body>
</html>
定时函数

 

js操作BOM对象

标签:信息   mat   value   端口   func   发送请求   out   idt   f11   

原文地址:http://www.cnblogs.com/wwlw/p/7773734.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!