JavaScript基础

一、前言

JavaScript代码存在形式：

   - Head中

                 <script type="text/javascript">

                        //javascript代码

                 </script>

   - 文件中

               <script src='js文件路径'></script>

   PS：js代码需要放置在<body>标签内部的最下方

注释：

        当行注释 //

         多行注释 /*   */

二、基础

   http://www.cnblogs.com/wupeiqi/articles/5602773.html

创建一个定时器,每隔5s执行alter(123)：

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

<script>
    setInterval("alert(123);",5000)
</script>
</body>
</html>

当然也可以通过函数方式：

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

<script>
    function f1(){
    console.log(1);
    }
    setInterval("f1();",2000)
</script>

</body>
</html>

走马灯了解一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="i1">欢迎苍井空来到中国</div>

<script>
    function func(){
    //根据id获取指定标签的内容
    var tag = document.getElementById('i1');
    //获取标签内部内容
    var content = tag.innerText;
    //获取第一个字
    var f = content.charAt(0);

    //获取第一个字外的其他内容
    var k = content.substring(1,content.length);

    var new_content = k+f;
    tag.innerText = new_content;
    }
    setInterval("func()",1000)
</script>

</body>
</html>

三、Dom基础

http://www.cnblogs.com/wupeiqi/articles/5643298.html

       文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。 

 举例，先写一个html，然后操作它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="ly">你好</div>
<a>sfjsk</a>
<a>888</a>
<a>slfm</a>

</body>
</html>

可以看到原来的值都已经被改掉了

模拟对话框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
        width:500px;
        height:400px;
        background-color:white;
        position:fixed;
        left:50%;
        top:50%;
        margin-left:-250px;
        margin-top:-200px;
        z-index:10;
        }
        .c2{
        position:fixed;
        left:0;
        top:0;
        right:0;
        bottom:0;
        background-color:black;
        opacity:0.6;
        z-index:9;
        }
        .hide{
        display:none;
        }

    </style>
</head>
<body style="margin:0;">
<div>
    <table>
        <thead>
        <tr>
            <th>主机名</th>
            <th>端口</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1.1.1.1</td>
            <td>8010</td>
        </tr>
        <tr>
            <td>1.1.1.2</td>
            <td>8020</td>
        </tr>
        <tr>
            <td>1.1.1.3</td>
            <td>8030</td>
        </tr>
        </tbody>
    </table>
    <input type="button" value="添加" onclick="ShowModel();"/>

</div>

<!--遮罩层开始-->
<div id="y1" class="c2 hide"></div>
<!--遮罩层结束-->

<!--弹出框开始-->
<div id="y2" class="c1 hide">
    <p><input type="text" /></p>
    <p><input type="text" /></p>

    <p>
        <input type="button" value="确定" />
        <input type="button" value="取消" onclick="CancelModel();"/>
    </p>
</div>
<!--弹出框结束-->
<script>
    function ShowModel(){
    document.getElementById('y1').classList.remove('hide');
    document.getElementById('y2').classList.remove('hide');
    }
    function CancelModel(){
    document.getElementById('y1').classList.add('hide');
    document.getElementById('y2').classList.add('hide');
    }
</script>
</body>
</html>
View Code

<body style="margin:0;">  可以让展示页面顶格

注意加分号，这样即使几条代码在一行都不会出错，解释器也能识别

全选 返现 取消功能实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
        width:500px;
        height:400px;
        background-color:white;
        position:fixed;
        left:50%;
        top:50%;
        margin-left:-250px;
        margin-top:-200px;
        z-index:10;
        }
        .c2{
        position:fixed;
        left:0;
        top:0;
        right:0;
        bottom:0;
        background-color:black;
        opacity:0.6;
        z-index:9;
        }
        .hide{
        display:none;
        }


    </style>
</head>
<body style="margin:0;">
<div>
    <table id="tb">
        <thead>
        <tr>
            <th>选择</th>
            <th>主机名</th>
            <th>端口</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>8010</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.2</td>
            <td>8020</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.3</td>
            <td>8030</td>
        </tr>
        </tbody>
    </table>
    <input type="button" value="添加" onclick="ShowModel();"/>
    <input type="button" value="全选" onclick="ChooseAll();"/>
    <input type="button" value="取消" onclick="CancelAll();"/>
    <input type="button" value="反选" onclick="ReverseAll();"/>
</div>

<!--遮罩层开始-->
<div id="y1" class="c2 hide"></div>
<!--遮罩层结束-->

<!--弹出框开始-->
<div id="y2" class="c1 hide">
    <p><input type="text"/></p>
    <p><input type="text"/></p>

    <p>
        <input type="button" value="确定"/>
        <input type="button" value="取消" onclick="AddhideModel();"/>
    </p>
