思圖前端課程3-jquery交互開發(fā)

1、jQuery交互開發(fā)jQuery 簡(jiǎn)介簡(jiǎn)介jQuery是一個(gè)JavaScript函數(shù)庫(kù)。jQuery是一個(gè)輕量級(jí)的寫的少，做的多的JavaScript庫(kù)。jQuery庫(kù)包含以下功能：HTML 元素選取HTML 元素操作CSS 操作HTML 事件函數(shù)JavaScript 特效和動(dòng)畫HTML DOM 遍歷和修改AJAXUtilities具備基礎(chǔ)知識(shí)HTML、CSS、javascript文件下載/版本jQuery-1.12.4 兼容至IE6jQuery-3.0 兼容至IE9文件引入jQuery文件一般放在js文件的第一位，方便后面的文件使用jQuery方法基礎(chǔ)語(yǔ)法語(yǔ)法公式$(selector).ac

2、tion先選取 HTML 元素，后對(duì)選取的元素執(zhí)行某些操作。$符號(hào)代表jQuery的縮寫選擇符（selector）查詢和查找 HTML 元素action() 執(zhí)行對(duì)元素的操作，包括修改樣式屬性、事件、動(dòng)畫等等。選擇器selector選擇符于CSS樣式選擇器一樣的寫法。主要包括：ID選擇器、class選擇器、標(biāo)簽選擇器、屬性選擇器、偽類等。修改屬性/樣式/HTML一般，jQuery的方法，既能get又能set獲取/設(shè)置屬性常規(guī)標(biāo)簽屬性：attr()$(img).attr(src);$(img).attr( src: test.jpg, alt: Test Image );表單屬性：prop()$

3、(inputtype=checkbox).prop(checked);$(inputtype=checkbox).prop(checked, true);表單value值：val()$(input).val();$(input).val(hello world!);CSS修改添加刪除CSS：addClass()/removeClass()$(p).addClass(selected1 selected2);$(p).removeClass(selected);獲取/設(shè)置CSS: css()$(p).css(color);$(p).css(color,red);$(p).css( color:

4、#ff0011, background: blue );獲取/設(shè)置HTML（文本）獲取/設(shè)置文本：text()$(p).text();$(p).text(Hello world!);獲取/設(shè)置HTML：html()$(p).html();$(p).html(Hello world!);獲取/設(shè)置尺寸width()/height()$(p).height();$(p).height(20);innerWidth()/innerHeight()outerWidth()/outerHeight()尺寸范圍圖DOM操作增刪元素（增加）生成元素原生js寫法document.creatElement(“s

5、pan”)jQuery寫法$（”this is new”）插入元素原生js寫法(父級(jí)插入子級(jí))內(nèi)部尾部插入：element.append(element)外部頭部插入：element.insertBefore(element)jQuery常用寫法內(nèi)部尾部插入：$(selector).append(element)內(nèi)部頭部插入：$(selector).prepend(element)外部頭部插入：$(selector).insertBefore(element)外部尾部插入：$(selector).insertAfter(element)刪除元素原生js寫法：$(selector).remove

6、Child()jQuery寫法：刪除全部元素：$(selector).empty();刪除指定元素：$(selector).remove(expression)事件ready VS onloadready事件：當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)。它可以極大地提高web應(yīng)用程序的響應(yīng)速度。onload事件：js中的方法，網(wǎng)頁(yè)的所有元素、圖片全部加載完畢才執(zhí)行這個(gè)事件處理程序，速度相對(duì)較慢。常見DOM事件鼠標(biāo)事件鍵盤事件表單事件文檔/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocus

7、scrollmouseleaveblurunload重要事件click事件：$(p).click( function () $(this).hide(); );hover事件：$(td).hover( function () $(this).addClass(hover); , function () $(this).removeClass(hover); );綁定/移除事件：on()/off()$(p).on(click, function()alert( $(this).text() ););觸發(fā)事件：trigger()$(form:first).trigger(submit)事件委托事件

8、委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。有三個(gè)同事預(yù)計(jì)會(huì)在周一收到快遞。為簽收快遞，有兩種辦法：一是三個(gè)人在公司門口等快遞；二是委托給前臺(tái)MM代為簽收。現(xiàn)實(shí)當(dāng)中，我們大都采用委托的方案（公司也不會(huì)容忍那么多員工站在門口就為了等快遞）。前臺(tái)MM收到快遞后，她會(huì)判斷收件人是誰(shuí)，然后按照收件人的要求簽收，甚至代為付款。這種方案還有一個(gè)優(yōu)勢(shì)，那就是即使公司里來(lái)了新員工（不管多少），前臺(tái)MM也會(huì)在收到寄給新員工的快遞后核實(shí)并代為簽收。這里其實(shí)還有2層意思的：現(xiàn)在委托前臺(tái)的同事是可以代為簽收的，即程序中的現(xiàn)有的dom節(jié)點(diǎn)是有事件的；新員工也是可以被前臺(tái)MM代為簽收的，即

