js基础大全 js语法 js运算符 js函数 js对象 jsDom操作 js构造函数 函数的属性和方法

js语法：

js的引入方式

- 行内式 ： 直接把js代码嵌套到html开始标签里
- 内嵌式 ： 通过script 标签引入，可以放在页面的任何地方
- 外链式 ： 通过 script 标签的src 属性引入，js代码文件的扩展名为 .js

js代码放的位置不同，会影响也页面的展示效果

js语法：

- 区分大小写
- 使用字母，下划线_ ，美元符号$ 开头，后边可以是任何字母，数字，下划线 等的组合
- 不能使用关键字或者保留字作为变量名
- 变量名中间不能出现空格等其他字符
- 可以使用匈牙利标记，帕斯卡，驼峰命名法

js变量的声明

- 使用var关键声明变量
- 变量必须先声明，后赋值
- 一个var 关键字可以声明多个变量，变量的类型不受限制,多个变量之间使用逗号隔开
```
    var a = 100;//声明变量并赋值
    var a = 100,b = 200, c = 'hello';//声明多个变量
    var a;//先声明，后赋值
    a = 100;
```

判断数据类型 typeof 运算符

- 得到的结果为：number string  boolean  undefined   object

5种原始数据类型

- number 
- string
- boolean
- undefined
- null

undefined

- 变量声明了，但是没有赋值，则变量的默认值为 undefined 

类型转换

toString(): 转换为字符串 两种转换模式

默认模式 num.toString()
- 基模式转换： 基：2 8 10 16 num.toString(2)

parseInt() 和 parseFloat()

首先去判断第一个字符是否是有效数字，如果是，则继续判断第二位,直到遇到非有效数字停止转变换，则把前边转换为的数字全部返回，如果不是，则直接返回NaN，对于parseFloat()可以识别第一个小数点

强制类型转换

- Number(): 整体进行转换；如果里边存在非有效数字，则直接返回NaN,可以识别第一个小数点;true ---> 1   false---> 0
- Boolean() : 

6种假值： false 0 ‘’ undefined null NaN
- String() : 强制转换为字符串

运算符

- 算术运算符 ： +  -  *  /  %
- 关系运算符 ： >  <   >=   <=   ==  ===  !=  !== 

== 和 ===:区别：两个等号值相等，则相等；三个等号值和类型都相等，则相等

• 逻辑运算符 ： &&(两边为真则为真) ||(一边为真则为真) !(真的变为假的，假的变为真的)
• 自增自减运算符： ++ –
  • 前增量、前减量 ++num; --num; 先自身进行运算，然后在参与其他运算
  • 后增量、后减量 num++; num–; 先参与其他运算，然后在自身进行运算
• 赋值运算符 ： =
• 复合运算符： += -= *= /= %=
• 条件运算符 ： 表达式?true，执行代码 : false,执行代码

条件语句

if语句

if(表达式){
    //表达式为真(表达式的运算结果转换为true即可)，则执行代码
}

if-else语句

if(表达式){
   //表达式为真(表达式的运算结果转换为true即可)，则执行代码  
}else{
    //表达式为假(表达式的运算结果转换为false即可)，则执行代码  
}

if-else的嵌套结构

if(表达式1){
   满足条件，则执行代码，后边的代码不在执行
}else if(表达式2){
   表达式1不满足条件，则执行代码，后边的代码不在执行
}else if(表达式3){
    表达式1和2 不满足条件，则执行代码，后边的代码不在执行
}else{
     以上表达式均不满足条件，则执行代码
}

switch()语句

switch(表达式)表达式是一个具体的值

switch(表达式){
    case value1:执行的代码;
        break;
    case value2:执行的代码;
        break;
    case value3:执行的代码;
        break;
    default:
       以上条件都不成立， 执行的代码;
}

switch语句中break的作用：终止判断，满足条件，直接输出结果；如果没有break语句，则会从满足条件出开始执行下边所有的代码

循环语句

while循环语句

先判断，后执行，代码可能一次也不会被执行

while(条件){
    执行的代码；    
}

do-while()语句

先执行，后判断，代码至少执行一次

do{
    执行的代码；
}while(条件)

for循环语句

for(var i = 0;i < 5 ; i++){
    执行的代码
}

for-in语句

遍历数组：则 i 对应的是数组的下标；遍历对象，则 i 对应的是对象的属性；获取值是 obj[i]

for(var i in obj){
    执行的代码   
}

break 和 continue 语句

- break:终止循环
- continue : 跳出当前循环，继续下一次循环

函数

函数的声明方式

• 使用function 关键字声明

function show(){

}

