智能社JS学习笔记（一）

最新推荐文章于 2018-06-14 20:59:29 发布

mirror29

最新推荐文章于 2018-06-14 20:59:29 发布

阅读量1.1k

点赞数

分类专栏： Javasript 文章标签：智能社

本文链接：https://blog.csdn.net/mirror29/article/details/80376180

版权

Javasript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言

转眼工作即将半年，这段时间自学了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判断格式

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

• 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；索引值的使用：需要知道‘第几个’的时候

mirror29

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
智能社JS学习笔记（一）

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

扫一扫