前端笔记JS之总结

242 阅读8分钟

一、流程控制语句

程序三种基本结构--顺序结构、选择结构、循环结构

1、选择结构:

if语句

    if (判断条件) {
    执行语句
    }else if (判断条件) {
    执行语句
    }else{
    执行语句
    }

switch语句

case里必须是具体的值,但是如果表达式可以返回一个具体的值true或者false也可以是表达式,这时switch里面是true

    switch(表达式) {
    case 取值:
    执行语句
    break;
    case 取值:
    执行语句
    break;
    default:
    执行语句
    }

2、循环结构:

for语句

1.初始化表达式、

2.控制表达式、

3.循环后表达式

    for(var i = 0; i < n ; i ++){
    执行语句
    }
    while语句
    var i= 0;
    which (判断条件){
    执行语句
    }
    do while 语句 先执行后判断至少执行一次
    var i = 0;
    do {
    执行语句
    }while(判断条件)

二、数组

1、数组的声明

①通过构造函数
var arr = new Array ();
②通过字面量
var arr = [];

2、数组的赋值和取值

赋值:arr [索引号] = 1;

批量赋值 for循环

取值:arr [索引号];

3、数组的遍历 ---- 批量取值

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

4、防止稀疏数组

 arr (arr.length) = i;

三、函数

1、函数的定义和调用

函数的定义:每个函数都只能被定义一次,但一个函数可以根据需要被多次的声明和调用。

①函数的声明:function 函数名 () {
  函数体(要执行的代码)
  }
②函数表达式:var 函数名 = function () {
  函数体
  };
函数的调用:函数名 ();(要调用先引用)

2、函数的参数

有参数的函数的声明:
function 函数名 (参1,参2) { 
//函数声明时的参数只是一个占位符,是形式参数
函数体
        }
有参数的函数的调用:函数名 (参1,参2) 
//函数调用时传入的参数是具体的数值,是实际参数
形参和实参没有关系,只不过在调用的时候把实参的值复制了一份赋值给了形参

3、函数返回值

①return 要返回的值;(函数的返回值是什么,调用这个函数就相当于调用了什么)
②函数在执行完成return语句后便会退出函数,后面的代码不会执行
③如果只打印函数名,会通过函数名找到函数体,如果想打印的是函数的返回值,那么一定要加小括号()

4、匿名函数

匿名函数:函数定义完后就赋值给了一个变量,通过变量名来调用这个函数,所以就没有必要起名字

5、递归函数

函数自己调用自己的编程技巧

6、回调函数

被当做函数传递的函数

四、对象

通过对象可以方便的对变量和函数进行管理和使用

1、键值对:一种对应关系,通过键能够方便地找到值 key:value;

对象也是键值对属性名:属性值、索引:元素的值

2、对象的声明

    ①通过构造函数
    var obj = new.Object();
    ②通过字面量
    var obj = {};

3、属性:用来描述对象的特征 一般是名词 对应变量

定义:对象.属性名 = 要赋的值;
调用:对象.属性名;

4、方法:用来描述对象的行为 一般是动词

是一种函数(属于某个对象的函数就叫方法)
定义:对象.方法名 = function(){ //函数体 };
调用:对象.方法名;

5、访问属性的两种方式

①点语法(属性名是什么就必须写什么):obj.属性名;
②中括号(通过字符串找属性名,字符串可以通过编程拼接):obj["属性名"];

6、遍历的两种方式

    ①for循环
    ②for-in
      for(var k in json) { 语句 }
      
    k变量代表的是json中的各个属性(key)和 var i = 0中的i是一个意思 名字不同而已
    json  JavaScript Object
    Notation(JavaScript对象标记法)是仿照JS中对象字面量的格式去书写的一串	
    用来记录对象数据的字符串,可以用于数据传输。

7、Null

null常被用于期望一个对象,但是当前先不附加任何值的情况

undefined派生自null

    undefined == null  //true
    undefined === null  //false

五、DOM

①、阻止a标签的默认行为

return false;

②、事件三要素

事件源.事件 = function(){事件处理程序};

③、批量操作

    ①批量获取元素(通过标签名) getElementsByTagName )
    ②批量添加事件 for循环遍历
        replace 方法
        replace (要找的值,要替换的值)
        function 函数名(element, 要找的值,要替换的值){
        element.className = element.className.replace(要找的值,要替换的值)
        }
        Document Object Model 文档对象模型,就是把HTML文档模型化,当作对象来处理

