javascript 是一门弱类型,动态脚本语言(所有变量通过var声明,不需要用int char....).它的出现主要是为了操作DOM节点.

主要制作web动态效果,前后台的数据交互(通过jsonp ajax从后台拿数据,jsonp是利用script的跨域能力).

优点:闭包,对象/数组字面量(不需要像其他语言一样new出来,可以直接使用字面量),原型,函数是第一类[一等公民][意思是,函数也是值,可以当作另一个函数的参数]

1.javascript 三大组成部分 core DOM BOM

core ECMAScript 是javascript语言的标准, javascript是该标准的具体实现.(ActionScipt/TypeScript/javascript) .现在是第六版ES6 2015定稿,IE10,9还不支持

babel 将EC6的语法代码转换成ES5的代码

这门语言的语法(语句(分号结束之前的那一句),表达式,分号,注释),数据类型,变量,函数,对象,数组

语句:if(true) {

              var a = "A";

}else {

              var a = "B";

}

表达式:[求值]

var a = (true) ? "A" : "B";

function say(a) {

              conslole.log(a)

}

say((true)? "A" :"B")

关键字[for/while/do..while/switch/if/else]

return/break/continue

return 返回值,只能使用在函数内部,return之后的语句不再执行

break 跳出最近循环 for/while/do..while/switch]

continue 跳出当此循环for/while/do..while]

变量

只有在函数内部通过var定义的变量才是局部变量,js在EC6之前只有函数级作用域

let 使js拥有块级作用域,块级for,if/else/while...大括号内

标识符[变量/函数的命名]的命名:

a.不能以数字开头,只能使用字母,下划线,$开头  b.中间不能有空格,区分大小写 c.不能使用关键字,保留字 d.不要使用name/top...命名  e.驼峰式命名,

数据类型

基本数据类型(原始类型):Number(不区分浮点型,整型) String  Null Undefined Boolean Symbol[es6新增](生成唯一的值).基本数据类型原始值,按值传递

除了基本数据类型之外都是对象 .包括{} [] 正则 函数.

复合数据类型 对象/数组,按引用传递

运算符

算术运算符 + - * / %

逻辑运算符 && || != (短路操作,会将操作数转换成布尔值) var a = document.documentElement.scrollTop || document.body.scrollTop;

哪些值会转换成false ""/undifiend/0/null/NaN为false. 注意:NaN === NaN ,{}==={}都是false

三目运算符:(confition)?ca:c2  typeof("") 二进制的左移右移 1 << 4 , 1 >> 2

全局函数

setInterval()

setTimeout()

parseInt()

parseFloat()

内置的对象

Math Math.PI 是属性/Math.random() 是0-1之间的随机小数  //提供math相关属性及方法

Date 提供日期时间,获取年月日,时分秒

JSON(ES5之后新增) JSON.parse(strJson) 解析字符串,返回对象

JSON.stringify(obj) parse逆操作 将对象转换成JSON格式的字符串

RegExp 当正则是动态的,不确定的,包含变量的,使用构造函数的方式创建正则

函数,某个功能的代码片段

函数,变量都会提升[hosting]

1.具名函数

函数的声明 function fn(){}

函数的表达式 var foo =  function(){} 调用必须在声明表达式之后

2.匿名函数

setTimeout(function(){})

立即执行函数[IIFE]

function(){}() 此处报错,原因是js引擎将该语言当成是函数的声明

(function(){}()) 将函数当成是表达式执行

(function(){})()

js程序的执行

a.首先进入全局执行环境,js引擎将变量跟函数提升 ,入栈

b.当某个函数执行时,进入该函数的执行环境,局部变量跟局部函数提升,入栈

c.该函数内部存在函数执行时,重复b步骤,入栈

d.函数执行完,出桟

变量先从自身作用域找,找不到沿着作用域链往上找,直到window全局作用域

函数默认返回值,undefiend.(用来求值的需要有返回值 return)求和 求绝对值....

对象/数组

对象:键值对[属性]的集合,当属性为函数的时候,称为方法

对象属性的访问方式:a.点访问法 b.中括号访问法(有非法标识符(空格..)时使用或者属性是变量的时候)[]

var.obj = {}

obj.name = "shafee" 添加属性

delete obj.name 去掉属性

遍历一个对象

var o = {a:1,b:2,c:3}

for(var i in o){

               console.log(i,o[i])

}

result:

a 1

b 2

c 3

数组: 值的有序集合

数组中的元素通过下标访问,下标从0开始

var arr = [1,2,3]; 定义数组

arr.length 数组的长度,可读可写

清空数组 arr = []; arr.length = 0;

数组的方法:

arr.push()

arr.pop()

arr.unshift()

arr.shift()

arr.slice(startIndex,endIndex) 复制

arr.splice(startIndex,deleteCount,arg1,arg2...) 剪切

arr.sort()  排序

arr.indexOf() 查找数组是否存在某一个元素

arr.join()    将数组转换成字符串

arr.forEach(function(key,index,array){console.log(key,index)}) 遍历数组

aar.map() 返回跟原数组一样长度的数组

arr.filter() 筛选数组元素

arr.every() 判断数组中是否每个元素都满足条件.返回布尔值

arr.some() 判断数组中是否至少有一个元素都满足条件,返回布尔值

字符串方法:

str.indexOf(“a”)  返回”a”在字符串中的开始下标

str.toUpperCase() 返回大写字符

