JS 引入方式
在 HTML 中写入
写在 的标签里
<script>
</script>
推荐 放在 </body> 结束之前
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="box">你好同学</div> <script> var box=document.querySelector('.box'); // 获取对象 box.innerText='我好,'; </script> </body> </html>
导入 js 文件
<script src="1.js"></script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="box">你好同学</div> <script src="1.js"></script> <script> var box=document.querySelector('.box'); // 获取对象 box.innerText='我好,'; </script> </body> </html>
// 1.js var box=document.querySelector('.box'); // 获取对象 box.style.color='red';
获取对象
获取对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 30px; 200px; background: #525d68; } </style> </head> <body> <div>我就是我</div> <div id="box1">你就是你</div> <div class="box2">他就是他</div> <script> var box = document.getElementsByTagName('div') ; // 通过标签获取对象 console.log(box[0].innerText); var box1 = document.getElementById('box1'); // 通过 id 获取对象 console.log(box1.innerText); var box2 = document.getElementsByClassName('box2'); console.log(box2[0].innerText); // CSS 选择器 var box3 = document.querySelector('div'); console.log(box3.innerText); var box4 = document.querySelector('#box1'); console.log(box4.innerText); var box5 = document.querySelector('.box2'); console.log(box5.innerText); var box6 = document.querySelectorAll('div'); // querySelectorAll 拿到全部对象 用列表 console.log(box6[0].innerText); </script> </body> </html>
样式修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 30px; 200px; background: yellow; } .test{ font-size: 100px; color: gray; } </style> </head> <body> <div>你好同学</div> <script> //单个样式修改 var box = document.getElementsByTagName('div')[0]; // box.style.fontSize='50px'; // box.style.color='red'; //多个样式同时修改 // box.style.cssText='height;300px; 200px; color:blue'; // box.style.cssText=a+ ':' +b; == box.style[0]=b; // 用于函数中变量传参, // //赋值型 box.className='test'; </script> </body> </html>
鼠标事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ height: 30px; 100px; background: skyblue; line-height: 30px; text-align: center; cursor: pointer; /*小手*/ } .box1{ height: 200px; 500px; background: gray; margin-top: 20px; } .box2{ height: 200px; 500px; background: gray; margin-top: 20px; } </style> </head> <body> <div class="box">点击事件</div> <div class="box1"></div> <div class="box2"></div> <script> // 鼠标单双 击 事件 var box = document.getElementsByClassName('box')[0]; box.onclick=function () { // console.log('单击') var im = document.getElementsByTagName('div')[1]; im.style.background = "url('https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg')" }; box.ondblclick=function () { console.log('双击') };
// 鼠标移入移出 var box2 = document.getElementsByTagName('div')[2]; box2.onmouseenter = function(){ // 鼠标移入 box2.style.background = 'red'; }; box2.onmouseleave = function(){ // 鼠标移出 box2.style.background = 'yellow'; } </script> </body> </html>
事件操作补充
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select id="aa"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <script> window.onresize = function (ev) { // 窗口尺寸发生变化,触发 console.log('123456879') }; //下拉框事件 var sel = document.getElementById('aa'); sel.onchange = function () { // 下拉框事件 console.log('000000000000') }; </script> </body> </html>
属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box">属性操作</div> <script> // 获取元素 var box = document.getElementById('box'); //操作合法属性 (增 删 改 查) //增 box.className = 'test'; //改 box.className = 'aa'; // 查 console.log(box.className); //删 box.removeAttribute('class'); //操作自定义属性 (增 删 改 查) //增 box.setAttribute('aa','bb') ; // <div id="box" aa="bb">属性操作</div> // 改 box.setAttribute('cc','dd') ; // <div id="box" cc="dd">属性操作</div> // 查 console.log(box.hasAttribute('cc')) // 删 box.removeAttribute('cc'); </script> </body> </html>
数据类型
查找数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var a=5; console.log(typeof a); var b = 'aaa'; console.log(typeof b); console.log(typeof false) var c; console.log(typeof c); // 当 var 了一个变量,但没给其值,就是 undefined 数据类型 //对象类型 数组 var d = [1,3,2,4]; console.log(typeof d); //object // var e={'k1':'v1', 'k2':'v2'}; //object console.log(typeof e); </script> </body> </html>