js小知识点
1、setTimeout(function(num){
alert(num);},1000,123);
第三个参数为实参。
2、拼接字符串:
document.body.innerHTML = '<div>div</div>'+
'<span>span</span>'+
'<p>p</p>'
换行的另一种做法:
document.body.innerHTML = '<div>div</div>\
'<span>span</span>\
<p>p</p>'
加上反斜杠
3、console.log()添加样式
eg:
var a = 'hello';
console.log('%c'+a,'font-size:40px;background:blue;')
4、双层for 循环跳出:
a : for(var i=0;i<5;i++){
for(var j=0;j<1;j++){
if(i==3){
break a;
}
alert(i);}
}
即可跳出第一层循环。
5、for循环省略参数
var i = 0;
for(;;){
alert(i);
if(++i>=5){
break;
}
}
6、立即执行函数写法
除了写成(function(){})()这种样式
还可以写成~function(){}()
或者写成 !function(){}()
7、document.querySelectorAll('div')
document.querySelector('div')
两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法。
element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');
其中参数selectors 可以包含多个CSS选择器,用逗号隔开。
element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');
使用这两个方法无法查找带伪类状态的元素,比如querySelector(':hover')不会得到预期结果。
querySelector
该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素。
element = document.querySelector('div#container');//返回id为container的首个div
element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
querySelectorAll
该方法返回所有满足条件的元素,结果是个nodeList集合。查找规则与前面所述一样。
elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div
8、array两个方法
array.forEach(function(currentValue, index, arr), thisValue)
function(currentValue,index,arr)---->必须参数,数组中每个元素调用的函数。
currentValue 必需。当前元素
index 可选。当前元素的索引值。
arr 可选。当前元素所属的数组对象。
thisValue 可选。传递给函数的值一般用 "this" 值。如果这个参数为空,“undefined”会传递给"this"值
Array.from方法可以将 Set 结构转为数组。
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
-------------------------------------------------------------
ES6的set
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
const s = new Set();
[2,3,5,4,5,2,2].forEach(x => s.add(x));
for(let i of s){
console.log('%c'+i,'font-size:400%;background:blue');
}
//set结构不会添加重复的值
// 例一
const set = new Set([1, 2, 3, 4, 4]);
alert([...set]);
// [1, 2, 3, 4]
// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
alert(items.size) // 5
// 例三
// function divs () {
// return [...document.querySelectorAll('div')];
// }
//document.querySelectorAll('div')选取所有的div元素
// const set = new Set(divs());
// set.size // 56
// 类似于
// divs().forEach(div => set.add(div));
// set.size // 56
//数组去重 [...new Set(array)]
//向 Set 加入值的时候,不会发生类型转换,所以5和"5"是两个不同的值。Set 内部判断两个值是否不同,使用的算法叫做“Same-value equality”,它类似于精确相等运算符(===),主要的区别是NaN等于自身,而精确相等运算符认为NaN不等于自身。
console.log(NaN===NaN); //false
// 两个对象总是不相等的。
// let set = new Set();
// set.add({});
// set.size // 1
// set.add({});
// set.size // 2
// 上面代码表示,由于两个空对象不相等,所以它们被视为两个值。
// Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。
// add(value):添加某个值,返回 Set 结构本身。
// delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
// has(value):返回一个布尔值,表示该值是否为Set的成员。
// clear():清除所有成员,没有返回值。
</script>
</body>
</html>
js小知识点的更多相关文章
- JS小知识点----基本包装类型和引用类型
var s1 = "some text"; s1.color = "red"; alert(s1.color); //弹出 underfined var s1 ...
- 日常css和js小知识点记录
2015-6-29 1.<meta name="viewport" content="width=device-width,user-scalable=no&quo ...
- 一些js小知识点整理
string.substring(a,b) 从a点开始截取,到b点结束 string.substr(a,b) 从a点开始截取,截取b个 BOM的四个对象,navigator.screen.l ...
- js中关于value的一个小知识点(value既是属性也是变量)
今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...
- 【转】HTML5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...
- html5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...
- JS重要知识点
这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原 ...
- 一些js小题(一)
一些js小题,掌握这些对于一些常见的面试.笔试题应该很有帮助: var a=10; function aa(){ alert(a); } function bb(){ aa(); } bb();//1 ...
- JS重要知识点(转载 学习中。。。)
这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原 ...
随机推荐
- flume1.8 基础架构介绍(一)
1. 系统要求 1. Java运行环境 -- Java 1.8及以上 2. 内存 -- 足够的内存供配置的sources,channels 或者sinks使用 3. 硬盘空间 -- 足够的硬盘空间供配 ...
- 在vue-cli项目中使用echarts
这个示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --regist ...
- C#面试题整理(1)
最近在看CLR VIA C#,发现了一些案例很适合来做面试题.特此整理: 1,System.Object里的GetType方法是否为虚函数?说出理由. 答案:不是,因为C#是一种类型安全的语言,如果覆 ...
- VMWare 安装ubuntu,虚机设置静态IP接入公网
本文提供的kafka安装配置为Linux(ubuntu-16.04.3) 1.首先安装VMarea(14.0.0 build-6661328) 2.到http://www.ubuntu.org.cn/ ...
- [国嵌攻略][091][TCP网络程序设计]
server.c #include <sys/socket.h> #include <netinet/in.h> #include <strings.h> #inc ...
- Spring MVC 学习总结(一)——MVC概要与环境配置 转载自【张果】博客
Spring MVC 学习总结(一)--MVC概要与环境配置 目录 一.MVC概要 二.Spring MVC介绍 三.第一个Spring MVC 项目:Hello World 3.1.通过Mave ...
- 启动tomcat时,一直卡在Deploying web application directory这块的解决方案
本来今天正常往服务器上扔一个tomcat 部署一个项目的, 最后再启动tomcat 的时候 发现项目一直都访问不了,看了一下日志: [root@iz8vbdzx7y7owm488t4d89z bin] ...
- RPC架构简单理解
RPC(Remote Promote Call) 一种进程间通信方式.允许像调用本地服务一样调用远程服务. RPC框架的主要目标就是让远程服务调用更简单.透明.RPC框架负责屏蔽底层的传输方式(TCP ...
- requireJs 踩的坑
<!-- RequireJS --> <script src="assets/js/require.min.js" data-main="assets/ ...
- MySQL zip解压版安装过程及问题
1.首先解压mysql压缩包,然后添加环境变量path(D:\mysql-5.7.11\bin) 2.修改D:\mysql-5.7.11\my-default.ini 文件的配置项 ...