Web前端技術(shù)課件-13.前端框架技術(shù)

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

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

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

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

13.2Bootstrap13.3Vue

13.3VueVue是一套構(gòu)建用戶界面的漸進(jìn)式框架，與其他重量級(jí)框架不同的是，Vue采用自底向上增量開發(fā)的設(shè)計(jì)，它的核心庫只關(guān)注視圖層，并且非常容易與其它庫或已有項(xiàng)目整合。另一方面，Vue完全有能力采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。13.4React

13.4ReactReact是一個(gè)聲明式，高效且靈活的用于構(gòu)建用戶界面的JavaScript庫，使用React可以將一些簡短、獨(dú)立的代碼片段組合成復(fù)雜的UI界面，這些代碼片段被稱作“組件”。React最早起源于Facebook的內(nèi)部項(xiàng)目，主要用來架設(shè)Instagram的網(wǎng)站，由于React的設(shè)計(jì)思想獨(dú)特，性能出眾，