智能社JS学习笔记（一）

前言

转眼工作即将半年，这段时间自学了UI，html和css方面能比较熟练的掌握了，写过两套小程序的模板但只知其然不知其所以然（还是因为自己js基础知识掌握的不够啊）用bootstrap之类的框架能写一些常见的JS效果，但自己基本没怎么动手写过JS。感觉前面的基础基本已经稳固，所以给自己制定了近期的学习计划，向我目标中的全栈进阶哈哈，昨天刚学习完了less，算是有了一点当初学习js的感觉。

打算近期看完智能社Blue老师的经典JS教程（很惭愧当初看了一半就丢下了，现在准备重新学起） ——> 啃完《js高级程序设计》（买了很久一直停在第三章...） ——> 学习ES6/7语法 ——> 学习node.js(包括一些基础的HTTP知识) ——> 购买慕课上的vue实战教程（包括小程序的开发，node的KOA2，webpack等感觉比较全面）。等这段时间学习完毕再制定新的计划，这里记录一下知识点以及平常遇到的问题方便梳理。

初探（一）

• 事件

指用户的操作（如onclik，onmouseout，onmouseover等）

例如：

<input type="checkbox" οnmοuseοver="alert('a');">

• 符号. 类似汉字“的”

（'div1'设为class时，两种方法均无法找到元素，故不采用）

例如

 <input type="checkbox" οnmοuseοver="div1.style.display='block';" οnmοuseοut="div1.style.display='none';" /><div id="div1" style="height: 200px;width: 200px;background: #ccc;display: none;"></div>

注：低版本的火狐及chrom不支持这种写法，应写为

<input type="checkbox" οnmοuseοver="document.getElementById('div1').style.display='block';" οnmοuseοut="document.getElementById('div1').style.display='none';" /><div id="div1" style="height: 200px;width: 200px;background: #ccc;display: none;"></div>

• 变量

简单理解为给某元素起个别名

如：

var oDiv = document.getElementById('div1')；

• 函数基本格式

    function 函数名（）{                                          //定义代码}函数名（）                                                //调用

• 函数定义：告诉系统有这个函数，不会实际执行

• 函数调用：真正执行函数里的代码 //两个缺一不可

• 换肤功能：通过js修改link的href属性，可知任何元素都可以添加ID，包括link，html等标签

• if判断格式

if (条件){语句1}else{语句2}

• = 为赋值（改变）； ==为判断；

• a标签可以加js （但不建议）

如

<a href="javascript:alert('a');"></a>

初探（二）

• 函数传参

函数定义时，参数相当于占位符，具体数值由调用时传入，参数可为多个。

(使用场景：当函数里有定不下的东西的时候)

  function show(a,b){                         //a，b为参数alert(a+b);}show(5,12);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>function setStyle(name,value){var oDiv = document.getElementById('div1');oDiv.style[name] = value;}</script>
</head><body><input type="button" value="变宽" οnclick="setStyle('width','400px')"><input type="button" value="变高" οnclick="setStyle('height','400px')"><input type="button" value="变色" οnclick="setStyle('background-color','red')"><div id="div1" style="height: 200px; width: 200px; background-color: #ccc;"></div>
</body>
</html>

[ ]符号相当于 . 符号，不过可以更改 [ ] 中的值，一般用于要修改的属性不固定的时候。

• 字面量（常量），即看到就可知这是什么，如字符串‘abc’，在写的时候需加引号。

变量：即可更改的量，如var a = ? ，a即为变量，内容不固定，在写的时候不需加引号。

• xx.style.属性 = xx 修改的是行间样式，之后再修改className不会有任何效果，勿混用。

• window.onload 意义在于在页面加载完成之后再执行js。

getElementsByTagName 用于获取一组元素

innerHTML 里面可写入html标签

• 一个循环包括的元素

   var i = 0;             //1.初始化while(i<5){            //2.条件alert(i);          //3.语句i = i ++;          //4.自增}for(初始化；条件；自增){         //for 循环语句}

• this 当前发生事件的元素

• 自定义属性：只能加在 js 里

• + 可做字符串拼接，如需进行运算需加括号

• 布尔值：true , flase；索引值的使用：需要知道‘第几个’的时候