07-JavaScript对象
JavaScript主要分为原始数据类型和引用数据类型
原始数据类型：number、string、boolean、null、undefined
引用数据类型：对象和函数
这里我们主要了解一下对象，JavaScript对象主要分为：Array、String、JS对象、JSON字符串、BOM、DOM对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS-对象-Array</title> </head> <body> <script> // 第一种方法，定义数组 var arr = new Array(1,2,3,4); // 第二种方法，定义数组 var arr2 = [1,2,3,4]; console.log("arr:",arr); console.log("arr2:",arr2); // 数组遍历 console.log("================第一种数组遍历================"); for(let i = 0; i < arr.length; i++){ console.log(arr[i]); } // foreach遍历 console.log("================第二种数组遍历================"); arr.forEach(function(item){ console.log(item); }); // 箭头函数遍历，ES6之后的箭头函数，简化了函数的定义 console.log("================第三种数组遍历================"); arr.forEach((item) => { console.log(item); }); // 添加元素 arr.push(5); console.log("添加后的arr:",arr); // 删除元素 arr.pop(); console.log("删除后的arr:",arr); // 修改元素 arr[0] = 0; console.log("修改后的arr:",arr); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS-对象-String</title> </head> <body> <script> // 第一种方法，定义字符串 var str = new String("hello world"); // 第二种方法，定义字符串 var str2 = "hello world"; console.log("str:",str); console.log("str2:",str2); // charAt() 获取指定位置的字符 console.log("charAt(0):",str.charAt(0)); // indexOf() 获取指定字符的位置 console.log("indexOf('o'):",str.indexOf('o')); // trim() 去掉字符串两端的空格 var str3 = " hello world "; console.log("str3:",str3); console.log("str3.trim():",str3.trim()); // toUpperCase() 转换为大写 console.log("toUpperCase():",str.toUpperCase()); // toLowerCase() 转换为小写 console.log("toLowerCase():",str.toLowerCase()); // split() 字符串分割 var str4 = "hello,world"; console.log("str4:",str4); var list = str4.split(','); console.log("str4.split(','):",list); // substring() 截取字符串，含头不含尾 console.log("substring(0,5):",str.substring(0,5)); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta charset="UTF-8"> <title>JS-对象-JSON</title> </head> <body> <script> // JavaScript对象的定义 var user = { name: "马铃薯", age: 25, gender: "male", eat: function () { console.log("吃饭"); } }; // JavaScript对象的访问 console.log("user:",user); console.log("user.name:",user.name); // 调用JavaScript对象中的方法 user.eat(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta charset="UTF-8"> <title>JS-对象-JSON</title> </head> <body> <script> // JSON对象(JSON字符串)的定义 var json = '{"name":"马铃薯","age":25,"gender":"male"}'; // JSON.parse() 方法,用于将一个 JSON字符串 转换为 JavaScript对象 var jsObj = JSON.parse(json); console.log("jsObj:",jsObj); // JSON.stringify() 方法,用于将 JavaScript对象 转换为 JSON字符串 var jsonStr = JSON.stringify(jsObj); console.log("jsonStr:",jsonStr); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS-对象-BOM</title> </head> <body> <script> // 获取window对象 console.log("window对象:",window); window.alert("Hello World 111"); alert("Hello World 222"); // window对象的方法 // confirm() 方法，弹出一个带有OK和Cancel按钮的对话框 // 这个方法返回一个布尔值，true表示用户点击了“OK”，false表示用户点击了“Cancel” // confirm("确定要删除吗？"); var result = confirm("确定要删除吗？"); console.log("confirm的结果：",result); // prompt() 方法，弹出一个带有输入框的对话框 prompt("请输入您的姓名：","马铃薯"); // setInterval() 定时器方法，按照指定的周期来调用函数或计算表达式（执行多次） // 每隔2秒钟，打印一次“我是定时器...” var count = 0; setInterval(function(){ count++; console.log("定时器执行了第" + count + "次..."); },2000); // setTimeout() 定时器方法，按照指定的周期延迟调用一次函数或计算表达式（执行一次） // 2秒钟后，打印“我是延迟定时器...” setTimeout(function(){ console.log("我是延迟定时器..."); },2000); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS-对象-BOM</title> </head> <body> <script> // 获取location对象 console.log("location对象:",location); console.log("跳转前location.href:",location.href); // 赋值location.href，可以实现页面跳转 setTimeout(function(){ location.href = "https://www.baidu.com"; },2000);
</script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS-对象-DOM演示</title> </head> <body> <div style="font-size:30px; text-align: center; margin-bottom: 10px" id="tb1">信息统计</div> <table width="800px" border="1" cellspacing="0" align="center"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr align="center" class="data"> <td>马铃薯</td> <td>25</td> <td>男</td> </tr> <tr align="center" class="data"> <td>福西西</td> <td>18</td> <td>女</td> </tr> </table> <br> <div style="text-align: center;"> <input id="b1" type="button" value="改变标题内容" onclick="fn1()"> <input id="b2" type="button" value="改变标题颜色" onclick="fn2()"> <input id="b3" type="button" value="删除最后一个" onclick="fn3()"> </div> </body> <script> // 获取元素 var tb1 = document.getElementById("tb1"); // 改变标题内容 function fn1(){ tb1.innerHTML = "信息统计-改变标题内容"; } // 改变标题颜色 function fn2(){ tb1.style.color = "red"; } // 删除最后一个 function fn3(){ var trs = document.getElementsByClassName("data"); var lastTr = trs[trs.length - 1]; lastTr.remove(); } </script> </html>
获取HTML DOM - HTML对象的文档，可以参考：https://www.w3school.com.cn/jsref/dom_obj_anchor.asp
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS-对象-DOM获取元素</title> <style> .employee { font-size: 20px; text-align: center; margin-bottom: 10px; } .cb, .image { text-align: center; } </style> </head> <body> <div class="image"> <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" id="logo"> </div> <div id="company" style="font-size:30px; text-align: center; margin-bottom: 10px">新兴铸管有限公司</div> <div class="employee">任维民</div> <div class="employee">王校凯</div> <div class="cb"> <input type="checkbox" name="project"> 环保项目 <input type="checkbox" name="project"> 能源系统 <input type="checkbox" name="project"> 铸管MES </div> </body> <script> // 获取Element元素 // 1.通过标签获取元素 var img = document.getElementsByTagName("img"); console.log("img:",img); // 2.通过id获取元素 var logo = document.getElementById("logo"); console.log("logo:",logo); var company = document.getElementById("company"); console.log("company:",company); // 3.通过class获取元素 var employees = document.getElementsByClassName("employee"); console.log("employees:",employees); // 4.通过标签名获取元素 var projects = document.getElementsByName("project"); console.log("projects:",projects); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS-对象-案例演示</title> </head> <body> <img src="img/off.png" alt="百度logo" id="logo"> <div class="cls">传智教育</div> <div class="cls">黑马程序员</div> <div class="cb"> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 </div> <input type="button" value="改变" onclick="change()"> </body> <script> function change() { // 点亮灯泡 var img = document.getElementById("logo"); img.src = "img/on.png"; // 将所有div的内容后面：very good（红色字体） var divs = document.getElementsByClassName("cls"); for (var i = 0; i < divs.length; i++) { // divs[i].innerHTML += " very good"; // divs[i].style.color = "red"; divs[i].innerHTML += "<span style='color:red;'> very good</span>"; } // 将所有的复选框选中 var cbs = document.getElementsByName("hobby"); for (var i = 0; i < cbs.length; i++) { cbs[i].checked = true; } } </script> </html>
