p07-第七節(jié)-電商前端開發(fā)高級部分

1、編輯課件JS高級課程 JQuery使用JQuery 介紹 JQuery 選擇器 JQuery 使用 JQuery 幫助文檔使用 編輯課件1、JQuery介紹jQuery 是一個(gè) JavaScript 庫jQuery 極大地簡化了 JavaScript 編程jQuery 很容易學(xué)習(xí)jQuery 的理念：寫得更少，做得更多編輯課件2、JQuery選擇器的常用類型編輯課件2.1、JQuery選擇器用法jQuery HTML元素選擇器 $(p) 選取 元素。 $(p#demo) 選取所有 id=demo 的 元素。jQuery 屬性（元素屬性）選擇器 jQuery 使用 XPath 表達(dá)式來選擇帶有給

2、定屬性的元素。 $(href) 選取所有帶有 href 屬性的元素。 $(href=#) 選取所有帶有 href 值等于 # 的元素。jQuery CSS選擇器 jQuery CSS 選擇器通過CSS 類型進(jìn)行選擇匹配。 $(ro) 選取所有 class=intro 的 元素。 編輯課件2.2、 JQuery選擇器示例代碼示例： 1- 2JQuery用法：/得到div中的a標(biāo)簽內(nèi)容，結(jié)果為1-2 jQuery(#divTest a).text(); /輸出div直接子節(jié)點(diǎn)，結(jié)果為GPX jQuery(#divTestinput).val(); /輸出id為next的后一個(gè)同級別元素，結(jié)果為互聯(lián)

3、網(wǎng)+電商 jQuery(#next+input).val(); /同上，并且是有title的元素 結(jié)果為學(xué)習(xí) jQuery(#nexttitle).val();編輯課件3、JQuery的使用如何引用：在head中引入jquery.js文件 注：jquery.min.js是jquery的壓縮格式示例： 編輯課件4、JQuery幫助文檔使用編輯課件JS高級課程 JQuery異步請求JS Ajax 介紹 JQuery POST JQuery GET JQuery Ajax 編輯課件5、JS Ajax介紹Ajax：AsynchronousJavascriptAndXML（異步JavaScript和XM

4、L）原理：Ajax 的核心是 JS 對象 XmlHttpRequest運(yùn)行：通過在瀏覽器后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新作用： 可以在不重新加載整個(gè)網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行局部更新編輯課件5.1、Ajax異步請求介紹什么是異步請求？（“異步”請求是相對于“同步”請求而言的）1、“同步”：當(dāng)用戶執(zhí)行一個(gè)操作后，用戶需要等待程序完成，直到程序執(zhí)行完成后，才能繼續(xù)執(zhí)行下一步操作。2、“異步”：當(dāng)用戶執(zhí)行一個(gè)操作后，無須等待程序完成，可以繼續(xù)執(zhí)行其它操作。 編輯課件6、Ajax異步請求實(shí)現(xiàn)數(shù)據(jù)異步請求實(shí)現(xiàn)方法：$.post()$.get()$.ajax()編輯課件

5、6.1、$.post() 異步請求語法：$.post ( url, data, callback, type ) WEB前端課程url (String)發(fā)送請求的URL地址data (Map)要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key=value 的鍵值對形式表示callback (Function)載入成功時(shí)回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)Type (String)這是和護(hù)短請求數(shù)據(jù)的類型（Json,Xml,等等）， 注意：在使用JQuery寫代碼要引入JQuery文件編輯課件 /引用jquery function ajax_post() $.post(“要提

6、交的URL地址” , email:$(#email).val(), address:$(#address).val(), function(data) alert (data);, text); /這里返回的類型有：json, html, xml, text WEB前端課程6.2、$.post() 異步請求示例編輯課件6.3、$.get() 異步請求語法：$.get ( url, data, callback, type ) WEB前端課程url (String)發(fā)送請求的URL地址data (Map)要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key=value 的鍵值對形式表示callback (Funct

7、ion)載入成功時(shí)回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)Type (String)這是和護(hù)短請求數(shù)據(jù)的類型（Json,Xml,等等）， 注意：在使用JQuery寫代碼要引入JQuery文件編輯課件 /引用jquery function ajax_get() $.get(“要提交的URL地址” , email:$(#email).val(), address:$(#address).val(), function(data) alert (data);, text); /這里返回的類型有：json, html, xml, text WEB前端課程6.4、$.g

8、et() 異步請求示例編輯課件 6.5、$.ajax() 異步請求（一）參數(shù)描述Settings可選。用于配置 Ajax 請求的鍵值對集合。Settings 參數(shù)含義url提交的地址Typepost | getdatatypejson, xmlAsyncTrue | false 異步/同步Data提交給服務(wù)器的數(shù)據(jù)success 當(dāng)請求之后調(diào)用。傳入返回后的數(shù)據(jù)，以及包含成功代碼的字符串。 語法：$.ajax(settings)編輯課件 Settings 參數(shù)含義beforeSend 在發(fā)送請求之前調(diào)用，并且傳入一個(gè)XMLHttpRequest作為參數(shù)。 error 在請求出錯時(shí)調(diào)用，傳入XMLHttpRequest對象，描述錯誤類型的字符串以及一個(gè)異常對象（如果有的話）dataFilter 在請求成功之后調(diào)用，傳入返回的數(shù)據(jù)以及“dataType”參數(shù)的值，并且必須返回新的數(shù)據(jù)（可能是處理過的）傳遞給success回調(diào)函數(shù)。 complete 當(dāng)請求完成之后調(diào)用這個(gè)函數(shù)，無論成功或失敗。傳入XMLHttpRequest對象，以及一個(gè)包含成功或錯誤代碼的字符串。 6.6、$.ajax() 異步請求（二）編輯課件6.7、$.ajax() 異步請求示例$.ajax(type:”POST”, /ajax提交