前端之JavaScript笔记2

一数组对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //var l=[111,222,333];
        //console.log(typeof l);
        //var l2=new Array([1,2,3,4]);  //创建数组


       //join  方法
       <!--var s=['hello','world'].join(" ");-->
       <!--console.log(s)-->

        // 原生类方法toString()： 将对象转化成字符串

        <!--var s1=[12,3,4,32,65];-->
        <!--console.log(s1);-->
        <!--console.log(typeof s1);-->
        <!--console.log(s1.toString());  //"[12,3,4,32,65]"-->
        <!--console.log(typeof s1.toString());-->


/*        //反转 reverse
        var q=[123,46,75,321];
        console.log(q.reverse());

        // sort ： 默认排序，是以最高位的ASCLL码排序的
        console.log(q.sort());

        // 删除方法 splice方法
        q.splice(1,3);
        console.log(q);  */

        // 向数组添加或者删除元素 push pop 后面添加或者删除  shift   unshift  前面添加或者删除

        var w=[11,22,33];
        <!--w.push(44);-->
        <!--console.log(w);   //[11,22,33,44]-->
        <!--console.log(w.pop());  //[44]-->


        console.log(w.shift());
        w.unshift([77,88]);
        console.log(w);
        console.log(w.shift());




    </script>
</head>
<body>

</body>
</html>

View Code

二时间对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        var ID;
        function start(){
            if(ID==undefined){
                foo();
                ID=setInterval(foo,1000);
            }
        }

        function foo(){
            var timer=new Date().toString();  //获取当前时间字符串
            var ele=document.getElementById("time");   //获取操作标签对象

            ele.value=timer;   //对操作标签对象进行赋值
        }

        function end(){
            clearInterval(ID);
            ID=undefined;
        }

    </script>
</head>
<body>


<input type="text" id="time" >

<button onclick="start()" >start</button>
<button onclick="end()" >end</button>
</body>
</html>

View Code

三显示时间对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        var ID;
        function start(){
            if(ID==undefined){
                foo();
                ID=setInterval(foo,1000);
            }
        }

        function foo(){
            var timer=new Date().toString();  //获取当前时间字符串
            var ele=document.getElementById("time");   //获取操作标签对象

            ele.value=timer;   //对操作标签对象进行赋值
        }

        function end(){
            clearInterval(ID);
            ID=undefined;
        }

    </script>
</head>
<body>


<input type="text" id="time" >

<button onclick="start()" >start</button>
<button onclick="end()" >end</button>
</body>
</html>

View Code

四函数对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //function 函数名(){
        //}
        //直接调用

        /*
        function foo(){
            alert(123)
            }

            foo();

        function add(x,y){
            console.log(arguments);
            var sum=0;
            for (var i=0;i<arguments.length;i++){
                sum+=arguments[i];
                }
            return sum;
        }

        var s=add(1,4,2,6);
        console.log(s)
        */

        // 匿名函数

        (function (){

        })()


    </script>
</head>
<body>

</body>
</html>

View Code

# s1='hello'
#
# s2='world'
#
# s3='fang'
#
# s=" ".join([s1,s2,s3])    #join是符号的拼接属性
# print(s)
#
#
# ret=(lambda x,y:x+y)(4,6)  #匿名函数
# print(ret)

View Code

五 js 的查找标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function t(){
            var ele=document.getElementsByClassName("c1")[0];
            ele.style.color="green";
            }
    </script>
</head>
<body>

    <div class="c1" onclick="t()">fang</div>
</body>
</html>

View Code

六搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function foo(){
            var ele=document.getElementById("search");
            ele.value=" ";
            }

        function bar(){
            var ele=document.getElementById("search");
            if(!ele.value.trim()){
                ele.value="用户名";
                }
            }
    </script>
</head>
<body>

<input type="text" id="search" value="用户名" onfocus="foo()" onblur="bar()">

<div>
    <div>div</div>
    <p>ppp</p>
</div>
</body>
</html>

View Code

七 DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // window.alert(123);
        //var ret=confirm("是否继续...")
        // console.log(ret)

        var ret=prompt("please input a num:")
        console.log(ret)
    </script>
</head>
<body>

</body>
</html>

View Code

八导航属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="outer">
    <p>p5</p>
    <p>p4</p>

    <div class="index">
        <p id="p1">p1</p>
    </div>
    <p>p2</p>
</div>

<script>
    var ele_p1=document.getElementById("p1");
    var ele_p1_pa=ele_p1.parentElement;

    console.log(ele_p1_pa.nextElementSibling);
</script>

</body>
</html>

View Code