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>
原文地址:https://www.cnblogs.com/zypfzw/p/9178385.html