第二阶段（Javascript）第一周知识梳理

让头发飞
187 阅读3分钟

第二阶段（Javascript）第一周知识梳理

javascript：是运行在javascript解释器的解释型弱类型脚本语言

js特点:

1.代码可以用任何文本编辑器写 2.解释型语言，无需编译 3.弱类型语言：不需要进行规定，变量的数据类型由值规定 4.面向对象语言：程序员眼里的所有东西都是对象

js作用

1.客户端数据的计算 2.表单的数据验证（如：手机号、身份证、邮箱） 3.提供了事件 4.网页中一切css做不了的特效都有js完成 5.和服务器端进行交互

输出方式

1.console.log(); 2.document.write(); 3.alert;(会卡主页面）

变量

变量语法 var 变量名=值 （值是可以改变的）（去变量名不能随意，尽量见名知意 不能以数字开头，不能以var为名字 如果创建了多个变量，中间用，隔开最后一个用；）

常量

const 常量名=值 （一但创建后不能修改）

算数运算符 + - / * %（取余，取除不尽的余数）

%作用：判断奇偶性 num%2==0（偶数）num%2==1（奇数）

数据的类型

1.原始/基本/值类型： （1）string:字符串（取值有无数个，必须写“”） （2）number：数字 （直接写数字） （3）boolean:布尔（true false） （4）undefined （5）null：空 作用：释放变量 节约内存（变量名=null）

数据类型的转换
隐式转化

1.+运算 拼接作用 2.-*/%：是字符串也可转为一个数字，但是必须是纯数字组成的字符串，只要包含非数字字符 则NAN 3.转为数字结果：true--1 flase--0 null--0 undefined--NaN(NaN不是数字，但是是数字类型，不是有效范围里的数字）（NaN参与任何比较运算结果都是flase） 4.NaN:!isNaN(xxx)判断某某是不是一个有效数字（true false）（可以防止恶意输入，用户必须输入一个有效数字）

显示/强制转换

1.转为字符串：var str=xx.tostring();(xx不能是undefined) 2.转数字：var num=parseInt(str/num);整数 （从左至右依次读每个字符，碰到非数字的字符就会停止，无法读取小数点，否则就为NAN） 3.var num=parseIntFloat(str) 可以读取小数点 4.Number（xxx）

函数

创建函数 function 函数名（）{若干代码段} 调用函数 1.直接在js里写函数名 写几次调用几次 2.绑定在页面的元素上，让用户自己触发，用户触发几次就执行几次 <elem onclick="函数名"()>

形参 实参

1.形参（也是一个变量名，不过可以不用var，并不保存真正的值） 语法 fuction 函数名（形参）{函数体} 2.实参（这个变量名所保存的值）语法：函数名（实参（值））

分支结构

顺序结构：默认结构 代码从上至下 分支结构：根据条件的不同，选择一条路执行

if(条件){操作}

if(条件){操作}else{默认操作}

if(条件){操作}else if(条件){操作}else{默认操作}
    
比较运算符：> < >= <= == !=(比较判断条件中体现 结果必定为true/false）

逻辑运算符：&&(只有全部条件满足，最后结果才为true，有一个不满足则为flase)
    || (只有全部条件都不满足，结果才为flase,有一个满足则为true）
    ! （！true==flase）

循环：反复执行相同或者相似的操作 三要素：1.开始 结束 重复的次数 2.循环操作的事情 3.循环变量：创建，并且变量要不断的改变（自增自减）往往向着不满足循环条件再变化 循环结构：根据条件满不满足，如果满足就会一直做操作，直到条件不满足才会停止 1、var 循环变量=几; while(循环条件){ 循环体； 循环变量变化（i++;）

   }
       循环是一次次执行的，速度很快，循环没结束之前会卡住后续代码
       
       2、死循环：
   while(true){}  循环流程控制语句：退出循环：break;
       随机整数公式：parseInt(Math.random()*(max-min+1)+min)
       
    3.for循环
    语法：for(var 循环变量=几；循环条件；变量的变化）{循环体}
    for（i=0;i<arr.length;i++）
    for死循环
    for（；；）{ }  退出循环：break; 
    循环总结：
    1.while循环：一般用于循环次数不明确的情况，死循环
    2.for循环：一般用于循环次数明确的情况

数组

1.数组中的元素：按线性排列（一个变量可以保存多个数据，以后也可以拿出来使用） 2.特点：（1）除第一个元素，每个元素都有一个前驱元素 （2）除最后一个元素，每个元素都有一个后继元素 （3）数组中每一个元素都有唯一一个位置序号，称为下标，用来表示数组中的位置，是从0开始，到最大长度-1结束 3.创建数组 （1）直接量方式：var arr[]; (2)构造方式 var arr=new array（）； （3）获取访问数组中的元素 数组名【下标】 （4）添加/修改数组中的元素 数组名【下标】=“新元素”
4.特殊：（1）下标处没有人则为添加 （2）下标处有人则为修改 （3）如果下标越界，会导致数组为一个稀疏数组

数组的唯一一个属性：length

语法：数组名.length

三个固定套路

1.想末尾添加元素：arr【arr.length】="新元素" 2.获取倒数第N个元素：arr[arr.length-n] 3.缩容：删除数组的倒数n个：arr.length-=n

遍历数组

就是把数组中每一个元素取出来执行相同或相似的操作 `for(var i=0;i<数组名.length;i++){数组名[i](寻找到当前的元素）

`

DOM树

1.树根：是一个document对象，不需要程序员自己创建，一个页面只有一个document 2.作用：提供一些属性和方法，可以让我们去操作整个dom树（增 删 改 减） 3.DOM节点：一个标签/节点/属性/元素

查找元素

通过html的特点查找

1.id查找：var elem=document.getElementByid("id值") 2.标签查找：var elem=document.getElementsByTagName("标签名") 3.class查找：var elem=document.getElementsByClassName("标签名")

通过节点之间的关系查找：
	父：elem.parentNode;（单个元素）
	子：elem.children; 集合，没找到为空集合
	第一个元素儿子：elem.firstElementChild;
	最后一个元素儿子：elem.lastElementChild;
	前一个元素兄弟：elem.previousElementSibling;
	后一个元素兄弟：elem.nextElementSibling;
总结 1.一切的获取都是为了判断
        2.一切的设置都是为了修改
        3. 单个元素可以直接做操作，但是集合不行（要么加下标拿到某一个，要么遍历拿到每一个）
操作元素

<标签名 属性名=“属性值” style="样式">内容</标签名>

一、内容

1.innerHTML(获取或设置某个元素的内容，可以识别标签） 获取内容：elem=innerHTML 设置内容：elem.innerHTML="新内容" 2.innerText 获取内容：elem=innerText 设置内容：elem.innerText="新内容" 3.value(专门为单标签（input）操作内容准备 获取内容：input.value 设置内容：input.value="新内容"

二、属性

获取属性值:elem.getAttribute("属性名") 设置属性值：elem.setAttribute(属性名")

三、样式

1.常用内联样式（优先级最高） 2.语法： 获取：elem.style.css属性名 设置：elem.style.css属性名="css属性值" 特殊：1.css属性名，要把横线的地方换成小驼峰命名 2.获取时只获取内部样式，不能获取样表中的样式

元素绑定事件

1.单个元素 elem.onclick=function(){操作 this（这个元素）} 2.多个元素 for（i=0；i<elem.length;i++）{ elem[i].onclick=function(){操作 this(当前触发的元素）}}

avatar
文章
阅读
粉丝