1、概念

    文档(Document):就是指HTML或者XML文件
    节点(Node):HTML文档中的所有内容都可以称之为节点,常见的节点有
    元素节点 属性节点 文本节点 注释节点
    元素(Element):HTML文档中的标签可以称为元素

2、结构概念

    父节点 当前节点的父级
    子节点 当前节点的子级
    兄弟节点 和当前节点同属一个父级的节点

3、.获取元素

    getElementById
    getElementsByTagName 通过标签名寻找一类元素(伪数组)

4、设置属性

    元素对象.属性名 = “属性值”;
    <标签 属性名=”属性值”> 

5、绑定事件

    事件三要素
    事件源.事件 = function(){ 事件处理程序 };
    对象方法中的this永远指的是该方法所属的那个对象

6、常用属性

    a常用标签属性
    DOM对象的属性和HTML的标签属性几乎是一致的,常用的有src、title、className、href和style
    b内部文本属性
    innerHTML 获取和设置标签中的内容,设置的内容会当作节点对象被解析到DOM树上
    innerText 获取和设置标签中的内容,设置的内容会被当作普通文本(有兼容性问题,旧版ff不支持)
    textContent获取和设置标签中的内容,设置的内容会被当作普通文本(有兼容性问题,旧版IE不支持)
    c常用表单属性
    常见的表单元素属性有: type、value、checked、selected、disabled
    type设置input元素的类型
    value设置input元素的值
    checked设置input元素是否选中
    selected 设置下拉列表select中的option是否被选中
    disabled 设置input元素是否被禁用
    获取焦点事件是onfocus 失去焦点事件是onblur 
    d自定义属性--必须以data-开头
    getAttribute()  获取标签属性
    setAttribute()	 设置标签属性
    removeAttribute() 移除标签属性

7、节点

    childNodes 	//子节点 
    children		//子元素 
    nextSibling //下一个兄弟节点
    nextElementSibling //下一个兄弟元素 有兼容性问题
    previousSibling//上一个兄弟节点
    previousElementSibling //上一个兄弟元素 有兼容性问题
    firstChild //第一个节点
    firstElementChild //第一个子元素 有兼容性问题
    lastChild //最后一个子节点
    lastElementChild //最后一个子元素 有兼容性问题
    parentNode //父节点 (一定是元素节点,所以无需处理)

8、样式属性

    style属性是对象,style对象的属性是字符串
    style只能获取和设置行内样式
    JS中 - 不能作为标识符,涉及到计算的时候必须直接通过JS加样式

9、动态创建元素、

①插入和移除节点

    在父元素中的最后追加子元素:father.appendChild(要追加的元素);
    在父元素中的某个子元素前面插入子元素:father.insertBefore(要插入的元素,插到这个元素的前面);
    从父元素中移除子元素:father.removeChild(要移除的子元素);

②js动态创建结构

    方式一:直接在文档中书写 document.write(“内容”)
    方式二:改变元素对象内部的HTML:innerHTML=”内容”
    使用 字符串 或者 数组  先拼接再用innerHTML去添加到页面
    方式三:创建或克隆节点并追加,参数是一个布尔值 true表示深层复制 false是浅层复制
    document.createElement()
    document.cloneNode()

六、函数

1.作用域、预解析和声明提升

预解析:解析器在执行当前作用域下的代码之前有一个预解析的过程

预解析的时候:会将变量和函数的声明提升到当前作用域的顶部 然后才执行

声明提升

    ①变量提升:解析器会将变量提升到作用域的最上面,但是变量的赋值不会提升
    ②函数提升:解析器会率先读取函数声明,并使其在执行任何代码之前可用

另外解析器会先找var再找function,因此如果变量和函数重名后找到的函数会把先找到的变量覆盖(如果代码执行后有赋值语句,该值又会把函数覆盖)

变量作用域

    最外层的是全局变量
    函数内的是局部变量
    特殊:函数内部不加var的是全局变量
    递归概念:程序调用自身的编程技巧称为递归
    回调函数:函数也是一种普通的数据类型,因此函数也可以被当作参数传递,被当作参数传递的函数叫做回调函数

2.构造函数创建对象

@this和new
利用new 关键字可以声明新的对象。new 关键字可以让构造函数中this的指向改变,并让构造函数把this返回。

@构造函数
构造函数也是函数,只不过会默认返回一个对象。

@构造函数创建对象
通过构造函数创建对象更方便(不需要创建对象并返回)。更重要的是可以通过instanceof来判断实例的类型了。