乐趣区

关于JS的一些小笔记

1, 反引号可以转行输出

${var_name}串联字符

var name = '小明';
var age = 20;
var message = ` 你好, ${name}, 你今年 ${age}岁了!`;
console.log(message)

2, 关于 Map 和 Set

Map 方法用 set(此时为方法)接收的值为 key-value 类型,两个参数后的实参会被自动忽略

Set 为构造函数
最大的特点为自动过滤重复的 key 值

Set 是一组 key 值,但是不储存 value 值

数组与对象可用 for…in… 得到对应的 key-value 值。但是对于 Map 和 Set 则不行

数组、Map 和 Set 都属于 iterable(可迭代类型,不包含对象),均使用 for…of… 来获取 key-value 值

3,减少对全局变量的污染以及对自己代码所用变量纯洁性的维护,可以使用名字变量

4,闭包
闭包即函数作为返回(return)且返回的函数中有包含不属于它函数域内的局部变量(继承的,可访问的不是自己函数内定义的变量)
使用闭包需注意:不要引用任何循环变量,或者后续会发生变化的变量。
参见 for 循环导致 for 循环内参数值永远只能访问到最大适合 for 循环条件的值

如果一定要调用循环变量,可以加一层函数,用函数变量去过滤循环变量。或者直接使用 ES6 的 let 来定义循环变量。

5,关于原生 js 的 querySelector()以及 querySelectorAll()
document.querySelector(“.classname”)
document.querySelector(“#elementid”)
十分类似于 jQuery

6,form 表单提交时,如果 form 元素没有 name 属性,则该元素不会被提交。
同时,禁用状态的元素也不会被提交

7,input 文件类型(file)上传文件时可以验证文件类型,以便于文件附件上传

8,原生 js 获取某个元素,并把该元素放置到另外一个元素 HTML 内的时候,appendChild(apphtml)中的参数只能是一个元素结点(一个包裹层),否则会提示插入的元素不是 node 结点类型,导致插入失败。

9,滚动获取滚动到顶部的距离

window.onscroll = function(){ 
    var t = document.documentElement.scrollTop || document.body.scrollTop;  
    console.log(t) 
} 

十分重要的一个注:scrollTop 获取值的兼容性要务必重视,不要因为 document.body.scrollTop 写起来简单些就直接用,可能你用它获取到的值永远都是 0。

document.documentElemnent.scrollTop 可以直接从浏览器里面获取到滚动到顶部的值。

10,jQuery 的一些动画效果。

除了我们常见的.toggle(time);.slideToggle(time);.fadeToggle(time);
还有.animate({css},time,function)
三个参数依次为:需要改变的 css 效果;完成这些效果需要的时间;动画完成后调用的函数。

除此之外还能用.delay()串联动画

11,涉及到异步代码,无法在调用时捕获,原因就是在捕获的当时,回调函数并未执行。

退出移动版