JavaScript(一)

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。

数据类型有:1.基础数据类型：number string boolean undefined null symbol(ES6新增)    2.复杂数据类型：object

基础DOM操作:通过ID，通过class，通过标签名，通过name、通过选择器……

事件:

鼠标事件： onclick 左键单击 ondblclick 左键双击 onmouseover onmouseenter 鼠标移入 onmouseout onmouseleave鼠标移出 onmousedown 鼠标按下 onmousmove 鼠标移动 onmouseup 鼠标抬起 oncontextmenu 右键单击

键盘事件：onkeydown onkeypress 键按下 onkeyup 键抬起

系统事件： onload 加载完成后 onerror 加载出错后 onresize 窗口调整大小时 onscroll 滚动时

表单事件： onfocus 获取焦点后 onblur 失去焦点后 onchange 改变内容后 onreset 重置后 onselect 选择后 onsubmit 提交后

this的认识   操作元素HTML内容: .innerHTML 获取/修改 元素的HTML内容，.innerText 获取/修改 元素的文本

    <div id="box1"style=200px;height:50px;background-color:#666666;margin:auto;line-height:50px;color:#ffffff;text-align:center;font-weight:bold;></div> 
    <div id="box2"style=200px;height:50px;background-color:#666666;margin:auto;line-height:50px;color:#ffffff;text-align:center;font-weight:bold;></div> 
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 
    <script> 
     let $box1 = document.getElementById("box1");
     let $box2 = document.getElementById("box2");
　　 $box1.onmouseenter = function (){
　　 $box2.style.background = "red"
　　 $box2.innerHTML = "<b>鼠标移入box1</b>"
　　 }
　　 $box1.onmouseleave = function (){
    $box2.style.background = "#666666"
    $box2.innerHTML = ""
    }
　　
    $box2.onmouseenter = function (){
　　 $box1.style.background = "blue"
　　 $box1.innerHTML = "<b>鼠标移入box2</b>"
　　 }
　　 $box2.onmouseleave = function (){
    $box1.style.background = "#666666"
    $box1.innerHTML = ""
    }