js大致复习第一遍

Posted 2021-11-26 huihuihero

$javascript初级-----基础知识

什么是JS（布莱登 艾奇）

• 是一门脚本语言:不需要编译,直接运行
• 是一门解释性的语言:遇到一样代码就解释一行代码
• 是一门动态类型的语言---不解析
• 是一门基于对象的语言---不解释
• 是一门弱类型的语言,声明变量的时候都使用var

三个部分

• ECMAScript标准: js的基本的语法
  * DOM: 文档对象模型（document object model）
  * BOM: 浏览器对象模型 (browser object model)
  • DOM的作用:操作页面的元素

  • DOM树:把html页面或者是xml文件看成是一个文档,文档就是一个对象,这个文档中所有的标签都是元素,元素也可以看成是对象,标签(元素,对象)有很多,还有嵌套的关系,组成的这种层次结构,可以模拟成树形结构图,简称:树状图 ,就是DOM树

    数据类型

• number数据类型----无论是整数还是小数都是number数据类型的
  * string数据类型----字符串,获取字符串的长度:变量名.length
  * boolean数据类型---两个值,true，false
  * null----只有一个,null
  * undefined----只有一个,undefined,一个变量声明了,没有赋值
  * object---对象-----面向对象的时候讲解

基本类型(简单类型,值类型):number,string,boolean
复杂类型(引用类型):object
空类型:undefined,null

基本类型的值在栈上
复杂类型的对象在堆上,地址(引用)在栈上

值类型之间传递的是值
引用类型之间传递的是引用(地址)

类型转换

其他类型转数字
parseInt()---->转整数
parseFloat()--->转小数
Number()---->转数字-----要比上面两个严格
其他类型转字符串
toString()
String()
其他类型转布尔类型
Boolean()---->要么是true要么是false

运算符

• 算术运算符: + - * / %
  * 复合运算符: += -= *= /= %=
  * 赋值运算符: = 优先级别是最低的
  * 一元运算符: ++ -- ++在前，先自增再运算；++在后，先运算再自增
  * 三元运算符: ? :
  * 关系运算符:> < >= <= == === != !== （结果是布尔类型）
  * 逻辑运算符: && || ! 与或非 （结果是布尔类型）

流程控制

流程控制: 代码的执行过程
顺序结构:代码的执行的顺序,从上到下,从左到右(不严谨)
分支结构: if,if-else ,if-esle if,switch-case ,三元表达式
循环结构:while 循环,do-while,for循环 for-in循环
总结分支:如果只有一个分支,就用if
如果有两个分支,就用if-else
如果多个分支,一般是范围的,推荐使用if-else if
如果多个分支,一般是具体的值,推荐使用switch-case
总结循环:
while:先判断后循环,有可能一次循环都不执行
do-while:至少执行一次循环体,再判断
for循环:知道了循环的次数,推荐使用for循环

数组

• break:在循环中遇到这个关键字,直接跳出当前所在的循环
  • continue:在循环中遇到这个关键字,直接进行下一次循环
  • 数组:存储一组有序的数据,数据类型可以不一样
  • 数组的作用:一次性存储多个数据
  • 数组元素:数组中存储的每个数据,叫数组元素,存储了5个数据,有5个数组元素
  • 数组的长度:数组的元素的个数,叫数组的长度:数组名.length--->就是长度,数组的长度是可以改变的
  • 索引(下标):存储数组元素的编号,从0开始,到数组的长度-1结束
  • 索引是用来存储和读取数组元素的
  • 遍历数组:通过循环的方式找到数组中的每个数据
  • 冒泡排序:

  <script>
    //冒泡排序:把所有的数据按照一定的顺序进行排列(从小到大,从大到下)
    var arr = [10, 0, 100, 20, 60, 30];
    //循环控制比较的轮数
    for (var i = 0; i < arr.length - 1; i++) {
      //控制每一轮的比较的次数
      for (var j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] < arr[j + 1]) {
          var temp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = temp;
        }
      }
    }
    console.log(arr);
  </script>

数组定义的方式:
通过构造函数定义数组
var 数组名=new Array();空数组 Array()就是构造函数
var 数组名=new Array(长度);是设置数组的初始的长度,长度是可以改变的
var 数组名=new Array(值,值,值...);定义数组并设置数组中的元素值
字面量的方式定义数组
var 数组名=[];空数组
var 数组名=[10];这个数组有一个元素,值是10,长度是1
数组变量for(var i=0;i<数组名.length;i++){ }

函数

函数定义:

     function 函数名(){
          函数体
     }

函数调用:

     函数名();

参数

形参:函数定义的时候函数名字后面的小括号里的变量就是参数,是不需要写var
实参:函数调用的时候小括号里传入的变量或者是值,都是实参
* 返回值:函数中如果有return,那么这个函数就有返回值
* 如果函数中没有return,那么这个函数没有返回值
* 如果函数中有return,但是后面什么内容都没有,这个函数没有明确返回值
* 如果一个函数没有明确的返回值,函数调用了,并且接收了,那么此时接收的结果undefined
* 如果直接输出函数名字,那么是这个函数的代码

     无参数无返回值的函数
      function f1(){
   
     }
     有参数无返回值的函数,2个参数
      function f2(x,y){
    
        }
      无参数有返回值的函数
     function f3(){
          return 100;
     }
     有参数有返回值的函数
      function f4(x){
         return "您好";
    }