• 使用字面量形式

var f = function(){

}

有参函数和无参函数

• 无参函数：

function show(){

}

• 使用字面量形式

var f = function(){

}

• 有参函数：

 function show(a,b){

 }

• 使用字面量形式

var f = function(a,b){

}

实参和形参

• 实参：调用执行函数是传入的值称之为实参
• 形参：函数定义时传入的变量称之为形参；形参就是函数体内的变量，在函数体内具有全局作用域

实参和形参的关系

• 实参多形参少：多余的实参会自动忽略
• 实参少形参多：多余的形参的值为undefined

作用域

全局作用域

• 函数外部声明的变量具有全局作用域
• 在最外层函数内声明的变量在这个函数体内具有全局作用域
• 在函数内不使用var关键字声明的变量具有全局作用域
• 所有的window对象的属性和方法具有全局作用域

局部作用域

• 函内体内部使用var关键字声明的变量具有局部作用域

函数内的变量提升

函数内部定义的变量，他的声明会被提升到函数体的最上边，他的赋值还留在原来的位置

function fun(){
    //首先把a的声明，放到这个位置
    //var a;
    console.log(a);
    var a  = 100;//a 的赋值还在这个位置
}

函数的返回值 return

return 语句后边的代码将不再执行

function fun(){
    return 100;
}

函数的调用：

直接使用函数名(); fun();

对象

以键值对的形式展现的

对象的声明方式

• 使用new 关键字声明

var  parent = new Object();
parent.name = 'lili';//添加属性
parent.say = function(){//添加方法
    console.log('hello')
}

• 使用字面量的形式

var parent = {
    属性1:value1,
    属性2:value2,
    属性3:function(){

    }
}

对象的取值

• 通过.运算符获取值 parent.name;
• 也可以通过 []获取值： parent[‘name’];[]里边可以放变量
• 调用方法： parent.say();
• 删除对象的属性和方法： delete obj.name;

字符串对象 string

属性

• 字符串的长度：str.length;

方法：

• chatAt(index) :获取索引位置的字符
• indexOf(字符) ： 检索字符第一次出现的位置，结果是索引值；如果不存在，则返回-1
• lastIndexOf(字符) : 检索字符最后一次出现的位置，结果是索引值；如果不存在，则返回-1
• replace(正则表达式，替换的字符串)：替换和正则表达式匹配的字符串；
• substring(start,end) :截取字符串；包前不包后；end参数可以省略;参数不能为负数
• slice(start,end):截取字符串；包前不包后；end参数可以省略;参数可以为负数
• substr(start,length):截取指定长度的字符串
• split(参数):将字符串分割为字符串数组 ；参数是分割的标志

数组对象 Array

数组是引用类型

属性：

• 获取数组的长度 ： arr.length;

方法：

• indexOf(参数):检索值在数组中第一次出现的位置，返回的是索引值；如果不存在，返回-1
• lastIndexOf(参数)：检索值在数组中最后一次出现的位置，返回的是索引值；如果不存在，返回-1
• push():往数组的最后添加元素，返回值是新数组的长度
• pop(): 删除数组的最后一个元素；返回值是删除的元素
• unshift(): 往数组的开始位置添加元素，返回值是新数组的长度
• shift():删除数组的第一个元素；返回值是删除的元素
• splice(x1,x2,x3): 删除替换数组中的元素；
  如果一个参数：代表删除；x1索引值;如果两个参数：删除指定长度的数组元素：x1:索引值，x2代表的是长度；如果是三个参数：先删除后替换；x1:索引值，x2代表的是长度；x3替换的值，替换的值的位置是x1的位置
• toString():转换为字符串
• join(参数):连接数组，转换为字符串，参数是连接的符号

Date 日期对象

方法：

• 获取日期的方法： get…
• 设置日期的方法: set…
• 获取时间戳： getTime(); 获取1970.1.1 至今的毫秒数

Math对象

• Math.PI 获取圆周率
• Math.floor() :下舍入
• Math.ceil() : 上舍入
• Math.random() : 随机数 ：范围 [0,1)
• Math.round(): 四舍五入

任意区间的随机数封装函数

function raondom(a,b){
    return Math.floor(Math.random() * (b - a + 1) + a);
}

计时器

• setTimeout()
• setInterval();

声明计时器

//第一种方式
var time = setInterval(function(){},1000)
//第二种方式
function fun(){

}
var time = setInterval(fun,1000)

清除计时器

• clearInterval(计时器的名字)
• clearTimeout(计时器的名字)

DOM 操作

查找Dom元素

