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

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

2、tion先選取 HTML 元素，后對選取的元素執(zhí)行某些操作。$符號代表jQuery的縮寫選擇符（selector）查詢和查找 HTML 元素action() 執(zhí)行對元素的操作，包括修改樣式屬性、事件、動畫等等。選擇器selector選擇符于CSS樣式選擇器一樣的寫法。主要包括：ID選擇器、class選擇器、標簽選擇器、屬性選擇器、偽類等。修改屬性/樣式/HTML一般，jQuery的方法，既能get又能set獲取/設置屬性常規(guī)標簽屬性：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);獲取/設置CSS: css()$(p).css(color);$(p).css(color,red);$(p).css( color:

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

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

6、Child()jQuery寫法：刪除全部元素：$(selector).empty();刪除指定元素：$(selector).remove(expression)事件ready VS onloadready事件：當DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)。它可以極大地提高web應用程序的響應速度。onload事件：js中的方法，網頁的所有元素、圖片全部加載完畢才執(zhí)行這個事件處理程序，速度相對較慢。常見DOM事件鼠標事件鍵盤事件表單事件文檔/窗口事件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、委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。有三個同事預計會在周一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委托給前臺MM代為簽收?，F(xiàn)實當中，我們大都采用委托的方案（公司也不會容忍那么多員工站在門口就為了等快遞）。前臺MM收到快遞后，她會判斷收件人是誰，然后按照收件人的要求簽收，甚至代為付款。這種方案還有一個優(yōu)勢，那就是即使公司里來了新員工（不管多少），前臺MM也會在收到寄給新員工的快遞后核實并代為簽收。這里其實還有2層意思的：現(xiàn)在委托前臺的同事是可以代為簽收的，即程序中的現(xiàn)有的dom節(jié)點是有事件的；新員工也是可以被前臺MM代為簽收的，即

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

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

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

12、d 參數(shù)規(guī)定是否立即完成當前動畫。默認是 false。因此，默認地，stop() 會清除在被選元素上指定的當前動畫。分步動畫實現(xiàn)方式回調函數(shù)回調函數(shù)指動畫完成之后此函數(shù)才開始執(zhí)行的，可以利用回調函數(shù)的嵌套實現(xiàn)分步動畫，優(yōu)點：保證動畫完全執(zhí)行完，缺點：嵌套層級過多，影響可讀性延遲執(zhí)行delay()等待前一個動畫執(zhí)行完的毫秒數(shù)，再執(zhí)行下一個動畫，優(yōu)點：不用嵌套，可讀性好。缺點：動畫不確定是否執(zhí)行完。示例代碼回調函數(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屬性一般由后臺決定，value由用戶操作決定文本input：placeholder屬性placeholder屬性達到用戶提示語$(selector).val();單選復選input：placeholder屬性/checked屬性單選復選組name屬性需要保持一致placeholder屬性達到用

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

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

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

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

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

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

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

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