jQuery（Ajax）
1、jQuery
一個JavaScript 庫，極大的簡化了JS 編程
jQuery庫包含以下功能：
-
- HTML 元素選取
- HTML 元素操作
- CSS 操作
- HTML 事件函數
- JavaScript 特效和動畫
- HTML DOM 遍歷和修改
- AJAX
- Utilities
除了上述功能，它提供了海量的插件（官方，非官方）
2、安裝
(react可以直接npm install但是用不著，react自己就可以處理）
下載jQuery，解壓後，一個開發用額，一個min是壓縮後的部署用
第二個是第一個的壓縮文件，多行變成一行。
<script src="jquery.js"></script>
3、基本語法
$(selector).action()
-
- $ 定義jQuery-----jQuery對象
- 選擇符（selector）“查詢” 和“查找” HTML 元素
- jQuery 的action() 執行對元素的操作
文檔就是函數
為了防止文檔加載完成之前就執行jQuery 代碼，需要一個網頁加載完的函數
$(document).ready(funnction() {
/* jQuery functions go here */
});
可以簡寫：
$(function() {
/* jQuery functions go here */
}
註意：如果直接使用 <scrpit>執行，function，可能下面還沒有加載完，導致出錯，所以jQuery，先加載後調用。這樣才是安全的。
4、元素選擇器
jQuery 使用css 選擇器來選取HTML 元素
$("p") 選取p元素
$("p.intro") 選取所有 class="intro"的 <p> 元素
$("p#demo")選取所有id=“demo” 的<p> 元素
5、屬性選擇器
jQuery使用XPath表達式來選擇帶有給定屬性的元素
$("[ href]" ) 選取所有帶有 href 屬性的元素
$("[ href = ‘#‘]") 選取所有帶有href值等於 # 的元素
$("[href != ‘#‘]") 選取所有帶有href值 不等於 # 的元素
$("[href $= ‘.jgp‘ ]") 選取所有href 值以 .jgp結尾的元素
6、jQuery事件函數
為jQuery 對象增加事件回調函數
測試：
1 <html> 2 3 <head> 4 <title>test page</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 </style> 8 <script src="jquery.js"></script> 9 <script type="text/javascript"> 10 $(function(){ 11 $(‘#main‘).css(‘color‘,‘red‘) 12 // $("button").click() 只是點擊事件 13 // $("button").click(function(){ 14 // // this 這是dom的this，即target <button style="display: none;">test click</button> none改為block按鈕又出現了 15 // // 這裏是用的jQuery的對象，所以用$ 包裝 16 // $(this).hide() // 一點就消失 17 // }) 18 19 var flag = true 20 $("button.testclick").click(function(event){ 21 console.log(event.target) // <button class="testclick">new click</button> 22 $(‘#root‘).css(‘color‘,flag?‘red‘:‘blue‘); 23 flag = !flag; 24 }) ; 25 }); 26 </script> 27 </head> 28 <body> 29 <div id="main">test text</div> 30 <h2 id=‘root‘>test test</h2> 31 <hr /> 32 <button>test click</button> 33 <button class=‘testclick‘>new click</button> 34 </body> 35 36 </html>
註：
1 $("button.testclick").click(function(event) ---- 設置click時間回調 2 $("button.testclick").click() ----調用click
測試：table 奇偶行顏色不同
1 <html> 2 3 <head> 4 <title>test page</title> 5 <meta charset="utf-8"> 6 <style type="text/css"></style> 7 <script src="jquery.js"></script> 8 <script type="text/javascript"> 9 $(function(){ 10 var trs = $(".detail tr"); 11 console.log(trs) // 獲取到tr 12 trs.each(function(index,domEle){ 13 console.log(domEle) //dom元素，需要變成jquery對象 14 $(domEle).css("backgroundColor", index%2?‘blue‘:‘yellow‘); 15 }) 16 }); 17 </script> 18 19 <style type="text/css"> 20 table, td { 21 border: rgb(112, 9, 9) solid 1px; 22 } 23 table { 24 border-collapse:collapse; 25 width: 50% 26 } 27 td { 28 padding: 5px; 29 } 30 </style> 31 </head> 32 <body> 33 <hr /> 34 <table class=‘detail‘> 35 <tr> 36 <td>1</td> 37 <td>test1</td> 38 </tr> 39 <tr> 40 <td>1</td> 41 <td>test2</td> 42 </tr> 43 </table> 44 </body> 45 46 </html>
獲取屬性：
1 $("button").click(function(){ 2 // // this 這是dom的this，即target 3 // // 這裏是用的jQuery的對象，所以用$ 包裝 4 console.log(this) 5 console.log($(‘#main‘).attr(‘id‘)) //獲取屬性id 6 })
7、Ajax
jQuery對XMLHttpRequest組件的調用接口實現了 封裝，更加方便調用
默認是異步請求：
GET：
註意：
測試：
1、
2、 
3、 
測試代碼：
1 <html> 2 3 <head> 4 <title>test page</title> 5 <meta charset="utf-8"> 6 <style type="text/css"></style> 7 <script src="jquery.js"></script> 8 <script type="text/javascript"> 9 $(function(){ 10 $(‘button.ajaxget‘).click(function() { 11 console.log(‘=========================‘) 12 // get只能處理200系列的，否則只能用原生的 $.ajax 13 // $.get(‘http://127.0.0.1:8000/user/show‘, 14 // $.get(‘http://127.0.0.1:8000/user/show?id=1&name=jack&name=tom‘, 15 $.get(‘http://127.0.0.1:8000/user/show?id=1‘,{age:22}, 16 function(resdata){ //回調函數 17 console.log(‘--------‘) 18 console.log(resdata); 19 }) 20 }) 21 }) ; 22 </script> 23 24 </head> 25 26 <body> 27 <div id="main">test text</div> 28 <h2 id=‘root‘>test test</h2> 29 <hr /> 30 <hr /> 31 <button class=‘ajaxget‘>GET</button> 32 33 </body> 34 </html>
POST：
1、
2、
3、
POST請求提交JSON：
直接點擊 
出現下面錯誤：
也就是說跨域訪問如果不設置這3種Content-type，就會觸發preflight OPTIONS 請求（預檢請求）
錯誤請求頭：
正確請求頭：
解決方案：
使用網站來訪問網頁：
Django的靜態文件配置如下：
1‘settingszhong INSTALLED_APPS確保有django.contrib.dtaticfiles
2、settings中定義靜態路徑 STATIC_URL=‘/static/‘
3、settings中：
STATICFILES_DIRS=[
os.path.join(BASE_DIR,"static"),
]
4、項目根目錄下創建 static 文件夾，將html文件和 jQuery.js放進去（沒有壓縮的版本）
https://docs.djangoproject.com/en/1.11/howto/static-files/
jQuery（Ajax）