• document.getElementById()
• document.getElementsByClassName()
• document.getElementsByTagName()
• document.getElementsByName()
• document.querySelector(选择器) // 匹配的是第一个
• document.querySelectorAll(选择器) // 匹配的是全部的

属性：

• innerHTML : 获取或者设置元素的内容

设置属性或者获取属性值

针对行内样式

• setAttribute():添加属性
• getAttribute():获取属性值

获取样式的通用方法

function getStyle(obj,st){
    if(obj.currentStyle){
        var res = obj.currentStyle[st]
    }else{
         var res = window.getComputedStyle(obj,null)[st]
    }
    return res;
}

添加样式的通用方法

function setStyle(obj,cssObj){
    for(var attr in cssObj){
        obj.style[attr] = cssObj[attr]
    }
}

DOM节点操作

• appendChild();添加节点
• insertBefore(newNode，oldNode):插入指定节点之前
• replaceChild(newNode，oldNode):替换节点
• removeChild():删除节点
• createElement():创建元素节点
• createTextNode():创建文本节点

节点的属性

• nodeType :节点类型， 元素节点： 1
• nodeName ：节点名字，返回的是大写的元素标签名
• nodeValue ： 节点的值； 返回节点值；元素节点不存在nodeValue

查找节点

• firstChild :第一个子节点
• lastChild:最后一个子节点
• childNodes: 所有子节点的集合
• children ： 所有元素节点的集合
• nextSibling ：下一个兄弟节点
• previousSibling ：上一个兄弟节点
• parentNode ： 父节点
• cloneNode(true/false) :克隆节点 ；true:克隆自身和所有子元素；false:只克隆自身

清除节点的函数封装

function clearNodes(obj){
    for(var i = 0; i < obj.childNodes.length;i++){
        if( obj.childNodes[i].nodeType !== 1){
            obj.removceChild(obj.childNodes[i])
        }
    }
}

判断是否存在子节点

• hasChildNodes():存在子节点，返回值是一个boolean值；存在则返回true；不存在否则false

事件绑定

事件绑定方式

• Dom对象的属性绑定一个事件： box.onclick = function(){}
• html开始标签里边绑定事件

<h1 onclick = 'console.log(123)'></h1>

• 事件监听的方法绑定事件：addEventListener(type,handler,true/false) ; IE: attachEvent(‘on’+type,handler);

事件冒泡：

• 目标元素上绑定的事件被触发，如果父元素上也有同名的事件，则也会被触发，一直向上触发直到根元素；
  从最具体的元素到最不确定的元素；

阻止冒泡

function stopPropagation(e){
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
}

事件捕获：

• 目标元素上的事件被触发，如果父元素上也有同名的事件，则也会被触发，从根元素开始，层层向下捕获事件，直到目标元素上的事件
  从最不确定的元素到最确定的元素

IE低版本只有事件冒泡，不存在事件捕获

阻止浏览器的默认行为

function stopDefault(e){
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}

事件对象 event

var e = e || window.event;//处理事件对象的兼容性

移除事件监听

• 移除的事件处理程序和绑定的事件处理程序不能使用匿名函数；必须使用外部函数*

• removeEventListener(type,handler);
• detachEvent(‘on’+type,handler);

事件监听 this指向问题

function show(){

}
box.atachEvent('onclick',function(){
    show.call(box)
})

show.call(box) : 1、修改this指向；2、调用并执行函数

事件委托

子元素的事件，委托为父元素来执行
触发事件的元素，称之为事件源对象

// 引入事件对象event
var e = e || window.event;
//引入事件源对象 
var target = e.target || e.srcElement;

DOM常用事件

• onclick
• 鼠标事件：onmouseenter ; onmouseover ; ommouseout ; ommouseleave; onmousedown ; onmouseup ; onmousemove
• window对象的事件： onload ; onresize ; onscroll
• 键盘事件 ： onkeydown onkeyup onkeypress
• 表单事件： onfocus onblur onchange onselect onreset onsubmit

DOM对象的宽高位置属性

• clientWidth 和 clientHeight :包括padding
• offsetWidth 和 offsetHeight ：包括border
• offsetLeft 和 offsetTop : 获取相对于父元素的偏移量；需要有定位属性，如果不存在这样的父元素，则相对于body
• scrollTop(用的多) 和 srcollLeft
• getBoundingClientRect(); 得到的结果是留个值；width height top left right bottom ;获取某一个方向的值 obj.getBoundingClientRect().left

获取浏览器窗口的滚动值：

var sctop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;

设置浏览器窗口的滚动值

document.documentElement.scrollTop = 300;
document.body.scrollTop = 300;
window.pageYOffset = 300;

