• js对象


    JS函数的作用域

    python中的函数和类也有作用域。控制语句没有作用域。

    <script>
        if (1){
            var x=2;
        }
         console.log(x);//x是可以找到的,因为控制语句没有作用域
        function f() {
            var y=4;
        }
        f();
        console.log(y)//出现y没有定义的错误,函数是有作用域的。
    </script>
    //嵌套函数的作用域
    <script>
        var name="beijing";
       function f() {
           function fun() {
               var name="guangdong";
               return name;
           }
           fun();
           return fun();
       }
        var b=f();
        console.log(b);//结果为guangdoong
        console.log(name);//结果为beijing
    </script>
    闭包
    <script>
        var name="beijing";
       function f() {
           var name="shanghai";
           function fun() {
               var name="guangdong";
               console.log(name);
           }
           return fun;
    
       }
        var b=f();
        b();//运行结果为广东
       
    </script>

    <script>
        window.alert("nihao");//alert()方法,只有确定,没有取消,仅仅是提醒
        var b=window.confirm("你是张萍吗?");//confirm()方法,选择确定为true,选择取消为false,可以进行选择
        console.log(b);
        var t=window.prompt("hello----");//prompt()方法是进行文本写入,有确定和取消两种选择,输入信息,然后进行选择
        console.log(t);
        window.open("http://www.baidu.com")
    
    
    </script>
    <script>
        function show_Time() {
           var current_Time=new Date().toLocaleString();//new Data()用来获取当前时间
           var b=document.getElementById("id1");
           b.value=current_Time;
        }
        var clock1;
        function begin() {
            if (clock1==undefined){
                  show_Time();
                  clock1=setInterval(show_Time,1000)//setInterval()用来做定时器。
                }
        }
        function end() {
            clearInterval(clock1);
            clock1=undefined
        }
    </script>
    <div onclick="fun()">你是我的小呀小苹果</div>
    <script>
        function fun() {
            console.log("你是一次的")
        }
        var c=setTimeout(fun,1000);//1秒后执行函数fun一次。
        clearTimeout(c)
    
    </script>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <a onclick="f()">onsubmit</a>
    <script>
        function f() {
               history.back()
        }
    
    </script>
    
    </body>
    </html>
    //实现在两个页面中的跳转。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <a href="2.html" onclick="fun()">click>>>></a>
    <script>
        function fun() {
            history.go()
        }
    </script>
    
    </body>
    </html>

    <script>
        function f() {
            location.assign("http://www.baidu.com");//页面跳转到百度页面,可以返回到当前页面
            //注意assign()和replace()的区别,replace()没有后退。
            location.reload();//刷新页面
            location.replace("http://www.baidu.com");//当前页面被新的页面覆盖
        }
    
    </script>

    <script>
       var ele=document.getElementsByClassName("p1")[0];
       console.log(ele.nodeName);//在HTML中所有的标签都是节点,节点名字
       console.log(ele.nodeType);//节点类型
       console.log(ele.nodeValue);//节点值
       console.log(ele.innerHTML);//节点中的文本信息
        
    </script>
    <script>
       var ele=document.getElementsByClassName("p1")[0];
       /*console.log(ele.nodeName);//在HTML中所有的标签都是节点,节点名字
       console.log(ele.nodeType);//节点类型
       console.log(ele.nodeValue);//节点值
       console.log(ele.innerHTML);//节点中的文本信息
        ele.innerHTML="你是改了之后的信息";*/
       ele.parentNode.innerHTML="HAOLEO";//父亲节点,这个很重要,必须记住,别的可以不记。
       var v=ele.nextSibling;//兄弟节点
        console.log(v);//运行结果为#text,不建议使用这种,因为他将空文档都算作兄弟节点了。
        var cv=ele.nextElementSibling;
        console.log(cv);//运行结果为div标签及里面的文字
    </script>

    js用的最多的是属性。

    一定要注意;局部查找一定不支持getElementById()和 getElementsByName()方法。

    所谓局部查找就是用当前找到的标签进行别的标签的查询,而全局查找则是用document对象来查找。

    innerHTML和innerTEXT拿到的是不同的,后者只拿到文本内容。

    <script>
        var ele=document.getElementById("ad");
        function f1() {
            if(ele.value=="请输入用户名"){
                ele.value="";
            }
        }
        function f2() {
            if(!ele.value.trim()){
                ele.value="请输入用户名"
            }
        }
    
    </script>

    最好将script放到body下面,免得加载出现错误。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="div1">
        <div class="div2">dddd</div>
        <div class="div2">yyyy</div>
        <div class="div2">zzzz</div>
        <div class="div2">dtttt</div>
        <div class="div2">ppppp</div>
        <p id="p1">iiiiiiiii</p>
    </div>
        <script>
            //绑定事件的第二种方法,以后建议写第二种。即先获得标签,完了给标签绑定事件,很重要
           var id=document.getElementById("p1");
           id.onclick=function () {
               alert(222)
                 }
           var uu=document.getElementsByClassName("div2");
           //getElementsByClassName()方法获取到的是一个集合,必须用索引的方式进行遍历
           for (var i=0;i<uu.length;i++){
                uu[i].onclick=function () {
                    alert(3333)
           }
    
           }
    
        </script>
    
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="div1">
        <div class="div2">dddd</div>
        <div class="div2">yyyy</div>
        <div class="div2">zzzz</div>
        <div class="div2">dtttt</div>
        <div class="div2">ppppp</div>
        //注意带上参数this之后拿到的就是这个标签对象,可以通过当前标签对象对其兄弟标签进行操作。
        <p id="p1"onclick="func(this)">iiiiiiiii</p>
    </div>
    <script>
        //参数that是随便给的,只要名字不是this就行。
        function func(that) {
                 console.log(that);
                var n=that.previousElementSibling;//通过that获得上面的一个兄弟标签。
                n.innerHTML="";
        }
    </script>
    
    </body>
    </html>
  • 相关阅读:
    切换svn用户
    表session查询
    http请求响应头信息
    map遍历的四种方法
    java i/o读写
    excel导出
    平安医保权限管理关系
    json发送hppt请求
    weblogic配置路径
    《神经网络和深度学习》系列文章十五:反向传播算法
  • 原文地址:https://www.cnblogs.com/zypfzw/p/9178385.html
Copyright © 2020-2023  润新知