JS基础与事件详解-优快云博客

前言

开始学习js已经有3个月头，基本框架angular和vue以及一些常用库jquery和常用的一些方法也都用过，但还是深感自己js基础不足，所以重新温习js，从头开始打基础。
所以本系列文非原创，都为别的地方学习后转载过来方便日后查看。
学习进程 JS基础-ES6/7-三大框架-http（node.js)

初学

事件

用户的操作（触发）（分鼠标事件，键盘事件，还有触摸事件）
例如：

<input type="checkbox" onmouseover="alert('a');">

符号 “ . ” .就是的意思， div.pro 就是 div的pro。不多做讨论。
比如：

<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="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判断格式

= 为赋值（改变）；
==为判断；
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="变宽" onclick="setStyle('width','400px')">
    <input type="button" value="变高" onclick="setStyle('height','400px')">
    <input type="button" value="变色" onclick="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 用于获取一组元素

一个循环包括的元素

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

this 当前发生事件的元素
自定义属性：只能加在 js 里

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