前端框架技術學習導圖13.1jQuery13.1.1jQuery概述jQuery是一個快速、簡潔的輕量級JavaScript框架，它的設計宗旨是“Writeless,Domore”，即倡導寫更少的代碼，做更多的事情。jQuery封裝了JavaScript中常用的功能代碼，利用強大的選擇器，優化事件處理、DOM操作、特效與動畫等，極大的簡化了JavaScript編程。13.1.2jQuery基本語法在jQuery中，一般使用選擇器(selector)選取指定的HTML元素，并對選取的元素執行操作(action)，基本語法形式為：$(selector).action()。美元符號$相當于jQuery的簡寫，選擇器selector表示查詢的HTML元素。13.1.1jQuery概述下載jQuery庫之后，就可以在HTML文檔中使用script元素進行引用。通過CDN（內容分發網絡）引用jQuery，該方法無需下載jQuery文件到本地，StaticfileCDN、百度、新浪、谷歌和微軟等服務器都存有jQuery。如果網站用戶大部分是國內的，建議使用百度、新浪等國內CDN地址，如果網站用戶是國外的，可以使用谷歌和微軟CDN。13.1.2jQuery基本語法隱藏頁面中所有段落元素13.1.3jQuery選擇器jQuery提供了一系列選擇器，以幫助前端開發者快速查找和定位頁面中的節點，它支持CSS1~CSS3選擇器的寫法，主要包括基本選擇器、層級選擇器、偽類選擇器、屬性選擇器等幾大類別。基本選擇器包括id選擇器、類選擇器、元素選擇器、通配符選擇器以及組合選擇器等。使用$("#id")進行選擇，例如<divid="#div1">div1</div>，可以使用$("#div1")選取。13.1.3jQuery選擇器例如<spanclass=".myclass">span1</span>，可以使用$(".myclass")選取該span元素。元素選擇器是直接根據給定html標記名稱選擇所有的元素。例如$("p")表示選取頁面中所有的p元素。

同時選擇多個不同元素，可以使用組合選擇器。例如$("div,span,p.myclass")，可以同時選取div、span以及class=myclass的p元素。13.1.3jQuery選擇器層級選擇器用來處理文檔中節點之間的各類關系，包括父子關系、兄弟關系、祖孫關系等，對應到選擇器上，則包含子元素選擇器、后代元素選擇器、兄弟元素選擇器、相鄰兄弟元素選擇器。13.1.3jQuery選擇器偽類選擇器放入用法與CSS中的偽元素相似，選擇器以冒號“：”開頭，后面跟上相應的選擇條件，偽類選擇器也稱為過濾選擇器，指的是通過一系列過濾條件匹配所要選取的元素。13.1.3jQuery選擇器屬性選擇器可以匹配包含給定屬性的元素。例如查找所有含有id屬性的div元素，可以寫成$("div[id]")的形式。進一步的，也可以匹配屬性值是某個特定值的元素。選擇name屬性值為newsletter的所有元素，可以使用$("input[name='newsletter']")13.1.4jQuery中的DOM操作獲取和設置元素內容。text()方法用來獲取或設置所選元素的文本內容；html()方法同樣用來獲取或設置所選元素的文本內容，但是會包括HTML標記；val()方法用來設置或返回表單字段的值。13.1.4jQuery中的DOM操作獲取、設置屬性：attr()方法移除屬性:removeAttr()方法創建節點:$(html)添加節點:append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()刪除節點：remove()和empty()修改節點：clone(true)、replacewith和replaceAll、wrap()、wrapAll()、wrapInner()樣式操作：css()、addClass()、removeClass()、hasClass()

13.1.5jQuery對象和DOM對象jQuery對象是通過jQuery中的$符號包裝DOM對象后產生的對象，它可以使用jQuery中的方法。jQuery對象不能直接使用DOM對象中的方法。DOM對象也不能直接使用jQuery對象中的方法。13.1.6jQuery效果隱藏和顯示：hide()和show()方法。淡入淡出效果：fadeIn()、fadeOut()、fadeTo()方法。滑動效果：slideDown()和slideUp()方法。13.2Bootstrap

13.2BootstrapBootstrap來自Twitter公司，是目前最受歡迎的前端框架之一。Bootstrap是基于HTML、CSS、JavaScript的，其目標是為所有開發者、所有應用場景而設計，它的主要特點有：預處理文本：Bootstrap的源碼是基于最流行的CSS預處理腳本Less和Sass開發的，開發者可以采用預編譯的CSS文件進行快速開發，也可以從源碼定制自己需要的樣式；響應式設計：借助CSS的媒體查詢（MediaQuery）功能，Bootstrap的響應式CSS能夠自適應于臺式機、平板電腦和手機等不同設備；瀏覽器支持：目前主流的瀏覽器都支持Bootstrap；簡單易上手：包含功能強大的內置組件，只要有HTML和CSS基礎知識，就可以學習Bootstrap，且代碼完全開源。

13.2Bootstrap13.3Vue

13.3VueVue是一套構建用戶界面的漸進式框架，與其他重量級框架不同的是，Vue采用自底向上增量開發的設計，它的核心庫只關注視圖層，并且非常容易與其它庫或已有項目整合。另一方面，Vue完全有能力采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。13.4React

13.4ReactReact是一個聲明式，高效且靈活的用于構建用戶界面的JavaScript庫，使用React可以將一些簡短、獨立的代碼片段組合成復雜的UI界面，這些代碼片段被稱作“組件”。React最早起源于Facebook的內部項目，主要用來架設Instagram的網站，由于React的設計思想獨特，性能出眾，