9、程序中新添加的dom節(jié)點(diǎn)也是有事件的。jQuery事件委托示例代碼$(.result).on(click, “.del”,function()$(this).addClass(“deleted”););DOM樹遍歷DOM樹結(jié)構(gòu)4方位遍歷總結(jié)jQuery動(dòng)畫動(dòng)畫原理在一段時(shí)間內(nèi)改變CSS屬性值，讓屬性值按照緩動(dòng)函數(shù)的曲線增加/減少，達(dá)到平滑動(dòng)畫的效果，動(dòng)畫的參數(shù)一般包含3部分，屬性值、緩動(dòng)函數(shù)、運(yùn)動(dòng)時(shí)間。動(dòng)畫改變的屬性值一般都是數(shù)值類型，方便緩動(dòng)函數(shù)的計(jì)算。jQuery默認(rèn)的緩動(dòng)函數(shù)有2種，linear、swing。如需更多緩動(dòng)函數(shù)，引入jQuery.easing.js?？蓞⒖糴asing效果網(wǎng)

10、址查看具體效果： HYPERLINK /jqueryui/api-easings.html /jqueryui/api-easings.htmljQuery提供關(guān)于運(yùn)動(dòng)時(shí)間的預(yù)定速度有fast/normal/ slow，也可以設(shè)定數(shù)值如1000內(nèi)置動(dòng)畫顯示/隱藏：show()/hide()淡入/淡出：fadeIn()/fadeOut()滑上/滑下：slideUp()/slideDown()自定義動(dòng)畫animate()jQuery動(dòng)畫都是基于animate方法來(lái)完成的，內(nèi)置動(dòng)畫（fadeIn/slideUp）只是預(yù)制好參數(shù)的animate方法的簡(jiǎn)寫。animate改變部分樣式鑒于動(dòng)畫改變的樣式最

11、好是數(shù)字，animate僅能改變部分樣式，樣式總結(jié)如下：width/heighttop/bottom/left/rightmargin/padding/border-widthfont-sizeopacityscrollTop停止動(dòng)畫stop()stop() 方法用于停止動(dòng)畫或效果，在它們完成之前。stop() 方法適用于所有 jQuery 效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫。$(selector).stop(stopAll,goToEnd);可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列。默認(rèn)是 false，即僅停止活動(dòng)的動(dòng)畫，允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行?？蛇x的 goToEn

12、d 參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫。默認(rèn)是 false。因此，默認(rèn)地，stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫。分步動(dòng)畫實(shí)現(xiàn)方式回調(diào)函數(shù)回調(diào)函數(shù)指動(dòng)畫完成之后此函數(shù)才開始執(zhí)行的，可以利用回調(diào)函數(shù)的嵌套實(shí)現(xiàn)分步動(dòng)畫，優(yōu)點(diǎn)：保證動(dòng)畫完全執(zhí)行完，缺點(diǎn)：嵌套層級(jí)過(guò)多，影響可讀性延遲執(zhí)行delay()等待前一個(gè)動(dòng)畫執(zhí)行完的毫秒數(shù)，再執(zhí)行下一個(gè)動(dòng)畫，優(yōu)點(diǎn)：不用嵌套，可讀性好。缺點(diǎn)：動(dòng)畫不確定是否執(zhí)行完。示例代碼回調(diào)函數(shù)$nav.find(.logo).stop().fadeOut(slow, function() $nav.find(.navbar).stop().animate( paddingLe

13、ft: 0 ););delay()$nav.find(.navbar).stop(true, true).animate( paddingLeft: 175px,600);$nav.find(.logo).delay(600).fadeIn(slow);表單操作表單屬性name屬性/value屬性name屬性一般由后臺(tái)決定，value由用戶操作決定文本input：placeholder屬性placeholder屬性達(dá)到用戶提示語(yǔ)$(selector).val();單選復(fù)選input：placeholder屬性/checked屬性單選復(fù)選組name屬性需要保持一致placeholder屬性達(dá)到用

14、戶提示語(yǔ)checked屬性表明選中狀態(tài)下拉select： selected屬性selected屬性一般是option元素上面多行文本textarea：placeholder屬性表單數(shù)據(jù)驗(yàn)證表單數(shù)據(jù)在提交給服務(wù)器之前，對(duì)輸入的數(shù)據(jù)進(jìn)行合法性驗(yàn)證，如果不符合規(guī)則會(huì)提示用戶修改。典型的表單驗(yàn)證有：用戶是否已填寫表單中的必填項(xiàng)目？用戶輸入的郵件地址是否合法？用戶是否已輸入合法的日期？實(shí)現(xiàn)方式(正則表達(dá)式)逐個(gè)取值驗(yàn)證：逐個(gè)取值，使用正則表達(dá)式驗(yàn)證true/false，并做提示借助js插件：按照插件的規(guī)則，定義正則表達(dá)式，自動(dòng)提示推薦大而全的Validform.js，解決很多問題表單序列化工作原理ser

