标签：加载 lang remove create focus hold sem charset cti
JS中常见的事件
1.当页面加载完毕
<script type="text/javascript"> //当页面加载完毕 window.onload = function () { alert(‘页面加载完毕‘); } </script>
2.监听鼠标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS常见的事件</title> </head> <body> <img src="./image/icon_01.png" alt=""> <input type="text" placeholder="请输入密码"> <script type="text/javascript"> //当页面加载完毕 window.onload = function () { alert(‘页面加载完毕‘); var img = document.getElementsByTagName(‘img‘)[0]; var input = document.getElementsByTagName(‘input‘)[0]; //监听鼠标?? //1.1鼠标进入图片 img.onmouseover = function () { console.log(‘鼠标进入图片‘); } //1.2鼠标在图片上移动 img.onmousemove = function () { console.log(‘鼠标在图片上移动‘); } //1.3鼠标离开图片 img.onmouseout = function () { console.log(‘鼠标离开图片‘); } // 2.当输入框获得焦点 input.onfocus = function () { input.style.width = ‘500px‘; input.style.height = ‘60px‘; } } </script> </body> </html>
3.JS增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS增删该查</title> <style> #main { background-color: red; width: 400px; height: 300px; } </style> </head> <body> <div id="main"> <p>我是描述图片的</p> </div> <script src="./js/index.js"> // alert(0);//不会执行 </script> <script type="text/javascript"> // alert(0);//会执行 </script> </body> </html>
index.js
// JS增删改查 // 增 document.write(‘Hello,world‘); // 在main Div 中插入一个图片 //拿到div var main = document.getElementById(‘main‘); //1.1 创建图像标签 var img = document.createElement("img"); img.src = ‘./image/icon_01.png‘; //1.2添加 main.appendChild(img); // 删除 img.remove(); // 改(修改大小) //查 //document.getElementById、ClassName、Name、TagName(控件名称)四种 //打印所有元素(子标签) console.log(main.childNodes);
标签：加载 lang remove create focus hold sem charset cti
原文地址：https://www.cnblogs.com/StevenHuSir/p/10203331.html