</div>
<!--弹出框结束-->
<script>
    function ShowModel(){
        document.getElementById('y1').classList.remove('hide');
        document.getElementById('y2').classList.remove('hide');
    }

    function AddhideModel(){
        document.getElementById('y1').classList.add('hide');
        document.getElementById('y2').classList.add('hide');
    }

    function ChooseAll(){
        var tbodyy = document.getElementById('tb');
        var tbodyyy = tbodyy.children[1]
        //获取所有的tr
        var tr_list = tbodyyy.children;
        for(var i=0;i<tr_list.length;i++){
        //循环所有的tr
        var current_tr = tr_list[i];
        var checkbox = current_tr.children[0].children[0];
        checkbox.checked = true;
           }
    }

    function CancelAll(){
        var tbodyy = document.getElementById('tb');
        var tbodyyy = tbodyy.children[1]
        //获取所有的tr
        var tr_list = tbodyyy.children;
        for(var i=0;i<tr_list.length;i++){
        //循环所有的tr
        var current_tr = tr_list[i];
        var checkbox = current_tr.children[0].children[0];
        checkbox.checked = false;
           }
    }

    function ReverseAll(){
        var tbodyy = document.getElementById('tb');
        var tbodyyy = tbodyy.children[1]
        //获取所有的tr
        var tr_list = tbodyyy.children;
        for(var i=0;i<tr_list.length;i++){
        //循环所有的tr
        var current_tr = tr_list[i];
        var checkbox = current_tr.children[0].children[0];
        if(checkbox.checked){
           checkbox.checked = false;
                            }
        else{
           checkbox.checked = true;
            }
            }
    }

</script>
</body>
</html>
View Code

有个知识点：反选的时候可以通过checked判断checkbox是否选中，选中true，未选中false

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item .header{
           height:35px;
           background-color:blue;
           color:white;
           line-height:35px;

        }
        .hide{
           display:none;
        }
    </style>
</head>
<body>
<div style="height:48px"></div>
<div style="300px">
    <div class="item">
        <div id='l1' class="header" onclick="ChangeMenu('l1');">菜单一</div>
        <div class="content">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="item">
        <div id='l2' class="header" onclick="ChangeMenu('l2');">菜单二</div>
        <div class="content hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="item">
        <div id='l3' class="header" onclick="ChangeMenu('l3');">菜单三</div>
        <div class="content hide">
            <div>内容3</div>
            <div>内容3</div>
            <div>内容3</div>
        </div>
    </div>
</div>
<script>
    function ChangeMenu(nid){
    <!--console.log(123);-->
    var current_header = document.getElementById(nid);
    <!--console.log(current_header)-->
    var item_list = current_header.parentElement.parentElement.children;
    <!--console.log(item_list)-->
    for(var i=0;i<item_list.length;i++){
        var current_item = item_list[i];
        current_item.children[1].classList.add('hide')
    }
    current_header.nextElementSibling.classList.remove('hide');

    }
</script>
</body>
</html>
View Code

心情不好不想写注释，不想看书了，就酱

四、函数基础

普通函数

      function func(){

      }

匿名函数

      function func(arg){

           return  arg+1

      }

      setInterval("func()",5000);

      setInterval(function(){

            console.log(123);

      },5000)

自执行函数：创建函数并自动执行

       function func(arg){

           console.log(arg);

      }

      //func(1)

      (function(arg)){

           console.log(arg);

       })(1)

五、序列化反序列化

新建数组：

li = [1,4,6,12,56,78]
(6) [1, 4, 6, 12, 56, 78]

序列化：

JSON.stringify(li)
"[1,4,6,12,56,78]"

反序列化：

a = JSON.stringify(li)
"[1,4,6,12,56,78]"
JSON.parse(a)
(6) [1, 4, 6, 12, 56, 78]

六、转义

      客户端（cookie）  =>  服务器端

      将数据经过转义后，保存在cookie中

       

  • decodeURI( )                   URl中未转义的字符
  • decodeURIComponent( )   URI组件中的未转义字符
  • encodeURI( )                   URI中的转义字符
  • encodeURIComponent( )   转义URI组件中的字符
  • escape( )                         对字符串转义
  • unescape( )                     给转义字符串解码
  • URIError                         由URl的编码和解码方法抛出

   

      eval

      python ：

              val = eval（表达式） 不能执行for循环

                       exec（执行代码） 

      JavaScript

              eval  可以计算表达式也可以执行代码

       时间

       Date类

       var  d = new Date（）  创建d对象

       

        可以通过d.getxxx 获取具体小时，月份等；也可以通过d.setxxx设置时间

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/brownyangyang/p/9115314.html