javascript 是一門(mén)弱類(lèi)型,動(dòng)態(tài)腳本語(yǔ)言(所有變量通過(guò)var聲明,不需要用int char....).它的出現(xiàn)主要是為了操作DOM節(jié)點(diǎn).
主要制作web動(dòng)態(tài)效果,前后臺(tái)的數(shù)據(jù)交互(通過(guò)jsonp ajax從后臺(tái)拿數(shù)據(jù),jsonp是利用script的跨域能力).
優(yōu)點(diǎn):閉包,對(duì)象/數(shù)組字面量(不需要像其他語(yǔ)言一樣new出來(lái),可以直接使用字面量),原型,函數(shù)是第一類(lèi)[一等公民][意思是,函數(shù)也是值,可以當(dāng)作另一個(gè)函數(shù)的參數(shù)]
1.javascript 三大組成部分 core DOM BOM
core ECMAScript 是javascript語(yǔ)言的標(biāo)準(zhǔn), javascript是該標(biāo)準(zhǔn)的具體實(shí)現(xiàn).(ActionScipt/TypeScript/javascript) .現(xiàn)在是第六版ES6 2015定稿,IE10,9還不支持
babel 將EC6的語(yǔ)法代碼轉(zhuǎn)換成ES5的代碼
這門(mén)語(yǔ)言的語(yǔ)法(語(yǔ)句(分號(hào)結(jié)束之前的那一句),表達(dá)式,分號(hào),注釋),數(shù)據(jù)類(lèi)型,變量,函數(shù),對(duì)象,數(shù)組
語(yǔ)句:if(true) {
? ? ? ? ? ? ? var a = "A";
}else {
? ? ? ? ? ? ? var a = "B";
}
表達(dá)式:[求值]
var a = (true) ? "A" : "B";
function say(a) {
? ? ? ? ? ? ? conslole.log(a)
}
say((true)? "A" :"B")
關(guān)鍵字[for/while/do..while/switch/if/else]
return/break/continue
return 返回值,只能使用在函數(shù)內(nèi)部,return之后的語(yǔ)句不再執(zhí)行
break 跳出最近循環(huán) for/while/do..while/switch]
continue 跳出當(dāng)此循環(huán)for/while/do..while]
變量
只有在函數(shù)內(nèi)部通過(guò)var定義的變量才是局部變量,js在EC6之前只有函數(shù)級(jí)作用域
let 使js擁有塊級(jí)作用域,塊級(jí)for,if/else/while...大括號(hào)內(nèi)
標(biāo)識(shí)符[變量/函數(shù)的命名]的命名:
a.不能以數(shù)字開(kāi)頭,只能使用字母,下劃線,$開(kāi)頭? b.中間不能有空格,區(qū)分大小寫(xiě) c.不能使用關(guān)鍵字,保留字 d.不要使用name/top...命名? e.駝峰式命名,
數(shù)據(jù)類(lèi)型
基本數(shù)據(jù)類(lèi)型(原始類(lèi)型):Number(不區(qū)分浮點(diǎn)型,整型) String? Null Undefined Boolean Symbol[es6新增](生成唯一的值).基本數(shù)據(jù)類(lèi)型原始值,按值傳遞
除了基本數(shù)據(jù)類(lèi)型之外都是對(duì)象 .包括{} [] 正則 函數(shù).
復(fù)合數(shù)據(jù)類(lèi)型 對(duì)象/數(shù)組,按引用傳遞
運(yùn)算符
算術(shù)運(yùn)算符 + - * / %
邏輯運(yùn)算符 && || != (短路操作,會(huì)將操作數(shù)轉(zhuǎn)換成布爾值) var a = document.documentElement.scrollTop || document.body.scrollTop;
哪些值會(huì)轉(zhuǎn)換成false ""/undifiend/0/null/NaN為false. 注意:NaN === NaN ,{}==={}都是false
三目運(yùn)算符:(confition)?ca:c2? typeof("") 二進(jìn)制的左移右移 1 << 4 , 1 >> 2
全局函數(shù)
setInterval()
setTimeout()
parseInt()
parseFloat()
內(nèi)置的對(duì)象
Math Math.PI 是屬性/Math.random() 是0-1之間的隨機(jī)小數(shù)? //提供math相關(guān)屬性及方法
Date 提供日期時(shí)間,獲取年月日,時(shí)分秒
JSON(ES5之后新增) JSON.parse(strJson) 解析字符串,返回對(duì)象
JSON.stringify(obj) parse逆操作 將對(duì)象轉(zhuǎn)換成JSON格式的字符串
RegExp 當(dāng)正則是動(dòng)態(tài)的,不確定的,包含變量的,使用構(gòu)造函數(shù)的方式創(chuàng)建正則
函數(shù),某個(gè)功能的代碼片段
函數(shù),變量都會(huì)提升[hosting]
1.具名函數(shù)
函數(shù)的聲明 function fn(){}
函數(shù)的表達(dá)式 var foo =? function(){} 調(diào)用必須在聲明表達(dá)式之后
2.匿名函數(shù)
setTimeout(function(){})
立即執(zhí)行函數(shù)[IIFE]
function(){}() 此處報(bào)錯(cuò),原因是js引擎將該語(yǔ)言當(dāng)成是函數(shù)的聲明
(function(){}()) 將函數(shù)當(dāng)成是表達(dá)式執(zhí)行
(function(){})()
js程序的執(zhí)行
a.首先進(jìn)入全局執(zhí)行環(huán)境,js引擎將變量跟函數(shù)提升 ,入棧
b.當(dāng)某個(gè)函數(shù)執(zhí)行時(shí),進(jìn)入該函數(shù)的執(zhí)行環(huán)境,局部變量跟局部函數(shù)提升,入棧
c.該函數(shù)內(nèi)部存在函數(shù)執(zhí)行時(shí),重復(fù)b步驟,入棧
d.函數(shù)執(zhí)行完,出桟
變量先從自身作用域找,找不到沿著作用域鏈往上找,直到window全局作用域
函數(shù)默認(rèn)返回值,undefiend.(用來(lái)求值的需要有返回值 return)求和 求絕對(duì)值....
對(duì)象/數(shù)組
對(duì)象:鍵值對(duì)[屬性]的集合,當(dāng)屬性為函數(shù)的時(shí)候,稱(chēng)為方法
對(duì)象屬性的訪問(wèn)方式:a.點(diǎn)訪問(wèn)法 b.中括號(hào)訪問(wèn)法(有非法標(biāo)識(shí)符(空格..)時(shí)使用或者屬性是變量的時(shí)候)[]
var.obj = {}
obj.name = "shafee" 添加屬性
delete obj.name 去掉屬性
遍歷一個(gè)對(duì)象
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ù)組中的元素通過(guò)下標(biāo)訪問(wèn),下標(biāo)從0開(kāi)始
var arr = [1,2,3]; 定義數(shù)組
arr.length 數(shù)組的長(zhǎng)度,可讀可寫(xiě)
清空數(shù)組 arr = []; arr.length = 0;
數(shù)組的方法:
arr.push()
arr.pop()
arr.unshift()
arr.shift()
arr.slice(startIndex,endIndex) 復(fù)制
arr.splice(startIndex,deleteCount,arg1,arg2...) 剪切
arr.sort()? 排序
arr.indexOf() 查找數(shù)組是否存在某一個(gè)元素
arr.join()? ? 將數(shù)組轉(zhuǎn)換成字符串
arr.forEach(function(key,index,array){console.log(key,index)}) 遍歷數(shù)組
aar.map() 返回跟原數(shù)組一樣長(zhǎng)度的數(shù)組
arr.filter() 篩選數(shù)組元素
arr.every() 判斷數(shù)組中是否每個(gè)元素都滿(mǎn)足條件.返回布爾值
arr.some() 判斷數(shù)組中是否至少有一個(gè)元素都滿(mǎn)足條件,返回布爾值
字符串方法:
str.indexOf(“a”)? 返回”a”在字符串中的開(kāi)始下標(biāo)
str.toUpperCase() 返回大寫(xiě)字符
str.toLowerCase() 返回小寫(xiě)字符
str.substring(start, end) 截取字符串
str.trim()? ? 去掉首尾空格
str.replace()? 替換字符串
str.match()? ? 匹配字符串
str.search()? ? 搜索字符串
str.split()? ? 字符串轉(zhuǎn)換成數(shù)組
2.DOM [document object model]
操作[獲取/新增/刪除/替換]文檔中的節(jié)點(diǎn)[元素節(jié)點(diǎn),文本節(jié)點(diǎn),屬性節(jié)點(diǎn)]
獲取元素接口:
?document.getElementById()
document.getElementsByTagName()
document.querySelector(selector)
document.querySelectorAll(selector)
創(chuàng)建元素:
document.createElement("div")
插入元素:
document.body.appendChild(newEle);
document.body.insertBefore(childNode,newEle);
復(fù)制元素:
ele.cloneNode(bol)
替換元素:
parentNode.replaceChild(newChild,targetChild)
移除元素:
ele.remove()
ele.parentNode.removeChild(ele)
屬性操作:
獲取屬性: ele.getAttribute(name)
設(shè)置屬性: ele.setAttribute(name,value)
移除屬性: ele.removeAttribute(name)
文本操作:
一般元素: ele.innerHTML = ""
表單元素: input.value = "username"
DOM樹(shù),理清元素間的關(guān)系
兄弟元素 ele.previousElementSibling / ele.nextElementSibling
父元素? ele.parentNode / ele.parentElement
子元素 ele.children
3.BOM? browser object model 瀏覽器對(duì)象模型
location
location.)
location.reload()? 刷新
location.search
history
history.go(1)? ? history.forward()
history.back(-1) history.back()
navigator.userAgent 用戶(hù)代理,判斷用戶(hù)使用的瀏覽器種類(lèi)和設(shè)備
4.js動(dòng)畫(huà)
使用計(jì)時(shí)器, setInterval/setTimeout
請(qǐng)求動(dòng)畫(huà)楨: requestAnimationFrame
DOM動(dòng)畫(huà),改變?cè)氐哪硞€(gè)css屬性[width/height/left/top/opacity],通過(guò)元素的變化
5.事件流
捕獲/事件目標(biāo)/冒泡
事件的綁定:? on+type綁定方式 addEventListener(type,handle,false)
解綁: ? ? ? ele.onclick = null; ele.removeElementListener(type,handle,false)
取消冒泡:? ? cancelBubble = true? ? e.stopPropagation()
阻止默認(rèn)事件? return false ? ? e.preventDefault();
對(duì)應(yīng)的事件
鼠標(biāo)事件:click/dblclick/mousemove/mousedown/mouseup/mouseover/mouseout/mouseenter[不冒泡]/mouseleave[不冒泡]/contextmenu
mousewheel/DOMMouseScroll
鍵盤(pán)事件: keydown/keypress/keyup e.keyCode 鍵值
觸屏事件: touchstrat/touchmove/touchend
指針事件: pointerEvent
表單事件: input/focus/blur/change/submit
window:? resize/scroll/load/error
事件委托
6.常見(jiàn)動(dòng)畫(huà)效果
tab切換 / 大圖滾動(dòng) / 放大鏡 /右側(cè)懸浮導(dǎo)航條 / 點(diǎn)擊返回頂部 / 碰壁反彈 /
瀑布流 / 懶加載 / 預(yù)加載 / 新浪微博 / TodoList案例 / 自定義滾動(dòng)條 /
蒙層彈窗拖拽 / JSONP / 鍵盤(pán)控制塊移動(dòng) / 彩票 / 全選反選 / 三級(jí)聯(lián)動(dòng)...
7.插件,類(lèi)庫(kù)
hammer.js (移動(dòng)端手勢(shì))
swiper.js (輪播圖)
fastclick.js (解決點(diǎn)透問(wèn)題)
tween.js? (動(dòng)畫(huà)庫(kù))
JQuery.js/zepto.js
8.正則表達(dá)式,掌握表單的value驗(yàn)證
/^1[0-9]{10}$/.test(string)
9.jQuery
獲取元素 ? ?
?? $(selector)
樣式獲取設(shè)置
$(ele).css("color")
$(ele).css("color","red")
$(ele).css({
? ? ? ? ? ? ? ? ?"color" :"red"
})
元素的寬高
$(ele).width()
$(ele).innerWidth();
$(ele).outerWidth();
$(ele).oouterWidth(true);
文本的設(shè)置
$(ele).html()
$(ele).val()
屬性的設(shè)置
$(ele).attr()
$(ele).removeAttr()
$(ele).prop() //操作布爾屬性
$(ele).removeProp()
元素位置
$(ele).offset() 文檔坐標(biāo)? scrollTop+視口坐標(biāo) = 文檔坐標(biāo)
$(ele).position() 相對(duì)定位父級(jí)的坐標(biāo)
DOM
$(ele).siblings() 兄弟元素
$(ele).prev() 上一個(gè)兄弟元素
$(ele).next() 下一個(gè)兄弟元素
$(ele).children() 子元素
$(ele).parents() 直接父元素
$(ele).parents() 所有祖先元素
篩選
$("ul li").eq(0) ul下的第一個(gè)li
$("ul li").find("img") 查找li下的img
$(ele).index() 當(dāng)前元素在所有兄弟元素中的下標(biāo)
$(ele).index("button") 當(dāng)前元素在所有button兄弟元素中的下標(biāo)
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")
動(dòng)畫(huà)效果
$(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", //請(qǐng)求方式
url:"", //接口地址
dataType: "json", //返回?cái)?shù)據(jù)類(lèi)型
data:{//請(qǐng)求參數(shù)
},
success: function (reponse) {
? ? ? ? ? ? ? ? ?//成功回調(diào)
},
error: function() {
? ? ? ? ? ? ? ? ? //失敗回調(diào)
? }
})
工具函數(shù)
$.trim(" string ")
$.fn.extend()? 擴(kuò)展元素的方法
$.extend() 擴(kuò)展全局對(duì)象JQuery的方法
