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小知识点的更多相关文章

  1. JS小知识点----基本包装类型和引用类型

    var s1 = "some text"; s1.color = "red"; alert(s1.color);  //弹出 underfined var s1 ...

  2. 日常css和js小知识点记录

    2015-6-29 1.<meta name="viewport" content="width=device-width,user-scalable=no&quo ...

  3. 一些js小知识点整理

    string.substring(a,b)   从a点开始截取,到b点结束 string.substr(a,b)    从a点开始截取,截取b个 BOM的四个对象,navigator.screen.l ...

  4. js中关于value的一个小知识点(value既是属性也是变量)

    今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...

  5. 【转】HTML5的小知识点小集合

    html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...

  6. html5的小知识点小集合

      html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...

  7. JS重要知识点

    这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原 ...

  8. 一些js小题(一)

    一些js小题,掌握这些对于一些常见的面试.笔试题应该很有帮助: var a=10; function aa(){ alert(a); } function bb(){ aa(); } bb();//1 ...

  9. JS重要知识点(转载 学习中。。。)

    这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原 ...

随机推荐

  1. linux中mv命令使用详解

    mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 1.命令格式: mv [选项] 源文件或目 ...

  2. 【Keras】基于SegNet和U-Net的遥感图像语义分割

    上两个月参加了个比赛,做的是对遥感高清图像做语义分割,美其名曰"天空之眼".这两周数据挖掘课期末project我们组选的课题也是遥感图像的语义分割,所以刚好又把前段时间做的成果重新 ...

  3. dedesms中的导致生成静态页面多出空白行解决办法

    前几天给朋友用织梦仿一个手机网站,保存处理好的代码,页面头部在浏览里莫名其妙多了一段空白区域,用调试工具查看,发现是代码里多了一行&#65279.后来发现很多网友在生成织梦页面的时候,头部 ...

  4. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  5. 单独编译IMX6Q的VPU示例程序:mxc_vpu_test.out

    mxc_vpu_test.out是飞思卡尔为IMX6Q编写的VPU示例程序,有编解码和简单的网络传输功能. 首先从/opt/freescale/pkgs/中提取出imx-test-3.0.35-4.1 ...

  6. 【编程技巧】java不使用第三个变量处理两个变量的交换

    public class SwapNum {public static void main(String[] args) {doSwapNum();}public static void doSwap ...

  7. hibernate.dialect是干嘛用的?

    dialect[ˈdaɪəlekt]就是“方言”,因为hibernate是要把Java对象转换成关系数据库来描述的,而关系数据库虽然有一些统一的标准,如SQL-92等,但是实际上各数据库如Oracle ...

  8. angular 选中切换面板

    此方法采用的是没有路由的方式: html5 代码: <div [hidden]="flag"> <li class="music-list-datail ...

  9. 关于富文本在Android中的应用以及遇到的坑

    富文本可以为用户提供更加多样化的文本展示形式,但由于其使用了H5标签的特殊性,一般都需要第三方框架的支持.这里推荐一款合适的第三方富文本框架,richeditor. 首先我们要使用该功能需要引入相关j ...

  10. css超出内容以省略号显示

    控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-or ...