初识JavaScript

2020-12-24 02:01:33 阅读：239 来源： 互联网

标签：50px 鼠标 JavaScript stytle 初识 background box1 box2

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

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

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

事件:

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

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

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

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

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

<body>

    <div id="box1" style=width:200px;hight:50px;background-color:#666666;margin:auto 50px;line-height:50px;color:#ffffff;text-align:center;font-weight: bold;></div> 
    <div id="box2" style=width:200px;hight:50px;background-color:#666666;margin:auto 50px;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")
         $box2 = document.getElementByid("box2");

　　 $box1.onmouseenter = function (){
　　 $box2.stytle.background = "red"
　　 $box2.innterHTML = "<b>鼠标移入box1</b>"
　　 }
　　 $box1.onmouselevave = function (){
    $box2.stytle.background = "#666666"
    $box2.innterHTML = ""
    }

    $box2.onmouseenter = function (){
　　 $box1.stytle.background = "blue"
　　 $box1.innterHTML = "<b>鼠标移入box2</b>"
　　 }
　　 $box2.onmouselevave = function (){
    $box1.stytle.background = "#666666"
    $box1.innterHTML = ""
    }


    
   </script>
</body>

</html>

标签：50px,鼠标,JavaScript,stytle,初识,background,box1,box2
来源： https://www.cnblogs.com/yhy-blog/p/14182362.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

初识JavaScript