获取浏览器窗口的宽高

var wh = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var ht = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

event对象坐标属性

• e.clientX 和 e.clientY: 获取相对于浏览器窗口左上角的坐标值
• e.offsetX 和 e.offsetY : 获取相对于事件源对象的左上角的坐标值
• e.pageX 和 e.pageY : 获取相对于页面（整个html文档）左上角的坐标值；

案例

• tab切换
• 楼层导航（电梯导航）
• 无缝轮播图（无缝滚动轮播的和渐隐渐现的轮播）
• 放大镜特效
• 遮罩层特效
• 购物车案例：判断的依据

json对象

json是轻量级的文本交换格式，作用是用于存储和传输数据

• 取值方式： 按照数组和对象的取值方式进行取值
• 案例：三级联动（地址的选择）

try-catch语句 ：捕获异常

//基本结构
try{
    执行的代码
}catch(err){
    //捕获错误
}


try{
    执行的代码
}catch(err){
    //捕获错误
}finally{
    //不管是否出错，始终执行此处代码
}

• 自定义异常 throw

try{
   if(条件){
       throw '自定义异常'
   }
}catch(err){
    //捕获错误
}finally{
    //不管是否出错，始终执行此处代码
}

构造函数

function Parent(a,b){
    this.name = a;
    this.age = b;
    this.say = function(){
        console.log('hello')
    }
}
//构造函数内的this指向实例化对象
var p1 = new Parent('lili',18);

new 的四个过程

1. 创建一个新的空的对象
2. 修改this指向，指向实例化对象
3. 给实例化对象对象添加属性和方法 （调用执行构造函数）
4. 返回对象

普通对象和 函数对象

• 普通对象： 具有__proto__属性 ； __proto__属性指向他的原型对象
• 函数对象： 具有 prototype属性

构造函数的属性 constructor

指向对象的父函数的构造函数

判断一个对象是否是另一个对象的实例化，使用instanceof运算符

原型对象 prototype

作用：主要用来继承，公用的属性和方法存在原型对象上，私有的属性和方法放在构造函数内

原型链

一个对象的属性或者方法，自身如果没有，则去他的原型对象上查找，如果也没有呢，原型对象上有一个__proto__属性，则沿着__proto__属性继续向上去查找，直到找到位置，如果都没有，则为null

闭包

• 定义在函数内部的函数
• 在函数内部可以引用父函数的变量和参数
• 不会被垃圾回收机制回收
• 优点 ： 隔离作用域； 变量常驻内存，不会被销毁；
• 缺点 ： 使用不当，会造成内存泄露

//实现计数器
function count(){
    var num = 0;
    return function(){
        alert(++num)
    }
}
var f = count();
f();
f();

//通过闭包获取元素对应的索引值
for(var i = 0; i< li.length; i++){
    (function(n){
        li[n].onclick = function(){
            console.log(n)
        }
    })(i)
}

函数的属性和方法

• arguments对象： arguments.length;获取实参的个数，是一个伪数组
• length: 函数的属性，获取形参的个数；
• call()方法和apply()方法
  • 修改this指向，并调用执行函数
  • 第一个参数为对象，接受多个参数
  • call()方法的参数是一一罗列的
  • apply()方法的参数是以数组的形式传递的

自执行函数

• !(function(){})()
• (function(){}())
• ;(function(){})()

面向对象封装 继承 和 多态

1. 封装

• 函数封装
• 闭包封装

面向对象封装方式：

工厂模式
构造函数模式
原型对象模式
构造函数和原型对象混合模式

• in运算符
  判断一个对象是否存在某个属性和方法，得到的结果是一个boolean值

• hasOwnProperty()
  判断一个方法或者是属性是自身的还是从原型链上继承的

2. 继承

• 使用call()和apply()方法 :

//父构造函数
　function Animal(){
　　　　this.species = "动物";
　}

//cat继承Animal
function Cat(name,color){
    //将父对象的构造函数绑定在子对象上
　　　　Animal.call(this);
　　　　this.name = name;
　　　　this.color = color;
}
　　var cat1 = new Cat("大毛","黄色");
　　alert(cat1.species); // 动物

• 使用prototype属性 ：先继承后修改prototype的指向

//继承
　  Cat.prototype = new Animal();
//修改prototype指向
　　Cat.prototype.constructor = Cat;
　　var cat1 = new Cat("大毛","黄色");
　　alert(cat1.species); // 动物

• 通过拷贝继承

function extend2(Child, Parent) {
　　　　var p = Parent.prototype;
　　　　var c = Child.prototype;
　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　}
　　}