arguments

• arguments----->可以获取函数调用的时候,传入的实参的个数
• arguments是一个对象,是一个伪数组
• arguments.length--->是实参的个数
• arguments[索引]---->实参的值

作用域，变量，预解析

作用域:变量的使用范围

• 全局作用域:全局变量在任何位置都可以使用的范围
• 局部作用域:局部变量只能在某个地方使用---函数内
• 作用域链:在一个函数中使用一个变量,先在该函数中搜索这个变量,找到了则使用,找不到则继续向外面找这个变量,找到则使用,一直找到全局作用域,找不到则是undefined

变量：

• 全局变量:只要是在函数外面声明的变量都可以看成或者是理解成是全局变量
• 局部变量:在函数中定义的变量

预解析:在执行代码之前做的事情

• 变量的声明和函数的声明被提前了,变量和函数的声明会提升到当前所在的作用域的最上面
• 函数中的变量声明,会提升到该函数的作用域的最上面(里面)
• 如果有多对的script标签都有相同名字的函数,预解析的时候是分段的,互不影响

编程思想：面向对象，过程

• 面向过程:凡事亲力亲为,所有的事情的过程都要清楚,注重的是过程
• 面向对象:提出需求,找到对象,对象解决这个问题,我们要结果,注重的是结果
  面向对象的特性:封装,继承,多态,(抽象性)

对象

对象:有属性和方法,具体特指的某个事物
变量 instanceof 对象------->布尔类型,判断这个变量是不是这个类型的
属性----特征
方法----行为
对象分三种:内置对象,自定义对象,浏览器对象
* 内置对象:系统提供的
* 自定义对象：自己写的
* 浏览器对象:浏览器的

创建对象

创建的对象的3种方式:

• 通过调用系统的构造函数创建对象 new Object()
  var obj1=new Object();
• 自定义构造函数创建对象
  var obj2=new 自定义构造函数();
• 字面量的方式创建对象
  var obj3={};

JSON

JSON格式的数据,都是键值对,成对的数据

var json={
    "name":"小明",
    "age":18,
    "sex":"boy"
     };

设置，获取属性值

对象设置属性的值的写法

• 对象.属性名字=值;----点语法
• 对象["属性的名字"]=值;-----

对象获取属性的值的写法

• 对象.属性
• 对象["属性"]

遍历对象

var obj={
      "name":"林子闲",
      "age":20,
      "sex":"男",
      "wife":"乔韵"
    };

 for(var key in obj){   //key---是一个变量,这个变量中存储的是遍历的对象的属性的名字
     console.log(key+"========"+obj[key]);
 }

Math方法

• Math.ceil()---向上取整
• Math.floor()---向下取整
• Math.Pi----圆周率的值
• Math.Max()---一组数字中的最大值
• Math.Min()---一组数字中的最小值
• Math.abs()----绝对值
• Math.random()---随机数字
• Math.sqrt()----开平方
• Math.pow()----一个数字的多少次幂

new的执行过程

new的时候，系统做了什么事?

1. 开辟空间,存储创建的新的对象
2. 把this设置为当前的对象
3. 设置属性和方法的值
4. 返回当前的新的对象

三大系列

offset系列:

• (父级元素margin+父级元素padding+父级元素border+自己的margin)
• offsetLeft:元素距离左边位置的值
• offsetTop:元素距离上面位置的值
• offsetWidth:获取元素的宽度(有边框)
• offsetHeight:获取元素的高度(有边框)

scroll系列:卷曲

• scrollLeft:元素向左卷曲出去的距离
• scrollTop:元素向上卷曲出去的距离
• scrollWidth:元素中内容的实际的宽度,如果没有内容,或者内容很少,元素的宽度
• scrollHeight:元素中内容的实际的高度,如果没有内容,或者内容很少,元素的高度

client系列:

• clientWidth:可视区域的宽度,没有边框
• clientHeight:可视区域的高度,没有边框
• clientLeft:左边框的宽度
• clientTop:上边框的宽度
• clientX:可视区域的横坐标
• clientY:可视区域的纵坐标

&JavaScript中级-----Webapi

获取元素

- 根据id从整个的文档中获取元素---返回的是一个元素对象
document.getElementById("id属性的值")
- 根据标签的名字获取元素-----返回的是元素对象组成的伪数组
document.getElementsByTagName("标签的名字");
- 根据name属性的值获取元素
document.getElementsByName("name属性的值");
- 根据类样式的名字获取元素
document.getElementsByClassName("类样式的名字");
- 根据选择器获取元素
document.querySelector("选择器");返回一个对象
- 根绝选择器获取元素
document.querySelectorAll("选择器");返回数组,多个元素组成的

