js第一周复习

冉健
59 阅读4分钟
1.javascript概述：

是运行在js解释器的解释型、弱类型、面向对象的脚本语言。

2.输出方式：
  1. 控制台输出：console.log();
  2. 页面body输出：document.write();
  3. 弹出警告框输出：alert();
3.变量和常量：
  1. 变量：var 变量名=值；
  2. 常量：const 常量名=值；
4.算术运算符：

+-*/%

5.数据类型：
  1. 原始/基本/值类型：String/Number/Boolean/Undefined/Null
  2. 引用/对象类型：11个对象 （目前已经学习了function、array）
6.数据类型的转换
  1. 隐式转换：算术运算的隐式转换：默认转为数字，在运算 true->1/ false->0/ undefined->NaN/ null->0
  2. 强制转换：隐式出来的结果不是我们想要的，我们可以手动调用一些方法转换数据类型，再去做运算转字符串：var str=x.toString();//x不能null和undefined，null和undefined不能使用.去做任何操作页面上一切的数据类型，都是字符串
  3. 转数字： var num=parseInt/Float(str); 执行原理：从左向右，依次读取每个字符，碰到非数字字符，则停止，如果一来就不认识则为NaN，Int不认识小数点，Float认识第一个小数点 Number(x);//虽然是万能的，任何人都可以转为数字，完全等效于隐式转换，绝对不要手动使用，还不如-0 *1 /1
注意：
  1. +运算，碰上一个字符串，则两边都会悄悄变成字符串，变为了拼接操作
  2. -*/%，字符串也可以转为数字，前提是纯数字组成的字符串，包含了非数字字符，则为NaN
  3. NaN：Not a Number 不是一个数字，但确实是数字类型，不是一个有效数字：
  4. NaN参与任何算术运算结果仍为NaN
  5. 参与任何比较运算结果都为false - 不能用普通的比较运算判断是不是NaN
  6. 解决：!isNaN(x);true->有效数字；false->NaN
7.函数：提前预定义好的，一段可以反复使用的代码
  1. 创建：function函数名（形参列表）{操作}
  2. 调用：elem.onclick=function（）{函数名（实参列表）}
8.分支结构：
  1. 比较运算符：> < >= <= == !=结果都是布尔值，正好用于判断条件
  2. 逻辑运算符：综合比较
  • &&：全部条件满足，才满足，只要一个不满足，则不满足
  • ||：全部条件不满足，只要有一个满足，则满足
  • ！：颠倒布尔值
  1. 语法：
  • if（条件）{操作}
  • if（条件）{操作}else{默认操作}
  • if（条件）{操作}else if（条件）{操作}else{默认操作}
9.循环结构：
  • var循环变量=几；while（循环条件）{循环体；变量的的变化；}
  • for（var 循环变量=几；循环条件；变量的变化）{循环体}
  • 死循环：while（true）{} / for（;;）{}
  • 退出循环：break；
10.数组：
  • 创建：var arr= [数据......]
  • 访问；arr[i];
  • 添加/替换：arr[i]=新值；
  • length属性：获取到数组的长度：语法：arr.length；
  1. 向末尾添加元素；arr[arr.length]=新值；
  2. 得到倒数第N个元素：arr[arr.length-n];
  3. 删除倒数第n个元素：arr.length-=n;
  • 遍历数组：取出数组中的每个元素执行相同或相似的操作
  • for（var i0；i<arr.length;i++）{arr[i];}
    11.获取元素：
  1. 标签/class名：var elems=document/parent.getElementsByTag/ClassName("标签名/class名")；
  • 找到了是找到一个集合，集合不能直接操作，要么下标拿下某一个，要么遍历拿每一个
  • 没找到返回的是一个空集合
  • parent：是已经找到某个父元素
  1. 通过关系获取元素。前提是必须先找到一个元素才可以用
  • 父:elem.parentNode
  • 子:elem.children(这是一个集合)
  • 第一个儿子:elem.firstElementChild
  • 最后一个儿子:elem.lastElementChild
  • 前一个兄弟:elem.previousElementSibling
  • 后一个兄弟:elem.nextElementSibling
12.操作元素：
  1. 内容：innerHTML（识别标签）/ innerText（纯文本） / value（input专属）
  • 获取：elem.以上三个中的其中一个
  • 设置：elem.以上三个中的其中一个="新内容";
  1. 属性：
  • 获取属性值：elem.getAttribute（"属性名"）；
  • 设置属性值：elem.setAttribute("属性名","属性值");
  • 简化版本：获取：elem.属性名；elem.属性名=属性值；
  • 缺陷：class必须写className；只能操作标准属性，不能操作自定义属性
  1. 样式：内联样式
  • 获取：elem.style.css属性名;
  • 设置：elem.style.css属性名="css属性值"；
  • 特殊：css属性名有横线的地方，去掉横线，换为小驼峰命名发
  1. 绑定事件：

  • 单个事件绑定：elem.onclick=function(){this-elem}

  • 多个元素绑定：for(var i=0;i<elems.length;i++){elems[i].onclick=function(){this-当前出大事件的元素}}

avatar
文章
阅读
粉丝