15、ialize()方法將表單元素按照name/value屬性值配對(duì)，以name=value&name=value的字符串形式返回，其核心方法是$.param()序列化步驟設(shè)置表單元素的name屬性，不需要序列化的元素不設(shè)置name獲取form,序列化表單 $(“form”).serialize()表單序列化對(duì)象某些情況下，我們希望得到表單的對(duì)象，還是將表單元素按照name/value屬性配對(duì)，但是jQuery并沒有提供這種方法，因此需要自己來(lái)構(gòu)造一個(gè)function/表單序列化為對(duì)象function serializeObject(form) var o = ;$.each(form.seria

16、lizeArray(), function(index) if (othisname) othisname = othisname + ; + thisvalue; else othisname = thisvalue;);return o;表單提交數(shù)據(jù)form提交數(shù)據(jù)form元素屬性中action屬性指明后臺(tái)接口url地址method屬性指明提交數(shù)據(jù)使用POST/GET方法enctype屬性規(guī)定在發(fā)送表單數(shù)據(jù)之前如何對(duì)其進(jìn)行編碼。值描述application/x-www-form-urlencoded在發(fā)送前編碼所有字符（默認(rèn)）空格轉(zhuǎn)換為 + 加號(hào)，特殊符號(hào)轉(zhuǎn)換為 ASCII HEX 值mu

17、ltipart/form-data不對(duì)字符編碼。在使用包含文件上傳控件的表單時(shí)，必須使用該值。text/plain空格轉(zhuǎn)換為 + 加號(hào)，但不對(duì)特殊字符編碼。inputtype=submit按鈕來(lái)觸發(fā)submit事件，將數(shù)據(jù)提交給后臺(tái)缺點(diǎn)：用戶體驗(yàn)不好，填寫錯(cuò)誤的時(shí)候，不方便修改ajax提交數(shù)據(jù)ajax能夠傳輸?shù)臄?shù)據(jù)格式有：html、json、js、xml，每一種格式都有自己的優(yōu)缺點(diǎn)，常用的是json格式。詳見AJAX部分AJAX數(shù)據(jù)交互ajax交互過(guò)程jQuery中ajax方法分類 GET方法目前jQuery提供很多個(gè)方法GET數(shù)據(jù)，每個(gè)方法對(duì)應(yīng)一種數(shù)據(jù)格式。這些方法都是底層方法$.get()

18、的縮寫。示例代碼url傳參$.getJSON(“goods/getList?pageIndex=1&pageSize=10&keyword=pen”)參數(shù)傳參$.get(“goods/getList”,pageIndex:1,pageSize:10,keyword=pen) POST方法示例代碼單個(gè)傳參$.post(“user/login”,name:moz,password:123456);表單序列化$.post(user/login”,data) $.ajax核心方法jQuery 底層 AJAX 實(shí)現(xiàn)。簡(jiǎn)單易用的高層實(shí)現(xiàn)見 $.get, $.post 等。$.ajax() 返回其創(chuàng)建的 X

19、MLHttpRequest 對(duì)象。大多數(shù)情況下你無(wú)需直接操作該函數(shù)，除非你需要操作不常用的選項(xiàng)，以獲得更多的靈活性。示例代碼$.ajax( type: GET, url: test.js);$.ajax( type: POST, url: some.php, data: name=John&location=Boston, success: function(msg) alert( Data Saved: + msg ); );設(shè)置content-type$.ajax( type: GET, url: test.js,content-type:” multipart/form-data”);設(shè)

20、置headers$.ajax( type: GET, url: test.js,headers:”token:eiru2sjhrur4ru2sjhrur40”);模板引擎模板引擎原理模板引擎是用來(lái)渲染頁(yè)面的js工具，它將模板里面匹配的變量名在json數(shù)據(jù)找到對(duì)應(yīng)的值進(jìn)行替換，最終輸出一段HTML代碼流。artTemplate引擎官方地址： HYPERLINK https:/aui.github.io/art-template/ https:/aui.github.io/art-template/創(chuàng)建模板if user /if模板語(yǔ)法數(shù)值綁定：data原文輸出(不會(huì)對(duì)HTML內(nèi)容進(jìn)行轉(zhuǎn)義)：da

21、taif語(yǔ)句：if value . /iffor循環(huán)：$index索引值、$value指數(shù)組中的值或者對(duì)象each target $index $value/each綁定數(shù)據(jù)var html=template(“tpl-user”, data);插入DOM$(“#list”).append(html)$(“#list”).html(html)安全機(jī)制同源策略A網(wǎng)頁(yè)設(shè)置的 Cookie，B網(wǎng)頁(yè)不能打開，除非這兩個(gè)網(wǎng)頁(yè)同源。所謂同源指的是三個(gè)相同。如果非同源，共有三種行為受到限制：cookie、localstorage、indexDB無(wú)法讀取DOM無(wú)法獲得AJAX不能獲取請(qǐng)求 JSONP同源政策規(guī)定，AJAX請(qǐng)求只能發(fā)給同源的網(wǎng)址，否則就報(bào)錯(cuò)。JSONP是服務(wù)器與客戶端跨源通信的常用方法。最大特點(diǎn)就是簡(jiǎn)單適用，老式瀏覽器全部支持，服務(wù)器改造非常小。注意，JSONP只能用GET方法它的基本思想是，網(wǎng)頁(yè)通過(guò)添加一個(gè)元素，向服