str.toLowerCase() 返回小写字符

str.substring(start, end) 截取字符串

str.trim()    去掉首尾空格

str.replace()  替换字符串

str.match()    匹配字符串

str.search()    搜索字符串

str.split()    字符串转换成数组

2.DOM [document object model]

操作[获取/新增/删除/替换]文档中的节点[元素节点,文本节点,属性节点]

获取元素接口:

 document.getElementById()

document.getElementsByTagName()

document.querySelector(selector)

document.querySelectorAll(selector)

创建元素:

document.createElement("div")

插入元素:

document.body.appendChild(newEle);

document.body.insertBefore(childNode,newEle);

复制元素:

ele.cloneNode(bol)

替换元素:

parentNode.replaceChild(newChild,targetChild)

移除元素:

ele.remove()

ele.parentNode.removeChild(ele)

属性操作:

获取属性: ele.getAttribute(name)

设置属性: ele.setAttribute(name,value)

移除属性: ele.removeAttribute(name)

文本操作:

一般元素: ele.innerHTML = ""

表单元素: input.value = "username"

DOM树,理清元素间的关系

兄弟元素 ele.previousElementSibling / ele.nextElementSibling

父元素  ele.parentNode / ele.parentElement

子元素 ele.children

3.BOM  browser object model 浏览器对象模型

location

location.href = "http://www.baidu.com"

location.replace("http://www.baidu.com")

location.reload()  刷新

location.search

history

history.go(1)    history.forward()

history.back(-1) history.back()

navigator.userAgent 用户代理,判断用户使用的浏览器种类和设备

4.js动画

使用计时器, setInterval/setTimeout

请求动画桢: requestAnimationFrame

DOM动画,改变元素的某个css属性[width/height/left/top/opacity],通过元素的变化

5.事件流

捕获/事件目标/冒泡

事件的绑定:  on+type绑定方式 addEventListener(type,handle,false)

解绑:       ele.onclick = null; ele.removeElementListener(type,handle,false)

取消冒泡:    cancelBubble = true    e.stopPropagation()

阻止默认事件  return false     e.preventDefault();

对应的事件

鼠标事件:click/dblclick/mousemove/mousedown/mouseup/mouseover/mouseout/mouseenter[不冒泡]/mouseleave[不冒泡]/contextmenu

mousewheel/DOMMouseScroll

键盘事件: keydown/keypress/keyup e.keyCode 键值

触屏事件: touchstrat/touchmove/touchend

指针事件: pointerEvent

表单事件: input/focus/blur/change/submit

window:  resize/scroll/load/error

事件委托

6.常见动画效果

tab切换 / 大图滚动 / 放大镜 /右侧悬浮导航条 / 点击返回顶部 / 碰壁反弹 /

瀑布流 / 懒加载 / 预加载 / 新浪微博 / TodoList案例 / 自定义滚动条 /

蒙层弹窗拖拽 / JSONP / 键盘控制块移动 / 彩票 / 全选反选 / 三级联动...

7.插件,类库

hammer.js (移动端手势)

swiper.js (轮播图)

fastclick.js (解决点透问题)

tween.js  (动画库)

JQuery.js/zepto.js

8.正则表达式,掌握表单的value验证

/^1[0-9]{10}$/.test(string)

9.jQuery

获取元素    

   $(selector)

样式获取设置

$(ele).css("color")

$(ele).css("color","red")

$(ele).css({

                 "color" :"red"

})

元素的宽高

$(ele).width()

$(ele).innerWidth();

$(ele).outerWidth();

$(ele).oouterWidth(true);

文本的设置

$(ele).html()

$(ele).val()

属性的设置

$(ele).attr()

$(ele).removeAttr()

$(ele).prop() //操作布尔属性

$(ele).removeProp()

元素位置

$(ele).offset() 文档坐标  scrollTop+视口坐标 = 文档坐标

$(ele).position() 相对定位父级的坐标

DOM

$(ele).siblings() 兄弟元素

$(ele).prev() 上一个兄弟元素

$(ele).next() 下一个兄弟元素

$(ele).children() 子元素

$(ele).parents() 直接父元素

$(ele).parents() 所有祖先元素

筛选

$("ul li").eq(0) ul下的第一个li

$("ul li").find("img") 查找li下的img

$(ele).index() 当前元素在所有兄弟元素中的下标

$(ele).index("button") 当前元素在所有button兄弟元素中的下标

class操作

$(ele).addClass()

$(ele).removeClass()

$(ele).toggleClass()

事件绑定

$(ele).on("click",fn)

$(ele).off("click",fn)

事件委托

$("ul").on("click","li",fn)

$(ele).one("click",fn)

事件模拟

$(ele).trigger("click")

动画效果

$(ele).stop().animate({

                       width:100,

height:200

}, 200, callback)

$(ele).show()

$(ele).hide()

$(ele).toggle()

$(ele).fadeIn()

$(ele).fadeOut()

$(ele).fadeToggle()

$(ele).fadeTo()

$(ele).slideUp()

$(ele).slideDown()

$(ele).slideToggle()

数据交互

$.ajax({

methods: "GET", //请求方式

url:"", //接口地址

dataType: "json", //返回数据类型

data:{//请求参数

},

success: function (reponse) {

                 //成功回调

},

error: function() {

                  //失败回调

  }

})

工具函数

$.trim(" string ")

$.fn.extend()  扩展元素的方法

$.extend() 扩展全局对象JQuery的方法