2023年7月26日

JavaScript: js遍历对象的几种方法和区别

for in for in 循环是最基础的遍历对象的方式,它还会得到对象原型链上的属性 // 创建一个对象并指定其原型,bar 为原型上的属性 const obj = Object.create({ bar: 'bar' }) // foo 为对象自身的属性 obj.foo = 'foo' for (let key in obj) { console.log(obj[key]) // foo, bar } 可以看到对象原型上的属性也被循环出来了 在这种情况下可以使用对象的 hasOwnProperty() 方法过滤掉原型链上的属性 for (let key in obj) { if (obj.hasOwnProperty(key)) { console.log(obj[key]) // foo } } 这时候原型上的 bar 属性就被过滤掉了 Object.keys Object.keys() 是 ES5 新增的一个对象方…
2023年7月25日

JavaScript: js选择器

1. 在html5之前,JavaScript中的选择器只有下面四种: .getElementById("id")id选择器; .getElementsByName("name")name选择器; .getElementsByTagName("tagname")tag标签名选择器; .getElementsByClassName(".classname").class名选择器 各个选择器返回值类型 .getElementById("id")id选择器-----node单节点型(第一个id【具有唯一性】相同元素) .getElementsByName("name")name选择器----nodelist类数组型 .getElementsByTagName("tagname")tag标签名选择器----nodelist类数组型 .get…
2023年7月25日

JavaScript: js中使用 reset 重置表单

1. 使用reset按钮 reset 类型的input元素显示为按钮,默认 click 事件处理程序将表单所有输入重置为其初始值。 这个输入元素只支持两个属性:类型和值。值是可选属性。 要确保的一件重要事情是:reset按钮在form元素内;否则,它将无效。 <form id="form" action=""> <input type="text" value="1"/> <input type="reset" value="重置"/> </form> 2. 使用HTMLFormElement.reset()方法 JavaScript 还提供了一个内置的 HTMLFormElement.reset() 方法来重置整个表单。 可以通过其 ID 选择表单元素并使用 reset() 重置它。 <form id="form"…
2023年7月25日

JavaScript: js清除浏览器缓存的几种方法

1、meta方法,在head标签里添加代码 <!-- 指定Expires值为一个早已过去的时间,访问时若重复在地址栏按回车,每次都会重复访问 --> <meta http-equiv="Expires" content="0"> <!-- 禁止浏览器从本地计算机的缓存中访问页面内容。(这样设定,访问者将无法脱机浏览。) --> <meta http-equiv="Pragma" content="no-cache"> <!-- Cache-control值为no-cache时,访问此页面不会在Internet临时文件夹留下页面备份 --> <meta http-equiv="Cache-control" content="no-cache"> <meta http-equi…
2023年7月24日

JavaScript: js取整方法

//向下取整 Math.floor(5.20) //5 //向上取整 Math.ceil(5.20) //6 //去掉小数部分 parseInt(5.20) //5 //四舍五入 Math.round(5.20) //5 Math.round(5.66) //6 //绝对值 Math.abs(-1) //1 //返回两数之间较大者 Math.max(2,5) //5 //返回两数之间较小者 Math.min(2,5); //2 //随机生成数 Math.random(); 一、四舍五入 let num1=13.454; let num2=13.545; console.log(Math.round(num1));//13 console.log(Math.round(num2));//14 console.log(num1.toFixed(0));//返回字符串13 cons…
2023年7月22日

JavaScript: js获取单选框radio的几种方法

HTML如下 <form id="form1"> <table border="0"> <tr> <td>年龄段:</td> <td> <input type="radio" name="age" value="18" />小于18岁 <input type="radio" name="age" value="18-40" checked="checked" />18-40岁 <input type="radio" name="age" value="40" />40以上 </td> </tr> <tr> <td>分数:</td> <td> <input type="radio" name…
2023年7月22日

JavaScript: 将一个 <label> 和一个 <input> 元素相关联

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label <label> <div class="preference"> <label for="cheese">Do you like cheese?</label> <input type="checkbox" name="cheese" id="cheese"> </div> <div class="preference"> <label for="peas">Do you like peas?</label> <input type="checkbox" name="peas" id="peas"> </div…
2023年7月22日

JavaScript: 原生js及jQuery获取select下拉框的selected的option项

select标签 <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:JavaScript原生方法 1:拿到select对象: var myselect=document.getElementById("test"); 2:拿到选中项的索引: var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index 3:拿到选中项options的value: myselect.options[index].value; 4:拿到选中项options的text: myse…
2023年7月21日

JavaScript: ECMAScript 6 / ES6 声明变量的关键字 let

ES6中新增了用于声明变量的关键字 let let声明的变量只在所处于的块级有效 if (true) { let a = 10; } console.log(a) // a is not defined **注意:**使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。 不存在变量提升 console.log(a); // a is not defined let a = 20; 暂时性死区 利用let声明的变量会绑定在这个块级作用域,不会受外界的影响 var tmp = 123; if (true) { tmp = 'abc'; let tmp; } 经典面试题 var arr = []; for (var i = 0; i < 2; i++) { arr[i] = function () { console.log(i); } } arr[0](); arr[1](); **经典面试题图解:**此题的关…
2023年7月21日

JavaScript: js继承的6种方式以及它们的优缺点

写在前面 本文讲解JavaScript各种继承方式和优缺点。 但是注意: 这篇文章更像是笔记,哎,再让我感叹一句:《JavaScript高级程序设计》写得真是太好了! 1、原型链继承 function Parent() { this.name = 'kevin'; } Parent.prototype.getName = function () { console.log(this.name); } function Child() { } Child.prototype = new Parent(); var child1 = new Child(); child1.getName() // kevin 问题: 1)、引用类型的属性被所有实例共享,举个例子: function Parent() { this.names = ['kevin', 'daisy']; } function Child()…