javascript 是一門弱類型,動態(tài)腳本語言(所有變量通過var聲明,不需要用int char....).它的出現(xiàn)主要是為了操作DOM節(jié)點.

主要制作web動態(tài)效果,前后臺的數(shù)據(jù)交互(通過jsonp ajax從后臺拿數(shù)據(jù),jsonp是利用script的跨域能力).

優(yōu)點:閉包,對象/數(shù)組字面量(不需要像其他語言一樣new出來,可以直接使用字面量),原型,函數(shù)是第一類[一等公民][意思是,函數(shù)也是值,可以當作另一個函數(shù)的參數(shù)]

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

core ECMAScript 是javascript語言的標準, javascript是該標準的具體實現(xiàn).(ActionScipt/TypeScript/javascript) .現(xiàn)在是第六版ES6 2015定稿,IE10,9還不支持

babel 將EC6的語法代碼轉換成ES5的代碼

這門語言的語法(語句(分號結束之前的那一句),表達式,分號,注釋),數(shù)據(jù)類型,變量,函數(shù),對象,數(shù)組

語句: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 返回值,只能使用在函數(shù)內(nèi)部,return之后的語句不再執(zhí)行

break 跳出最近循環(huán) for/while/do..while/switch]

continue 跳出當此循環(huán)for/while/do..while]

變量

只有在函數(shù)內(nèi)部通過var定義的變量才是局部變量,js在EC6之前只有函數(shù)級作用域

let 使js擁有塊級作用域,塊級for,if/else/while...大括號內(nèi)

標識符[變量/函數(shù)的命名]的命名:

a.不能以數(shù)字開頭,只能使用字母,下劃線,$開頭? b.中間不能有空格,區(qū)分大小寫 c.不能使用關鍵字,保留字 d.不要使用name/top...命名? e.駝峰式命名,

數(shù)據(jù)類型

基本數(shù)據(jù)類型(原始類型):Number(不區(qū)分浮點型,整型) String? Null Undefined Boolean Symbol[es6新增](生成唯一的值).基本數(shù)據(jù)類型原始值,按值傳遞

除了基本數(shù)據(jù)類型之外都是對象 .包括{} [] 正則 函數(shù).

復合數(shù)據(jù)類型 對象/數(shù)組,按引用傳遞

運算符

算術運算符 + - * / %

邏輯運算符 && || != (短路操作,會將操作數(shù)轉換成布爾值) 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

全局函數(shù)

setInterval()

setTimeout()

parseInt()

parseFloat()

內(nèi)置的對象

Math Math.PI 是屬性/Math.random() 是0-1之間的隨機小數(shù)? //提供math相關屬性及方法

Date 提供日期時間,獲取年月日,時分秒

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

JSON.stringify(obj) parse逆操作 將對象轉換成JSON格式的字符串

RegExp 當正則是動態(tài)的,不確定的,包含變量的,使用構造函數(shù)的方式創(chuàng)建正則

函數(shù),某個功能的代碼片段

函數(shù),變量都會提升[hosting]

1.具名函數(shù)

函數(shù)的聲明 function fn(){}

函數(shù)的表達式 var foo =? function(){} 調(diào)用必須在聲明表達式之后

2.匿名函數(shù)

setTimeout(function(){})

立即執(zhí)行函數(shù)[IIFE]

function(){}() 此處報錯,原因是js引擎將該語言當成是函數(shù)的聲明

(function(){}()) 將函數(shù)當成是表達式執(zhí)行

(function(){})()

js程序的執(zhí)行

a.首先進入全局執(zhí)行環(huán)境,js引擎將變量跟函數(shù)提升 ,入棧

b.當某個函數(shù)執(zhí)行時,進入該函數(shù)的執(zhí)行環(huán)境,局部變量跟局部函數(shù)提升,入棧

c.該函數(shù)內(nèi)部存在函數(shù)執(zhí)行時,重復b步驟,入棧

d.函數(shù)執(zhí)行完,出桟

變量先從自身作用域找,找不到沿著作用域鏈往上找,直到window全局作用域

函數(shù)默認返回值,undefiend.(用來求值的需要有返回值 return)求和 求絕對值....

對象/數(shù)組

對象:鍵值對[屬性]的集合,當屬性為函數(shù)的時候,稱為方法

對象屬性的訪問方式: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

數(shù)組: 值的有序集合

數(shù)組中的元素通過下標訪問,下標從0開始

var arr = [1,2,3]; 定義數(shù)組

arr.length 數(shù)組的長度,可讀可寫

清空數(shù)組 arr = []; arr.length = 0;

數(shù)組的方法:

arr.push()

arr.pop()

arr.unshift()

arr.shift()

arr.slice(startIndex,endIndex) 復制

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

arr.sort()? 排序

arr.indexOf() 查找數(shù)組是否存在某一個元素

arr.join()? ? 將數(shù)組轉換成字符串

arr.forEach(function(key,index,array){console.log(key,index)}) 遍歷數(shù)組

aar.map() 返回跟原數(shù)組一樣長度的數(shù)組

arr.filter() 篩選數(shù)組元素

arr.every() 判斷數(shù)組中是否每個元素都滿足條件.返回布爾值

arr.some() 判斷數(shù)組中是否至少有一個元素都滿足條件,返回布爾值

字符串方法:

str.indexOf(“a”)? 返回”a”在字符串中的開始下標

str.toUpperCase() 返回大寫字符

str.toLowerCase() 返回小寫字符

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

str.trim()? ? 去掉首尾空格

str.replace()? 替換字符串

str.match()? ? 匹配字符串

str.search()? ? 搜索字符串

str.split()? ? 字符串轉換成數(shù)組

2.DOM [document object model]

操作[獲取/新增/刪除/替換]文檔中的節(jié)點[元素節(jié)點,文本節(jié)點,屬性節(jié)點]

獲取元素接口:

?document.getElementById()

document.getElementsByTagName()

document.querySelector(selector)

document.querySelectorAll(selector)

創(chuàng)建元素:

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.)

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 / 鍵盤控制塊移動 / 彩票 / 全選反選 / 三級聯(lián)動...

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()

數(shù)據(jù)交互

$.ajax({

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

url:"", //接口地址

dataType: "json", //返回數(shù)據(jù)類型

data:{//請求參數(shù)

},

success: function (reponse) {

? ? ? ? ? ? ? ? ?//成功回調(diào)

},

error: function() {

? ? ? ? ? ? ? ? ? //失敗回調(diào)

? }

})

工具函數(shù)

$.trim(" string ")

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

$.extend() 擴展全局對象JQuery的方法