js第一周

101 阅读3分钟

1.JavaScript概念:

是一个运行在客户端的解释型弱类型面向对象的脚本语言

  • 解释型:不需要检查语法是否正确,直接运行,遇到错误停止
  • 弱类型:数据类型由数据决定
  • 面向对象:对象名.属性; 对象名.方法();

2.两种运行方式

  • < script>代码</ script>
  • < script src='js文件路径'>`

3.三种输出

  • console.log();
  • document.write();
  • alert();

4、变量

创建后值可以修改
语法:var 变量名;

常量:创建后不允许修改;

语法:const 常量名=值;

5、数据类型

  1. number:数字
  2. string:字符串
  3. boolean:布尔
  4. null:空
  5. undefined:未定义的值
  6. object:对象;复合结构的数据集;有11个

6、基本运算

6.1算数运算符

- 1 + - * / %取模

带有隐式转换:悄悄将数据类型发生转换,默认:将左右两边转为数字,再运算。

NaN:不是一个数字,但是确实是数字类型,有两个缺点:1、参与任何的算数运算结果仍为NaN 2、参与任何的比较运算结果仍为false

+运算: 如果碰上字符串,左右两边都会悄悄转为字符串,+运算符是拼接操作

6.2逻辑运算符

- && 与 || 或 !非

6.3递增和递减

++ 自增

-- 自减

笔试题:前++和后++的区别:

如果单独使用,前++和后++没有任何区别

如果参与了其他表达式,标量始终都会+1,但是前++和后++返回的结果不同。

前++,返回的是加了之后的值;

后++,返回的是加之前的旧值。

6.4、关系运算符

> < == >= <=

6.5、相等和全等

==相等 !=不相等 ===全等 !==不全等

6.6、赋值运算符

= += —= *= /= %=

6.7 位运算

左移:m<<n 右移: m>>n

缺点:底数只能是2,不能修改。

7、数据类型转换

7.1转字符串

  • 使用+
  • string(X);万能的
  • tostring();

7.2 转数字

  • parseInt() 字符串转为整数
  • parseFloat()转为小数
  • Number(X)万能

7.3转布尔

  • Boolean(x);万能的

    只有6个会是false:0,undef,null,“”,NaN,false,其余都是true;

8、循环

8.1 if分支

  • if(){}一个条件,一件事
  • if(){}else{}一个条件,两件事
  • if(){}else if{}else{}多个条件,多个事

8.2 swich语法

swich(){ case: ;break; case: ;break; default: 默认操作 ; }

8.3 三目运算

语法:条件?操作:默认操作;

8.4 for

  • for(循环变量;循环条件;循环变量变化){代码段}
  • 定义一个变量,当循环变量满足条件就执行代码段,循环执行一次,变量就随变量变化而变化,当变量不满足条件时退出循环;
  • 死循环 for(;;;){}

8.5 while循环

whlie(循环条件){
循环体;

}

死循环 while(true){死循环操作}

break:退出整个循环;

continue:退出本次循环,下次依然执行;

8.6 to{}while()循环

to{代码段;循环变量变化}while(循环条件)和while循环原理相同,不同处是无论循环条件满不满足都先执行一次代码段在判断是否满足。

9、函数function

9.1.概念

function--函数称之为方法先预定好的以后可以反复使用

什么时候使用: 不希望页面打开就立刻执行; 希望由用户触发; 函数地位在js中是第一等公民

9.1.1.声明方法

语法:function 函数名(形参){代码段}

9.1.2.直接量方式创建函数

语法:var 变量名=function(参数){代码段}

9.2.调用函数

var 接住返回的结果=函数名(实参列表)

return 退出函数

9.3 作用域

全局作用域:页面任何位置都可以访问

函数作用域:只能在函数内部调用

变量使用规则:优先局部

缺点:全局不能使用局部的,解决:加return,千万不能对未声明的变量赋值--会全局污染

10、数组array

概念:一个变量能保存多个数据,元素下标从0开始

10.1 创建数组

直接量方式:

  • var arr= [];//空数组
  • var arr=[数据1,。。。]; 构造函数方式:
  • var arr=new Array();
  • var arr=new Array(数据1,。。。);

10.2 获取数组的元素

数组名[下标]只能获取数组里面一个数据

10.3 遍历数组

  • for(i=0;i<数组名.length;i++){数组名[i]}可以获取数组所有数据

10.4 添加/替换数组

  • 数组名[i]=新数据;

10.5 唯一属性

length 语法:数组名.length;

11、DOM 文档对象模型

概念:

11.1 查找元素

  • document.getElementById('ID名')通过id去查找元素
  • document.getElementsByTagName('标签名')通过标签名去查找元素
  • document.getElementsByClassName('class名')通过class名去查找元素

11.2 关系查找

  • 父元素:elem.parentNode; - 单个元素
  • 子元素:elem.children; - 集合
  • 第一个子元素:elem.firstElementChild; - 单个元素
  • 最后一个子元素:elem.lastElementChild; - 单个元素
  • 前一个兄弟:elem.previousElementSibling; - 单个元素
  • 后一个兄弟:elem.nextElementSibling; - 单个元素

11.3 操作元素

  • 变量名.innerHTML获取标签开始到标签结束的内容

    • 获取:elem.innerHTML;
    • 设置:elem.innerHTML="新内容";
  • 变量名.value获取单标签属性value的内容

  • 变量名.getAttribute('属性名')简化版变量名.属性名获取叫这个的属性名的标签

  • 变量名.setAttribute('属性名')='新内容'简化版变量名.属性名='新内容'修改叫这个的属性名的标签

  • 变量名.style.css属性获取css样式

  • 变量名.style.css属性=新css属性修改css样式 简化版只能获取标准属性,不能获取自定义属性,这种css样式修改方法只能修改内部样式,css属性-js里面会编译为减号,解决方法用小驼峰命名法如: background-color-->backgroundColor

11.4 绑定时间

elem.onclick=function(){}

  • 关键词this只能在事件内部使用

  • 如果单个元素绑定事件,this-->这个元素

  • 如果多给元素绑定事件,this-->发生事件的元素