• js对象


    (1)history对象

    作用:该对象包含客户端访问过的URL信息

    a.html

    <a href="b.html">goto b</a>

    b.html

    <script language="javascript" type="text/javascript">
        function goback(){
            history.back();
         //history.go(-1); }
    </script> <a href="a.html" onclick="goback()">返回上级页面</a>

    history对象的属性--length:返回浏览器历史列表中的URL数量。

    hirstory的back()和go(-1)效果是一样的。

    (2)location对象

    location对象:即对象包含客户端当前的URL信息。该对象表示浏览器的location.

    window是打开就有,而location打开时可能没有。

     location对象的方法--reload()方法:重新加载当前文档。

    href:html代码的地址。

    <script language="javascript">
    
        function test(){
            location.reload();
        }
    </script>
    
    <body>
    <input type="button" value="刷新页面" onclick="test()"/>
    <span>闪动</span>
    </body>

    (3)navigator对象:即该对象包含当前浏览器的各信息(比如说浏览器版本啊)。

    <html>
    <head>
    <script language="javascript">
    document.writeln("name:"+navigator.appName+"");
    document.writeln("<br/>"+navigator.platform+"<br/>"+navigator.systemLanguage);
    </script>
    </head>
    <body>

    </body>
    </html>

    (4)screen对象

    screen对象:

     案例:当用户屏幕的分辨率不是1024*768时,请提示用户。

    screen对象的width和height,指的是用户计算机屏幕的分辨率,而不是浏览器的尺寸。

    screen.availHeight返回的是屏幕去掉任务栏后的高度。

    <html>
    <body>
        <script language="javascirpt" type="text/javascript">
        // type="text/javascript"这句话是必须写的。
        document.writeln(screen.width+" "+screen.height);
        document.writeln("<br/>"+screen.availHeight);
        </script>
    </body>
    
    </html>

    (5)event对象。

    event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,事件通常与函数结合使用。

     dom对象详解--事件驱动

    ****关于绑定事件的细节*******

    (1)直接和某个html空间绑定 比如

    <input type="button" value="刷新页面" onclick="test()"/>

    (2)通过getElementById()来绑定。

    <script language="javascript" type="text/javascript">
    
        function test(){
            document.writeln("hello");
        }
    </script>
    
    <body>
    <input type="button" id="but1" value="刷新页面"/>
    <script type="text/javascript">
        document.getElementById("but1").onclick=test;
        //在but1有了之后才能获取,所以这条语句应该在button创建之后才能写。
    </script>
    </body>

    (3)通过addEventLister()或者attachEvent来绑定

    比如投票:投票完成后,解除绑定。

    <script language="javascript" type="text/javascript">
    
        function test(){
            //document.writeln("hello");
            window.alert("你投了一票");
            document.getElementById("but1").detachEvent("onclick",test);        
        }
    </script>
    
    <body>
    <input type="button" id="but1" value="投票"/>
    <script type="text/javascript">
        document.getElementById("but1").attachEvent("onclick",test);
        //在but1有了之后才能获取,所以这条语句应该在button创建之后才能写。
    </script>
    </body>

    这代码在谷歌浏览器和IE浏览器中都无法运行(还报错)。

    查阅资料后,应该这么写

    <script language="javascript" type="text/javascript">
    
        function test(){
            //document.writeln("hello");
            window.alert("你投了一票");
            document.getElementById("but1").removeEventListener("onclick",test);        
        }
    </script>
    
    <body>
    <input type="button" id="but1" value="投票"/>
    <script type="text/javascript" language="javascript">
        document.getElementById("but1").addEventListener("onclick",test);
        //在but1有了之后才能获取,所以这条语句应该在button创建之后才能写。
    </script>
    </body>

    可以还是没有反应,但是没有报错了。

    而可运行代码如下所示:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
    #myDIV 
    {
        background-color: coral;
        border: 1px solid;
        padding: 50px;
        color: white;
    }
    </style>
    </head>
    <body>
    
    <div id="myDIV"> div 元素添加了  onmousemove 事件句柄,在你移动鼠标时会显示随机数。
        <p>点击按钮移除 DIV 的事件句柄。</p>
        <button onclick="removeHandler()" id="myBtn">点我</button>
    </div>
    <p id="demo"></p>
    <script>
    document.getElementById("myDIV").addEventListener("mousemove", myFunction);
    function myFunction() 
    {
        document.getElementById("demo").innerHTML = Math.random();
    }
    function removeHandler() 
    {
        document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
    }
    </script>
    
    </body>
    </html>

    event的keyCode属性:返回被按下键的unicode字符码。

    案例,请输入一个六位数,要求输入的是数字并且是6位。

    window.event.returnValue用来不记录刚才输入的非法数据。

    代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script>
        var int="";
        function test(event){
            //用户每按下一个键,就去判断是不是一个数
            if(event.keyCode>=48&&event.keyCode<=57){
                int+=(event.keyCode-48);
            }else{
                window.alert("您输入的不是数");
                window.event.returnValue=false;
            }
            if(int.length>6){
                window.alert("数字已经到达6位了!");
                window.event.returnValue=false;
            }
        }
    </script>
    </head>
    <body>
    
    <input type="text" onkeypress="test(event)" id="text1"/>
    <!-- 在按的时候就响应它onkeypress -->
    <input type="button" onclick="test()" value="提交" />
    </body>
    </html>

    它只能针对键盘按下的非数字字符,但是输入的是汉字,它却检测不出来。

  • 相关阅读:
    网段
    The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
    不利不理左卫门的吃拿卡要
    webAppRootKey
    011.Python的列表的相关操作
    010.Python字符串的格式化
    009.Python字符串相关函数
    008.Python循环for循环
    007.Python循环语句while循环嵌套
    006.Python循环语句while循环
  • 原文地址:https://www.cnblogs.com/liaoxiaolao/p/9797362.html
Copyright © 2020-2023  润新知