元素的样式操作

• 操作基本标签的属性 —— src,title,alt,href,id属性
• 操作表单标签的属性 —— name,value,type,checked,selected,disabled,readonly
• 对象.style.属性=值;
• 对象.className=值;

事件

• 事件:就是一件事,有 事件源 触发 和 响应

• this关键字----如果是在当前的元素的事件中使用this,那么this就是当前的对象

  对象，元素，节点

• 内置对象:系统自带的对象
  • 自定义对象:自己写的对象
  • BOM对象：浏览器对象
  • DOM对象:------->通过DOM方式获取的元素得到的对象
• document：页面中的顶级对象
• 元素:element:页面中的标签 标签---元素---对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)

• 节点:Node:页面中所有的内容,标签,属性,文本
  节点的作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素 节点的类型:1标签节点,2属性节点,3文本节点 * nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点 * nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---`#text` * nodeValue:标签---null,属性---属性的值,文本---文本内容 * if(node.nodeType==1&&node.nodeName=="P")那么这就肯定是一个p标签

• 根元素:html标签

阻止超链接默认跳转

• return false;

自定义属性

- 自定义属性:标签原本没有这个属性,为了存储数据,程序员自己添加的属性
- 自定义属性无法直接通过DOM对象的方式获取或者设置
  - 对象.getAttribute("自定义属性名字");获取自定义属性的值
  - 对象.setAttribute("属性名字","值");设置自定义属性及值
- 移除自定义属性
   - 对象.removeAttribute("属性的名字");

元素的创建(3种)

1 document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉

2 父级对象.innerHTML="标签代码及内容";

3 document.createElement("标签名字");得到的是一个对象
    * 父级元素.appendChild(子级元素对象);
    * 父级元素.inerstBefore(新的子级对象,参照的子级对象);
    * 移除子元素 —— 父级元素.removeChild(要干掉的子级元素对象);

事件的绑定(3种)

1. 对象.on事件名字=事件处理函数      如果是多个相同事件注册用这种方式,最后一个执行之前的会被覆盖
    my$("btn").onclick=function(){};  
2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);    `IE678不支持`
    my$("btn").addEventListener("click",function(){},false);
3. 对象.attachEvent("有on的事件名字",事件处理函数);           `谷歌火狐不支持`
    my$("btn").attachEvent("onclick",function(){});

addEventListener 和attachEvent的兼容代码

function addEventListener(element,type,fn) {
      if(element.addEventListener){
        element.addEventListener(type,fn,false);
      }else if(element.attachEvent){
        element.attachEvent("on"+type,fn);
      }else{
        element["on"+type]=fn;
      }
    }

事件解绑

1. 对象.on事件类型=null;
2. 对象.removeEventListener("没有on的事件类型",事件处理函数名字,false);
3. 对象.detachEvent("有on的事件类型",事件处理函数);

获当前节点的节点，元素

    //获取当前节点的父级节点
    console.log(my$("uu").parentNode);
    //获取当前节点的父级元素
    console.log(my$("uu").parentElement);
    //获取当前节点的子级节点
    console.log(my$("uu").childNodes);
    //获取当前节点的子级元素
    console.log(my$("uu").children);
    //获取当前节点的第一个子级节点
    console.log(my$("uu").firstChild);
    //获取当前节点的第一个子级元素
    console.log(my$("uu").firstElementChild);
    //获取当前节点的最后一个子级节点
    console.log(my$("uu").lastChild);
    //获取当前节点的最后一个子级元素
    console.log(my$("uu").lastElementChild);
    //获取当前节点的前一个兄弟节点
    console.log(my$("uu").previousSibling);
    //获取当前节点的前一个兄弟元素
    console.log(my$("uu").previousElementSibling);
    //获取当前节点的后一个兄弟节点
    console.log(my$("uu").nextSibling);
    //获取当前节点的后一个兄弟元素
    console.log(my$("uu").nextElementSibling);

写入，innerText innerHTML

document.getElementsByTagName("p").innerHTML="<p>这是一个p</p>";  不仅文本，还能标签等
document.getElementsByTagName("p").innerText="这是一个p";  只能作用于文本
document.write("<p>这是一个p</p>")    是document对象的一个方法，重绘，既替换之前的整个页面，用的不多

事件冒泡

事件冒泡：
元素A中有元素B,都有相同的事件,里面的元素的事件触发了,外面元素的事件也会触发.可以是多个元素嵌套

阻止事件冒泡：
1. e.stopPropagation(); IE8不支持      e —— 事件参数对象,
2. window.event.cancelBubble=true; 火狐不支持     window.event —— 事件参数对象，和e是一样的 

定时器

定时器会返回自己的id值，是window对象，但window在写时可省略
复用性定时器
var timeId=window.setInterval(函数,时间);   页面加载完毕后,每过一定时间后执行函数
window.clearInterval(定时器的id值);    清理定时器

一次性定时器
var timeId=setTimeout("alert('hello')",1000);   页面加载完成后,一定时间后只执行一次函数
clearTimeout(timeId);