jquery前端 levelonejqueryjquery

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

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

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

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

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

6、erty的checked、selected、disabled才表示該屬性實時狀態(tài)的值(值為true或false)18jQuery實例方法-DOM操作取賦值相關(guān)方法：.val()19jQuery實例方法-DOM操作基于jQuery對象查改刪增相關(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ù)：標簽字符串 創(chuàng)建jQuery對象20jQuery實例方法-DOM操作基于jQuery對象增刪改查相關(guān)方法：.wrap()、 wrapInner()、wrapAll、unWrap.clone()21jQuery實例方法- 綁定：.on().one().off().trigger().click/keydown/mouseenter22jQuery實例方法- 對象兼容的 對象：e.pageX、e.clienX、e.which、e.buttone.preven

8、tDefault() e.stopPropagation() return false;23jQuery實例方法-動畫動畫相關(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 運動的開關(guān)24jQuery實例方法-動畫插件插件名稱：jQuery Easing Plugin:目的:用于擴展jQuery動畫過渡效果鏈接地址：/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js25jQuery實例方法-位置圖形位置坐標圖形大小相關(guān)方法：.offset().posi

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