目录
一、事件初级
onload：页面加载完毕事件，只附属于window对象
onunload：在用户离开页面时被触发
onchange：常结合对输入字段的验证来使用。例：当用户改变输入字段的内容时，会调用 函数
onclick：鼠标点击时间
onmousedown：首先当点击鼠标按钮时，会触发 onmousedown 事件。（按住不放）
onmouseup ：当释放鼠标按钮时，会触发 onmouseup 事件。（按住后释放）
onmouseover：鼠标悬浮事件
onmouseout：鼠标移开事件
onfocus：表单元素获取焦点
onblur：表单元素失去焦点
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>事件初级</title> <script type="text/javascript"> // 事件需要绑定具体执行函数(方法) // 通过事件满足的条件触发绑定的函数(方法) // 函数(方法)完成具体的功能 // onload事件附属于window // onload触发条件:页面加载完毕(DOM文档树及页面资源) // 行间式方式可以书写在body标签 window.onload = function () { div.style.color = 'red'; } </script> </head> <body> 事件初级 <!-- 点击换橘色 悬浮换蓝色 --> <div id="div" onclick="div.style.color = 'orange';" onmouseover="overAction()">123</div> <!-- 1.直接将js代码块书写在行间事件中, 不提倡 --> <!-- 2.行间事件调用函数, 不提倡(比较直接) --> </body> <script type="text/javascript"> var overAction = function () { div.style.color = 'blue'; } // 3.为目的对象绑定事件方法,内部可以使用this关键词 // this就是绑定的对象本身 div.onmouseout = function () { this.style.color = 'pink'; } </script> </html>//例一 <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1> //例二 <!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerHTML="谢谢!"; } </script> </head> <body> <h1 onclick="changetext(this)">请点击该文本</h1> </body> </html>使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
实例
向 button 元素分配 onclick 事件：
<script> document.getElementById("myBtn").onclick=function(){displayDate()}; <!-- document.getElementById("id名字").onclick=function(){函数名()}; --> </script>在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
当按钮被点击时，会执行该displayDate函数。
二、JS选择器
1、getElement系列
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素 document.getElementById()
- 通过标签名找到 HTML 元素 document.getElementByClassNmae() | 页面元素对象 .getElementsByClassNmae()
- 通过类名找到 HTML 元素 document .getElementsByTagName() | 页面元素对象 .getElementsByTagName()
// 1.通过id名获取唯一满足条件的页面元素 document.getElementById('id名'); var x=document.getElementById("intro"); // 该方法只能由document调用 // 2、通过class名获取所有满足条件的页面元素 document.getElementsByClassName('class名'); var y=x.getElementsByClassName("pqqqq"); // 该方法可以由document及任意页面元素对象调用 // 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组) // 没有匹配到任何结果返回空HTMLCollection对象 ([]) // 3.通过tag名获取所有满足条件的页面元素 document.getElementsByTagName('tag名'); var y=x.getElementsByTagName("p"); // 该方法可以由document及任意页面元素对象调用 // 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组) // 没有匹配到任何结果返回空HTMLCollection对象 ([]) //提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。2、querySelect系列
// 1.获取第一个匹配到的页面元素 document.querySelector('css语法选择器'); // 该方法可以由document及任意页面对象调用 // 2.获取所有匹配到的页面元素 document.querySelectorAll('css语法选择器'); // 该方法可以由document及任意页面对象调用 // 返回值为NodeList (一个类数组结果的对象，使用方式同数组) // 没有匹配到任何结果返回空NodeList对象 ([])3、id名
可以通过id名直接获取对应的页面元素对象，但是不建议使用
三、JS操作页面内容
innerText：普通标签内容（自身文本与所有子标签文本）
innerHTML：包含标签在内的内容（自身文本及子标签的所有）
value：表单标签的内容
outerHTML：包含自身标签在内的内容（自身标签及往下的所有）
document.getElementById(id).attribute=new value：改变 HTML 元素的属性
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JS操作页面内容</title> </head> <body> <div class="sup"> sup的文本 <div class="sub">sub的文本</div> </div> <form action=""> <input class="input" type="text" /> <button class="btn" type="button">获取</button> </form> </body> <script type="text/javascript"> // 通过js获取页面需要操作的元素对象 var sup = document.querySelector('.sup'); var sub = sup.querySelector('.sub'); // 获取 // 自身及所有子级的文本 console.log(">>>>>" + sup.innerText); // sup的文本 \n sub的文本 console.log(">>>>>" + sub.innerText); // sub的文本 // 自身文本及所有子级的所有(包含标签的所有信息:标签名,id名,class名,样式,事件,文本...) console.log(">>>>>" + sup.innerHTML); // <div class="sub">sub的文本</div> console.log(">>>>>" + sub.innerHTML); // sub的文本 // 赋值 sub.innerText = "<b>修改的sub文本</b>"; sub.innerHTML = "<b style='color: red'>修改的sub文本</b>"; // Text不解析标签语法,原样作为文本赋值给目标对象 // HTML可以解析标签语法 console.log("-------------------------------------------------"); console.log(sub.innerHTML); // <b style='color: red'>修改的sub文本</b> console.log("-------------------------------------------------"); console.log(sub.outerHTML); // <div class="sub"><b style='color: red'>修改的sub文本</b></div> console.log("-------------------------------------------------"); var btn = document.querySelector('.btn'); var ipt = document.querySelector('.input'); btn.onclick = function () { // 获取表单元素的文本值 // 获取文本 var v = ipt.value; console.log(v); // 清空文本 ipt.value = ""; // 赋值空文本 } </script> </html>
四、JS操作页面样式
style属性样式 （读写）
注意：只能获取行间式，进行读写操作
div.style.backgroundColor = 'red'; document.getElementById("p2").style.color="blue"; // 1.操作的为行间式 // 2.可读可写 // 3.具体属性名采用小驼峰命名法
计算后样式 （只读）
注意：页面一般采用css样式布局,css布局的样式叫 “计算后样式”
// eg: 背景颜色 // 推荐 getComputedStyle(页面元素对象, 伪类).getPropertyValue('background-color'); getComputedStyle(div, null).getPropertyValue('background-color') // 不推荐 getComputedStyle(页面元素对象, 伪类).backgroundColor; getComputedStyle(div, null).backgroundColor; // IE9以下 页面元素对象.currentStyle.getAttribute('background-color'); 页面元素对象.currentStyle.backgroundColor; // 1.页面元素对象由JS选择器获取 // 2.伪类没有的情况下用null填充 // 3.计算后样式为只读 // 4.该方式依旧可以获取行间式样式 (获取逻辑最后的样式)
结合 css 操作样式
页面元素对象.className = ""; // 清除类名 页面元素对象.className = "类名"; // 设置类名 页面元素对象.className += " 类名"; // 添加类名js切换样式实例
DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js操作页面样式</title> <style type="text/css"> div#div.div { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <!-- style="background-color: orange;" 行间式优先级高于任何css选择器 --> <!-- 低于!important --> <!-- <div id="div" class="div" style="background-color: orange;"></div> --> <div id="div" class="div"></div> <button class="btn">切换</button> </body> <script type="text/javascript"> var div = document.querySelector('.div'); // js操作的就是行间式 // div.style.backgroundColor = 'orange'; // 需求:切换背景颜色 红 <=> 黄 // 1.获取原来的颜色 // 2.判断颜色 // 3.修改颜色 // 因为页面一般采用css样式布局,css布局的样式叫 “计算后样式” // 而ele.style.样式只能获取行间式样式 // var bgColor = div.style.backgroundColor; // console.log(bgColor); // 获取计算后样式 // getComputedStyle参数: 页面对象 伪类 // getPropertyValue参数: css语法的样式字符串 // var bgColor = getComputedStyle(div, null).getPropertyValue('background-color'); var bgColor = getComputedStyle(div, null).backgroundColor; console.log(bgColor); // rgb(255, 0, 0) var btn = document.querySelector('.btn'); // 点击一下 btn.onclick = function () { // 获取当前颜色一次 bgColor = getComputedStyle(div, null).backgroundColor; console.log(bgColor); // 判断并修改 if (bgColor == 'rgb(255, 0, 0)') { div.style.backgroundColor = 'orange'; } else { div.style.backgroundColor = 'red'; } } </script> </html>
