js基础学习

雍机智
168 阅读6分钟

js概念

js：JavaScirp 运行在js解释器的解释性弱类型面向对象脚本语言

特点

  1. 代码可以用任何编辑器编写
  2. 解释型：不需要检查对错，直接运行，碰到错误会停止
  3. 弱类型语言：由数据决定数据类型 强类型语言：由数据类型决定要保存的数据
  4. 面向对象语言

使用

放置在html最后（js比较耗时，后续会使用js操作html）

  1. 外部引入.js文件
  2. 内部使用

js使用

注释

//

输出

1. console.log()

2. document.write()

3. alert()

变量

语法：var 变量名=值；

作用：

  1. 经常使用的数据，提前保存
  2. 数据可以被修改

注意：

  1. 变量名设置：不能以数字开头，不能使用关键字，尽量见名知意
  2. 创建后可以不进行赋值，默认undefinede
  3. 创建多个变量时，可以省略中间的var，将分号变更为逗号
  4. 可以省略关键字var，但是会导致全局污染
  5. = 赋值

常量

语法：const 常量名=值；

注意：常量一旦创建，不可以被修改

数据类型

原始/基本/值类型

Number 数字，取值：无数个

String 字符串，取值：无数个

Boolean 布尔值，取值：2个-true,false

Undefined 变量的默认值，取值：undefined

Null 空，取值：null

引用/对象类型

算数运算符

+ - * / %

数据类型转换

隐式转换

算式运算符具有隐式转换

1.+运算：碰上字符串的时候，会变为拼接操作

2.- * / % 纯数字字符串会转为数字进行计算

3.true->1 flase->0 undefined->NaN null->0 "100"->100 "100px"->NaN

4.NaN:Not A Number 不是一个数字，但是是Number类型

NaN参与任何算术运算，结果都为NaN；NaN参与任何比较/关系运算，结果都为false

解决：!isNaN()   判断是不是有效数字

作用：检测用户输入的是否是一个有效数字

结果：true -> 有效数字 false -> NaN

显示/强制转换

转字符串 xx.toString();  不支持undefined/null

转整数 parseInt(str/num); 从左到右依次读取至非数字字符

转小数 parseFloat(str); 

万能用法 Number(); 相当于隐式转换

函数

概念

函数Function是一段被预定义好的，可以反复使用的代码。是一个独立的功能体，可以放入若干代码

语法

function name(){

    函数体
    
}//创建

name(); //调用：可以绑定在页面元素上，由用户触发

可以放在函数之中的内容：

1.不希望打开页面立即执行，等用户触发

2.不希望只执行一次，可以反复触发

3.本身就是一个独立的功能体

含参的函数

function name(形参,....){//形参：形式参数，一个不需要var的变量

    函数体

}//创建

name(实参,...);//调用

注意：

1.传入的实参顺序要和形参顺序对应

2.函数不一定必须由参数：若操作固定，则不需要传递参数；若根据传入参数不同，做的操作也略微不同，则需要添加参数

结构

程序的结构

顺序结构：默认结构，从上到下依次执行

分支结构：根据判断条件，选择一部分代码去执行

循环结构：根据判断条件，选择是否重复执行一段代码

运算符

比较/关系运算符

<      >     >=      <=       ==      !=         

常用于循环、分支的判断条件

结果：ture / false

逻辑运算符

&& 与/并且

只有全部条件为ture，最后结果才为true

只要有任一条件为false，最后结果则为false

|| 或

只有全部条件为false，最后结果才为false

只要有任一条件为true，最后结果都为ture

! 非

!true -> false

!false -> true

分支

if结构

一个条件一件事，满足就做，不满足就不做

if(判断条件){

    操作

}

一个条件两件事，满足完成第一件，不满足完成第二件

if(判断条件){

	操作1

}else{

	操作2

}

多个条件多件事，满足哪个就完成哪个

if(条件1){

	操作1

}else if(条件2){

	操作2

}else if(条件3){

	操作3

}else{

	默认操作

}

注意：

1.else结构可以不写，但若前面所有条件分支都不满足，则所有分支无效

2.条件有顺序性，因为分支只会走一条路

循环

反复执行相同或相似的操作

循环的三要素：循环条件 循环体(循环的操作) 循环变量

while

var 循环变量=几;

