学习笔记——web
一、学习重点
内容较分散，详见笔记！
二、学习内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button onclick="show()">3秒后看结果</button> <button onclick="stopShow()">不看结果</button> <script> let timer; function show() { timer = setTimeout(function() { console.log("我就是你要看到的"); },3000); } function stopShow() { clearTimeout(timer); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 400px; height: 400px; border: 1px solid black; } </style> </head> <body> <a href="demo01.html">再倒计时</a> <button onclick="daojishi()">倒计时</button> <div></div> <script> function daojishi() { let div = document.querySelector("div"); let i = 5; let timer = setInterval(function() { div.innerHTML = `<h1>${i}</h1>`; i--; if(i < 0){ // clearInterval(timer); div.innerHTML = "<h1>GO！！！</h1>" return; } },900); // if(i == 0){ // clearInterval(timer); // } console.log(i); } </script> </body> </html>
三、笔记内容
<body> <!-- 所有的HTML元素，我们可以根据具体需求， 自定义添加属性 --> <div haha="abc" id="xyz"></div> <script> let div = document.querySelector("div"); // 获取这个属性的值 // 为什么name拿不到，id能拿到 // 元素.属性名的方式只适用于元素原生的属性 // console.log(div.haha); console.log(div.getAttribute("haha")); // 设置元素的属性 // div.className="mmm"; // 用元素.属性名的方式行不通 // div.setAttribute("class","nnn"); div.setAttribute("hehehe","heihiehie"); // 重复的设置会覆盖，修改 div.setAttribute("haha","hijklmn"); // 删除属性 // div.removeAttribute("haha"); </script> </body>
<body> <div haha="abc" id="xyz" class="nnn"></div> <script> let div = document.querySelector("div"); // 拿到元素的所有的属性 // 返回的结果是一个属性节点的映射和集合 console.log(div.attributes); console.log(div.attributes[1]); console.log(div.attributes[1].name); console.log(div.attributes[1].value); div.attributes[1].value="xxx"; </script> </body>
<body> <div>112233</div> <script> let div = document.querySelector("div"); div.id = "aaa"; div.title = "bbb"; // 样式特殊 className div.className = "fontStyle"; // 行内css样式 div.style = "color:yellow;display:inline"; </script> </body>
<script> /* BOM：Browser Object Model BOM核心对象window navigator： history： screen： location： */ // 回调函数 // ES6语法 // let callback = function (a) { // console.log(a); // } // callback(1); // callback("hello"); // callback({name:"zhangsan"}); // callback([1,2,3]); /* test函数中，入参可以是一个函数 */ let test = function(fun){ console.log("before"); // 调用了传进来的函数 fun(1000); console.log("after"); } let callback = function(data) { console.log("I am callback，" + data); } // test(1); /* 传入的参数是一个函数类型时， 只需要写函数名，不需要写()小括号 */ test(callback); /* * 回调函数，一个函数的参数是另一个函数 * JS数据类型，number,string,boolean,object,array * null,undefined,function * */ // function fun() {} </script>
<script> /* 参数1：函数 参数2：延迟时间 */ // 2000ms后打印123 // timer叫做一个计时器 let timer = setTimeout(function(){ document.write("<h1>5秒钟后可以见到我</h1>") },5000); // 清除计时函数 // 参数：要清除哪一个计时器 clearTimeout(timer); /* 定义两个按钮 点击第一个按钮：x秒后打印输出一句话 点击第二个按钮：终止这个操作 */ </script>
<script> // 周期性定时器，每隔多少秒走一次 let timer = setInterval(function() { console.log("123"); },2000); clearInterval(timer); /* 倒计时 */ </script>
<script> /* 浏览器自带了一个小型的数据库 浏览器自带的一个map集合，永久保存 */ // 向Storage中设置键值对 window.localStorage.setItem("name","lucy"); window.localStorage.setItem("age",25); // 从Storage中根据建获取值 console.log(localStorage.getItem("name")); // 从Storage中删除对应的键值对 // localStorage.removeItem("name"); // 清空Storage所有的键值对 localStorage.clear(); /* session：会话 会话？？？ 一问一答，说话 打电话， */ sessionStorage.setItem("name","jack"); </script>
<script> // 警告弹窗 // alert(1); // 带有确认和取消的弹窗 // 点击确定，返回true，点击取消，返回false // let flag = confirm("确认吗？"); // alert(flag); // 带有文本框的弹窗 // 文本框输入的内容就是返回值 // let name = prompt("请输入你的名字：","例如：张三"); // alert(name); // 这三个弹窗前端开发中基本不用！！！ /* 1、太丑了 2、不同的浏览器长的不一样 3、弹窗的位置无法修改 */ </script>
<body> <a href="demo02.html">倒计时</a> <button onclick="fun()">前进</button> <script> /* localStorage sessionStorage history：历史记录 */ function fun() { // history.forward(); // 退回 // history.back(); // 既可以前进，又可以后退 // 传入的参数为正，则前进 // 传入的参数为负，则后退 // 参数就是步数，走几步 history.go(2); } </script> </body>
<body> <button onclick="fun()">按钮</button> <input type="text"> <script> /* location */ function fun() { // 值是要跳转页面的路径 // 可以是相对路径，也可以是绝对路径，还可以是http地址 // location.href = "demo02.html"; // location.href = "http://www.baidu.com"; // 取值 // alert(location.href); // 刷新页面 location.reload(); } </script> </body>
<script> /* screen */ console.log(screen.width); console.log(screen.height); console.log(screen.availHeight); console.log(screen.availWidth); </script>
<script> /* navigator 获取一些浏览器的参数 */ console.log(navigator.platform); console.log(navigator.appVersion); console.log(navigator.appName); </script>
<body> <button onclick="fun()">关闭</button> <script> function fun() { // window.close(); // window.open("demo01.html"); window.print(); } </script> </body>
<script> /* 事件 */ //获取指定的元素 let div = document.querySelector("div"); /* 参数1：要添加的事件类型 参数2：添加的事件要触发的函数 传说中，这种添加方式有兼容性问题 */ //推荐使用 div.addEventListener("click",function(){ alert("click"); }) //操作元素的属性 div.onclick = function(){ alert("onclick"); } </script>
<script> let div = document.querySelector("div"); div.onclick = function(){ alert("onclick") } //删除事件的方式一 div.onclick = null;// false / "" //删除事件的方式二 let callback = function(){ console.log("callback"); } div.addEventListener("click",callback); //删除事件 div.removeEventListener("click",callback); </script>
<body> <form action="aaa" onsubmit="return fun()"> <input type="text" required> <input type="submit" value="提交"> </form> <script> /* onsubmit事件注意： 1、onsubmit是加在form表单上 2、onsubmit要有return 3、函数也要返回Boolean类型 */ function fun(){ return false; } </script> </body>
<style> ul { background-color: pink; } li { background-color: green; } </style> <body> <ul onclick="fun()"> <li>哈哈哈</li> </ul> <script> function fun() { alert("111"); } let li = document.querySelector("li"); li.addEventListener("click",function(event){ alert("222"); // 阻止事件冒泡 event.stopPropagation(); }) // 阻止事件冒泡 /* 1.在子元素的事件触发函数中阻止 2.借助event对象 3.调用一个方法 event对象必须通过addEventListener方式添加事件才可以使用 */ </script> </body>
<script> /* ES6语法 1、let const 2、模板字符串 3、箭头函数 4、Symbol 5、Promise函数，处理回调地狱 */ // let a = Symbol("hello"); // let b = Symbol("hello"); // console.log(a == b); setInterval(()=>{ },2000); // let callback = (a,b) => { // }; // setInterval(() => { // },2000); // let sql = ` // select * from student left join // teacher on st // sadf // s // sad // f // asd // false // `; </script>
浙公网安备 33010602011771号