JavaScript-DOM操作
操作元素样式
1.通过选择器的方式设置 语法：标签对象.className = '类名'; 注意： a.给标签设置多个类名需要空格隔开 b.如果标签本身有类名，会被覆盖掉，所以需要重新赋值 2.通过行内样式设置 语法：标签对象.style.属性 = 值; 注意： a.通过 标签对象.style 得到的是对象案例
动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width: 200px; height: 200px; background-color: green; } .donghua { animation: move 5s linear forwards; } /* 动画 */ @keyframes move { 0% { border-radius: 0; background-color: green; transform: translate(0); } 50% { border-radius: 50%; background-color: pink; transform: translate(0); } 60% { border-radius: 50%; background-color: pink; transform: translate(0); } 100% { border-radius: 50%; background-color: pink; transform: translate(500px); } } </style> </head> <body> <input type="button" value="走你"> <div class="box"></div> <script> //1. 获取按钮 和 div var btn = document.querySelector('input'); var div = document.querySelector('div'); // 2. 点击按钮 btn.onclick = function() { // 3. 给div动态添加类名 donghua div.className = 'box donghua'; } </script> </body> </html>隔行变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul> <li>哈哈</li> <li>嘿嘿</li> <li>哈哈</li> <li>嘿嘿</li> </ul> <script> // 1. 获取li var lis = document.querySelectorAll('li'); //2. 遍历获取每一个li,并设置样式 for (var i = 0; i < lis.length; i++) { // 3. 判断 if (i % 2 == 0) { lis[i].style.background = 'red'; } else { lis[i].style.background = 'blue'; } } </script> </body> </html>H5新增操作标签样式
1.Dom.classList.add() 添加类名 多个类名用逗号隔开，原来有类名不覆盖 2.Dom.classList.remove() 移除类名 3.Dom.classList.toggle() 切换类名 如果标签包含对应的类名，切换时移除对应类名 如果标签不包含对应的类名，切换时添加 即：有则移除，无则添加 4.Dom.classList.contains() 是否包含 检测当前标签是否有某个类名 如果返回的结果是true,代表有该类名 如果返回的结果是false,代表没有该类名案例
使用classListf方式实现tab栏切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; text-decoration: none; } .nav { height: 55px; line-height: 55px; background-color: #ccc; } .nav .w { width: 980px; margin: 0 auto; } .nav li { float: left; } .nav li a { padding: 0 25px; display: block; color: red; } .nav li a.active { background-color: orange; color: #000; } </style> </head> <body> <div class="nav"> <div class="w"> <ul> <li><a href="javascript:;" class="active">首页</a></li> <li><a href="javascript:;">联系我们</a></li> <li><a href="javascript:;">关于我们</a></li> <li><a href="javascript:;">课程介绍</a></li> </ul> </div> </div> <script> //1. 获取所有的a标签 var aBtns = document.querySelectorAll('.nav a'); //2. 注册点击事件 for(var i = 0; i < aBtns.length; i++) { //3. 单击按钮 aBtns[i].onclick = function() { //排他思想: 干掉所有人,留下我自己 for(var j = 0; j < aBtns.length; j++) { aBtns[j].classList.remove('active'); } //给当前标签加样式 this.classList.add('active'); } } </script> </body> </html>
操作表单属性
- value属性【购物车案例】
1.获取表单控件中的值 <input type = 'text' value = '123'> <script type="text/javascript"> var input = document.querySelector('input'); alert(input.value); </script> 2. 设置表单控件的值 <script type="text/javascript"> var input = document.querySelector('input'); input.value = '值'; </script>
- disabled属性 readOnly属性【同意完成注册案例】
1.获取当前控件是否被禁用 标签对象.disabled --> 如果返回false，代表没有被禁用，否则被禁用 标签对象.readOnly --> 如果返回false，代表没有被禁用，否则被禁用 2.设置控件是否禁用 标签对象.disabled = true | false; 标签对象.readOnly = true | false; 3.案例 <body> <input type="checkbox" class="ck"> <input type="button" value="注册" disabled class="txt"> <script> var ck = document.querySelector('.ck'); var btn = document.querySelector('.txt'); ck.onclick = function () { var flag = this.checked; if (flag) { btn.disabled = false; } else { btn.disabled = true; } } </script> </body>
- checked属性
1.获取控件是否被选中 dom.checked ---> true （选中） | false (未选中) 2.设置控件是否被选中 dom.checked = true | false;
- selected属性
1.获取下拉列表是否被选中 dom.selected ---> true (选中) | false (未选中) 2.设置控件是否被选中 dom.selected = true (选中) | false (未选中) 备注： 1. 下拉列表默认是从第一项开始显示的，默认第一项是被选中的状态案例
购物车数量增加案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="text" value="0" class="num"> <input type="button" value="+" class="add"> <input type="button" value="-" class="jian"> <script> //加法: // 1. 先点击按钮,然后获取输入框中的值,将值加1 // 2. 将加1之后的值,从新赋值给输入框 //先获取元素 var num = document.querySelector('.num'); var add = document.querySelector('.add'); var jian = document.querySelector('.jian'); add.onclick = function() { //获取输入框中的值 var num_text = Number(num.value); if(num_text < 0) { alert('别瞎整....'); num.value = 0; return; } //将值加1 num_text = num_text + 1; //将加1之后的值重新赋值 num.value = num_text; } jian.onclick = function() { //获取值 var num_text = Number(num.value); if(num_text <= 0) { num_text = 0; }else { //在值的基础上减1 num_text = num_text - 1; } //重新赋值 num.value = num_text; } </script> </body> </html>
购物车全选案例反选案例【课堂】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll" /> </th> <th>商品</th> <th>价钱</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox" /> </td> <td>iPhone8</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Pro</td> <td>5000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Air</td> <td>2000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Apple Watch</td> <td>2000</td> </tr> </tbody> </table> <input type="button" value=" 反 选 " id="btn"> </div> <script> //全选功能: // 全选按钮的状态和其他复选框的状态是统一的 //获取全选按钮 var ck_all = document.querySelector('#j_cbAll'); //获取其他复选框 var cks = document.querySelectorAll('tbody input'); //1. 全选功能实现 ck_all.onclick = function() { //先获取当前全选按钮的状态 var flag = this.checked; //将当前全选按钮的状态赋值给其他复选框 for(var i = 0; i < cks.length; i++) { cks[i].checked = flag; } } //2.单选效果: // 如果所有的复选框都被选中了,则全选按钮也要被选中 //只要有一个复选框未被选中,则全选按钮不需要选中 //步骤: 需要给每一个复选框注册一个点击事件 // 每点击一次,都要遍历一次复选框的状态 for(var i = 0; i < cks.length; i++) { cks[i].onclick = function() { // 标志位: 做记号, 如果记号一直为true,认为所有的按钮都被选中了 // 如果记号改为其他值,只要不是true,那么就认为至少有一个未被选中 var flag = true; //遍历每一个复选框的状态 for(var j = 0; j < cks.length; j++) { if(cks[j].checked != true) { //代表有一个复选框未被选中 flag = false; break; } } //将全选按钮的状态设置为记号的状态 ck_all.checked = flag; } } //3. 反选功能: // 选中的设置为未被选中 // 未被选中的设置位置选中 // 如果都选中了,则全选也被选中 var btn = document.querySelector('#btn'); btn.onclick = function() { //表示全选按钮是否被选中 var flag = true; //遍历获取每一个复选框的状态 for(var i = 0; i < cks.length; i++) { //当前复选框是选中的状态 if(cks[i].checked) { //将当前复选框设置为未被选中的状态 cks[i].checked = false; flag = false; }else { //当前复选框是未选中的状态 cks[i].checked = true; } } //设置全选按钮的效果 ck_all.checked = flag; } </script> </body> </html>
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！