初识JavaScript

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

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

基础DOM操做:经过ID,经过class,经过标签名,经过name、经过选择器……this

事件:spa

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

键盘事件:onkeydown onkeypress 键按下 onkeyup 键抬起code

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

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

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

    <div id="box1"style=width:200px;height:50px;background-color:#666666;margin:auto;line-height:50px;color:#ffffff;text-align:center;font-weight:bold;></div> 
    <div id="box2"style=width: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 = ""
    }
相关文章
相关标签/搜索