<!-- 两种都可以 --> 
    <script></script>
    <!-- type="text/javascript"  如果希望向下兼容低版本浏览器，那还是建议加上 -->
    <script type="text/javascript"></script>

学习JavaScript   需要严谨

// 必须在js的第一行,严格检查,js约束少,但也不能瞎写
"use strict"
i=1;     不严格检查就可以这样写了
//ES6+  
let i=1;
//ES6- 
var i=1;

了解vscode的简单使用


基础语法

JavaScript 区分大小写

行间js


内部js

外部js(推荐）

JavaScript  ( js ) 

<!-- 两种都可以 --> 
<script></script>
<!-- type="text/javascript"  如果希望向下兼容低版本浏览器，那还是建议加上 css同理 -->
<script type="text/javascript"></script>
type属性表示使用的脚本语言类型

id选择元素   
document.getElementById()

<script>
    //获取元素
    //document.getElementById()
    document.getElementById('btn')
    // console.log() 检查打印元素对象到console中
       // 遇到一一个符合条件的元素就返回
    console.log(document.getElementById('btn'))
</script>


元素选择器选择元素 
document.querySelector()   但是IE8以下的浏览器不可使用

<script>
   //document.querySelector()  通过选择器查找
   //直接选择
    document.querySelector('#btn')  
    document.querySelector('.box')
    //层级选择
    document.querySelector('#out .box')
   
    // console.log() 检查打印元素对象到console中
     //遇到第一个符合条件的元素就返回元素
     console.log( document.querySelector('#btn')  )
    console.log( document.querySelector('.box')  )
    console.log(document.querySelector('#out .box'))
</script>

Script不建议放在head标签里原因：元素还未加载，console.log() 方法获取不到元素，永远为null,不方便检查元素是否获取情况  （加载慢，耗资源大）

也有解决方法 

          <script>
        // window.onload  等待窗口加载完成 function() {使用获取元素的方法获取元素} 
        window.onload = function(){
        console.log( document.querySelector('#btn')  )
        console.log( document.querySelector('.box')  )
        console.log(document.querySelector('#out .box'))
        }
        //document.querySelector()  通过选择器查找
        //直接选择
         document.querySelector('#btn')  
         document.querySelector('.box')
         //层级选择
         document.querySelector('#out .box')
     </script>
         //以上写在head里

添加绑定事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            width: 100px;
            height: 50px;
            color: red;
            background-color: yellow;
            font: 18px/35px '微软雅黑';
            margin: 0;
            padding: 0;
        }
        #out .box{
            margin-top: 10px;
            background-color: violet;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <button id="btn">按钮</button>
    <div id="out">
        <div class="box"> 
            box
        </div>
    </div>
    <script>
        document.getElementById('btn').onclick=function(){
            //当元素被点击的时候，要做的事情
            document.querySelector('#out .box').style.background='yellow';
        }
     </script>
</body>
</html>

变量           
简化代码，易于阅读

用于存储数据    var btn = document.getElementById('btn');
 


<script>
        // var 关键字 btn 变量名 自己取 变量赋值 btn='值'
        var btn = document.getElementById('btn');
        var box = document.querySelector('#out .box');
        btn.onclick = function () {   
           box.style.background = 'red';
        }
                //功能一样但赋值简化了代码，易于阅读
        // document.getElementById('btn').onclick=function(){
        //     //当元素被点击的时候，要做的事情
        //     document.querySelector('#out .box').style.background='yellow';
        // }
    </script>


var a,b,c;      可以一次性定义多个变量名


JavaScript与Java有一定的相似性  










Date对象

Json对象

JSON是字符串

了解



面向对象

继承

操作BOM对象 important


操作DOM对象

这是原生代码,之后尽量使用Jquery


操作表单 验证



MD5讲得太乱不记录

MD5加密

下载js文件,头部引入即可使用 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <script src="./md5.js"></script> //md5可直接使用
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./JQmd5.js"></script> //JQmd5 需要引入jquery
</head>
<body>
    
</body>
<script>
    var str = "xxgsgs";
    console.log(hex_md5(str));
    console.log($.md5(str));
</script>
</html>