jquery前端 levelonejqueryjquery

1、DUYI EDUCATIONjQuery陳思彤CONTENTSDUYI EDUCATION01 什么是jQuery？3jQuery是什么？jQuery其實(shí)就是一堆的js函數(shù)( js庫(kù))，也是普通的js而已，不是全新的東西，不要畏懼!4jQuery 標(biāo)語(yǔ)write less ， do more5陳式英語(yǔ)翻譯人狠，話不多CONTENTSDUYI EDUCATION02 Why jQuery？7為什么要用jQuery？(非設(shè)計(jì)思想上的好處)jQuery面向用戶良好的設(shè)計(jì)使得在使用過(guò)程中徹底 了你記憶原生操作DOM的接口jQuery中包含多個(gè)可重用的函數(shù)，用來(lái)輔助我們簡(jiǎn)化javascript開(kāi)發(fā)jQu

2、ery在半數(shù)以上并沒(méi)有復(fù)雜交互的網(wǎng)站中得以大面積使用，因?yàn)樗鼈冃枰膬H僅是一些兼容瀏覽器而又呈現(xiàn)酷炫效果動(dòng)畫(huà)的頁(yè)面。（jQuery出到3，但大公司pc端依然用1.x版本、移動(dòng)端2.x版本）jQuery改變了數(shù)百萬(wàn)人編寫(xiě)JavaScript的方式，當(dāng)然部分人已經(jīng)覺(jué)得時(shí)過(guò)境遷，組件化，工程化，大行其道，但請(qǐng)不要忘記他的前端開(kāi)發(fā)者的啟蒙意義！且很多公司很多項(xiàng)目依然需要他，所以筆面試必會(huì)！8YoudontNeedjQuery?窮途 都要愛(ài)，不學(xué)到全行業(yè)棄用不痛快CONTENTSDUYI EDUCATION03 jQuery學(xué)習(xí)注意點(diǎn)10jQuery學(xué)習(xí)注意點(diǎn)jQuery只是輔助工具，不能完全替代js，

3、二者并存當(dāng)方式出現(xiàn)在項(xiàng)目中jQuery很龐雜，先學(xué)使用再學(xué)思想jQuery方法很多，按需學(xué)習(xí)，把常用的有價(jià)值的學(xué)會(huì)jQuery api 可以現(xiàn)查現(xiàn)用CONTENTSDUYI EDUCATION04 jQuery 使用12jQuery使用-起步引入jQuery工具庫(kù)cdn：/cdn/#a2下載地址：/jquery-info12213jQuery使用-起步地址（下載 api查詢等）:中文：/英文原版：/14jQuery使用-起步核心全局函數(shù)：$

4、(jQuery)一頓操作猛如虎，全從$開(kāi)始擼擼代碼從選擇開(kāi)始:選擇元素：$(); 此函數(shù)可以傳遞多種參數(shù)，返回值是對(duì)象（jq對(duì)象）參數(shù)規(guī)則：css selector、 jquery unique selector null、undefined、dom$(function() $(document).ready()css selector 和 context /jquery/jquery_ref_selectors.asp15jQuery使用-精髓選擇元素循環(huán)操作鏈?zhǔn)秸{(diào)用16jQuery實(shí)例方法-DOM操作進(jìn)一步選擇元素相關(guān)方法：.get().e

5、q().find().filter().not().is().has().add() 集中操作 .end() 回退操作17jQuery實(shí)例方法-DOM操作取賦值相關(guān)方法：.html()、.text()、.val()、.size().addClass 、.removeClass、.hasClass.css.attr()、.prop()注意：1. 盡量避免直接添加行間樣式，因?yàn)槠錂?quán)重過(guò)高 ，這樣不利于響應(yīng)式設(shè)計(jì)，破壞了c3+h5優(yōu)雅的解決方案2. attr和prop的區(qū)別：jQuery認(rèn)為：attribute的checked、selected、disabled就是表示該屬性初始狀態(tài)的值， prop

6、erty的checked、selected、disabled才表示該屬性實(shí)時(shí)狀態(tài)的值(值為true或false)18jQuery實(shí)例方法-DOM操作取賦值相關(guān)方法：.val()19jQuery實(shí)例方法-DOM操作基于jQuery對(duì)象查改刪增相關(guān)方法：.next()、.prev()、.preAll()、.nextAll().prevUntil() 、.nextUntil().siblings().parent()、.parents()、.offsetParent()、.closest().slice().insertAfter()、.After().insertBefore()、.before(

7、).appendTo()、.append().prependTo()、.prepend().remove()、.detach()$() 參數(shù)：標(biāo)簽字符串 創(chuàng)建jQuery對(duì)象20jQuery實(shí)例方法-DOM操作基于jQuery對(duì)象增刪改查相關(guān)方法：.wrap()、 wrapInner()、wrapAll、unWrap.clone()21jQuery實(shí)例方法- 綁定：.on().one().off().trigger().click/keydown/mouseenter22jQuery實(shí)例方法- 對(duì)象兼容的 對(duì)象：e.pageX、e.clienX、e.which、e.buttone.preven

8、tDefault() e.stopPropagation() return false;23jQuery實(shí)例方法-動(dòng)畫(huà)動(dòng)畫(huà)相關(guān)方法：.hide()、.show()、.toggle()參數(shù)：null 或 （duration, easing, callblack）.fadeIn、.fadeout 、.fadeToggle、.fadeTo()參數(shù)：null或 （duration, opacity, easing, callblack）.slideDown()、.slideUp()、.slideToggle()參數(shù)：null或 （duration, opacity, easing, callblack

9、）.animate()參數(shù)：(target duration easing callback）.stop() .finish()參數(shù)：true false.delay()jQuery.fx.off = true 運(yùn)動(dòng)的開(kāi)關(guān)24jQuery實(shí)例方法-動(dòng)畫(huà)插件插件名稱：jQuery Easing Plugin:目的:用于擴(kuò)展jQuery動(dòng)畫(huà)過(guò)渡效果鏈接地址：/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js25jQuery實(shí)例方法-位置圖形位置坐標(biāo)圖形大小相關(guān)方法：.offset().posi

10、tion().scrollTop() 、.scrollLeft().width()、.height().innerWidth()、.outerWidth()、.innerHeight()、.outerWidth()26jQuery實(shí)例方法-遍歷索引遍歷索引相關(guān)方法：.each()，補(bǔ)充.children().index()27jQuery工具方法$.type() 判斷數(shù)據(jù)類(lèi)型 $.isArray()$.isFunction()$.isWindow$.trim() 消除空格$.proxy() 改變this指向$.noConflict()防止沖突$.each() 循環(huán) map.$.parseJSON() 嚴(yán)格json字符串轉(zhuǎn)換成對(duì)象 原生JSON.parse();$.makeArray() 類(lèi)數(shù)組轉(zhuǎn)換成數(shù)組28