WEB前端开发入门学习笔记_浏览器插件

1.无序列表<ul type="circle"> <li>橘子</li> <li>葡萄</li> <li>樱桃</li> </ul> <ul type="disc"> <li>橘子</li> <li>葡萄</li> <li>樱桃</li> </ul> <ul type="square"> <li style="color:red;">橘子</li> <li>葡萄</li> <li>樱桃</li> </ul>2.有序列表 <ol type="1"> <li>橘子</li> <li>葡萄</li> <li>樱桃</li> </ol> <ol type="a"> <li>橘子</li> <li>葡萄</li> <li>樱桃</li> </ol> <ol type="I"> <li>橘子</li> <li>葡萄</li> <li>樱桃</li> </ol>3.自定义列表 <dl> <dt>计算机学院</dt> <dd>软件工程</dd> <dd>网络工程</dd> <dd>计算机应用</dd> <dt>音乐系</dt> <dd>唱</dd> <dd>唱</dd> <dd>唱</dd> </dl>4.列表样式<style> ul{ /**设置列表样式**/ list-style-type:circle; /**设置列表样式为图像**/ list-style-image:url(images/arrow.png); /**设置列表样式位置 : 默认为 outside 外侧 / inside内侧*/ list-style-position:inside; /*简写:**/ list-style:none; }</style></head><body> <ul> <li>橘子</li> <li>葡萄</li> <li>樱桃</li> </ul></body>5.表格跨行跨列 <table border="1"> <tr> <td colspan="3">三年级五班学员语文成绩和数学成绩</td> </tr> <tr> <td rowspan="2">白杨</td> <td>语文</td> <td>86</td> </tr> <tr> <td>数学</td> <td>96</td> </tr> <tr> <td rowspan="2">杨晨</td> <td>语文</td> <td>59</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> </table>6.数据劫持 var man = { age: 8, state: '儿童', sex: '女', name: "张三" } // man.age = -2500; //这样设置无法对数据可靠性,安全性做出处理 ,很容易造成数据的混乱 //拦截处理 : get(在获取属性时会自动触发) / set (在设置属性时会自动触发) , 在这种拦截机制中做出需要拦截的操作 var hanlder = { set: function (target, key, value) { console.log('正在准备设置对象的属性...',target, key, value); if(key == "age"){ if(value>=0 && value<=120){ target.age = value; if(value>=0 && value<=12){ //实现在每次修改年龄的时候 ,根据修改年龄的数值决定对象属性state的状态 ,此处就与age属性实现了数据的绑定,而不需要在每次设置age属性的时候,都要去写一遍判断逻辑和操作state target.state="儿童" }else if(value>=13 && value <18){ target.state = "少年"; }else if(value>=19 && value <30){ target.state = "青年"; }else{ target.state = "老年人"; } }else{ throw new Error('年龄输入不合法!!'); } } }, get: function (target, key) { // console.log('此处应该是获取代理目标对象属性的拦截操作...',target,key); switch (key) { case "age": if (target.sex == '女') { return '女孩子的年龄一般不能问的!!'; } else { return target.age; } break; default: return target[key]; } // return '数据保密!'; } } //实例化一个proxy , 其实就是对外提供的一个操作代理对象(操作时修改的就是prxoy对象,但是它会将数据再修改到目标对象上) var proxy = new Proxy(man, hanlder); console.log('年龄为:', proxy.age); //此时会触发proxy中的get ,因为在获取age属性 proxy.age = 30;7.async数据异步操作 //async 函数 ,异步函数 : 目的就将异步操作变成同步操作的方式编写 /** 使用关键字 async 声明一个异步函数 , 在调用异步函数的之前使用await关键配合使用,来声明当前执行的异步需要等待 ,等await关键字中的函数执行完之后 ,才会执行后边的代码 */ async function timeout(time) { return new Promise((resolve, reject) => { setTimeout(() => { //模拟一个异步操作,比如说是一次ajax交互 resolve(123); }, time) }) } async function hello(title, time) { let s = null; await timeout(time).then((res) => { // console.log(res); s = res; }); console.log(title + s); } hello("教育改变生活!!!!", 5000);