while(循环条件){

	循环体；

	循环变量的变化；

}

执行原理：先判断循环条件，若条件为真，则执行【一次】循环体；然后继续判断，若条件仍为真，则再执行【一次】循环体；直至判断条件为假则结束

注意：循环是一次一次执行的

for


for(var 循环变量=几;循环条件;变量的变化){

	循环体；

}

注意：一次可创建多个循环变量

死循环

while(true){循环体；}

for(;;){循环体；}

break 循环退出语句

数组

概念

  1. 多个元素/数据组成的一个集合，保存在一个变量中

  2. 数组中的元素都是按照线性顺序来排列的：除第一个元素，每个元素都有唯一的前驱元素；除最后一个元素，每个元素都有唯一的后继元素

  3. 数组中的每个元素都有唯一的位置序号，称下标。用来表示数组中的每个元素 下标从0开始，到最大长度-1

创建数组

直接量方式

var arr=[];//空数组

var arr=[数据1,数据2,...];

构造函数方式

var arr=new Array();//空数组

var arr=new Array(数据1,数据2,....);

访问数组

获取数据

语法：数组名[下标];

注意：若下标越界，则会获取一个undefined

添加数据

语法：数组名[下标]=新数据;

注意：

1.若下标处已有数据，则为替换操作

2.若下标越界，会让数组变为稀疏数组，中间会产生很多undefined，且下标不再连续

数组属性：数组对象

数组名.length 获取到数组的最大长度

向末尾添加元素：arr[arr.length]=新值

获取倒数第n个元素：arr[arr.length-n]

删除末尾的n个元素：arr.length-=n

遍历数组

将数组中的每个元素都提取出来进行相同或者相似的操作

for(var i=0;i<arr.length;i++){

	arr[i]
        
}

js组成

JavaScript=ECMAScript+DOM+BOM

ECMAScript 核心语法

DOM：Document Object Model（文档对象模型） 操作文档

BOM：Browser Object Model（浏览器对象模型） 操作浏览器

DOM

DOM树

把HTML看作是倒挂的树状结构，树根为document

1.document对象由js解释器自动创建

2.DOM会把页面上所有元素看作是DOM对象/节点/元素

获取元素

通过HTML属性获取

ID

语法：var elem=document.getElementById("id");

返回：一个DOM对象

注意：

1.若id重复，只能返回第一个

2.若未找到，返回null

标签名

语法：var elems=document.getElementByTagName("标签名");

返回：一个DOM集合（类数组对象）

注意：

1.返回的是集合，不能直接操作，除非添加下标得到某一个，或遍历数组得到所有元素

2.若未找到，返回空集合

3.可以从document找到页面上所有标签，也可从parent找到parent下面的标签

class

语法：var elems=document.getElementByClassName("class");

返回：一个DOM集合（类数组对象）

注意：同标签名方式

通过节点之间的关系获取元素

前提：至少找到一个元素，才能找关系

父元素 xx.parentNode（单个元素）

子元素 xx.children（集合）

第一个子元素 xx.firstElementChild（单个元素）

最后一个子元素 xx.lastElementChild（单个元素）

前一个兄弟元素 xx.previousElementSibling（单个元素）

后一个兄弟元素 xx.nextElementSibling（单个元素）

操作元素

<elem 属性名="属性值" style="样式">内容< /elem>

内容

1. innerHTML 操作双标签，能识别标签

    获取：elem.innerHTML;

    设置：elem.innerHTML="新内容";

2. innerText 操作双标签，不能识别标签

    获取：elem.innerText;

    设置：elem.innerText="新内容";

3. value 操作input

    获取：input.value;

    设置：input.value="新内容";

属性

获取：elem.getAttribute("属性名");

设置：elem.getAttribute("属性名","属性值");

简化版

获取：elem.属性名;

设置：elem.属性名="属性值";

注意：

1.简化版class->className

2.简化版只能操作标准属性，不能操作自定义属性

样式

只能操作内联样式，内联样式-优点：

1.优先级最高，保证js用户触发一定会生效

2.只会操作当前元素，不影响其他元素

获取：elem.style.css属性名;

设置：elem.style.css属性名="css属性值";

注意：css属性名的写法-若有横线，变更为小驼峰命名法

绑定事件

elem.onclick=function(){点击后执行的代码}
avatar
文章
阅读
粉丝