一、jQuery操作DOM
內部插入操作：
append(content|fn)：向每個匹配的元素內部追加內容。
prepend(content)：向每個匹配的元素內部前置內容。
外部插入操作：
after(content|fn)：在每個匹配的元素之后插入內容。
before(content|fn)：在每個匹配的元素之前插入內容。
包裹操作：
wrap(html|element|fn)：把所有匹配的元素用其他元素的結構化標記包裹起來。
unwrap()：這個方法將移出元素的父元素。
wrapAll(html|ele)：將所有匹配的元素用單個元素包裹起來。
wrapInner(htm|element|fnl)：將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來。
替換操作：
replaceWith(content|fn)：將所有匹配的元素替換成指定的HTML或DOM元素。
replaceAll(selector)：用匹配的元素替換掉所有 selector匹配到的元素。
刪除操作：
empty()：刪除匹配的元素集合中所有的子節點。
remove([expr])：從DOM中刪除所有匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的數據等都會被移除。
detach([expr])：從DOM中刪除所有匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來。
復制操作：
clone(Even])：克隆匹配的DOM元素並且選中這些克隆的副本。
even：一個布爾值（true 或者 false）指示事件處理函數是否會被復制。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .outer_one{ width: 80%; height: 80px; text-align: center; background: #ff0000; } .outer_one_child{ width: 100%; height: 50px; line-height: 50px; text-align: center; background: #00cd00; } .outer_four{ background: purple; } </style>
</head>
<body>
<div class="container">
<div class="outer_one"> 第一個外邊框 </div>
<div class="outer_one_child"> 第一個外邊框的孩子——布局與第一個外邊框同級 </div>
<div class="outer_two"> 第二個外邊框 </div>
<div class="outer_three"> 第三個外邊框 </div>
<div class="outer_four"> 第四個外邊框 </div>
<div class="outer_five">
<p>第五個外邊框</p>
<p>第五個外邊框</p>
<a>第五個外邊框</a>
</div>
<div class="outer_six">
<p>第六個外邊框</p>
<a>第六個外邊框</a>
</div>
<div class="outer_seven">
<p>第七個外邊框</p>
<p>第七個外邊框</p>
<a>第七個外邊框a標簽<p>我是孫子p標簽</p></a>
<p>第七個外邊框</p>
</div>
<div class="outer_eight">
<p>第八個外邊框</p>
<a>第八個外邊框<span>×</span></a> 第八個外邊框 </div>
<div class="outer_nine">
<p>第九個外邊框</p>
<p>第九個外邊框</p>
<p>第九個外邊框</p>
<p>第九個外邊框</p>
</div>
<div class="outer_ten">
<p>第十個外邊框</p>
<p>第十個外邊框</p>
<p>第十個外邊框</p>
<a>第十個外邊框</a>
</div>
<div class="outer_11">
<p>第11個外邊框</p>
<p>第11個外邊框</p>
<p>第11個外邊框</p>
<a>第11個外邊框</a>
</div>
<div class="outer_12">
<p>第12個外邊框</p>
<p>第12個外邊框</p>
</div>
<div class="outer_13">
<p>第13個外邊框</p>
<p>第13個外邊框</p>
</div>
<div class="outer_14"> 第14個外邊框 </div>
<div class="outer_15"> 第15個外邊框 </div>
<div class="outer_16"> 第16個外邊框 </div>
<div class="outer_17"> 第17個外邊框 </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
//內部插入（生成子元素） //append元素內部末尾追加內容(支持回調函數)
$('.outer_one').append($('.outer_one_child'));//將現有標簽追加到元素內
$('.outer_two').append('<p>');//向元素末尾追加新標簽 //prepend元素內部開頭追加內容
$('.outer_three').prepend('我是prepend追加的內容'); //外部插入（生成兄弟元素）
$('.outer_four').before('<p>我是before剛插入的標簽</p>') $('.outer_four').after('<p>我是after剛插入的標簽</p>') //包裹操作wrap（添加父元素） unwrap(移除父元素)
$('.outer_five p').wrap('<a>');//所有包含的元素外圍包裹p標簽
$('.outer_six p').unwrap('<p>');//去除父元素的包裹 //wrapAll將所有匹配的元素放到一起用一個規定的父元素包裹
$('.outer_seven p').wrapAll('<a>'); //wrapInner將子元素包裹
$('.outer_eight').wrapInner('<h3>'); //替換操作 //replaceWith將匹配的元素替換為規定的元素
$('.outer_nine p').replaceWith('<a>'); //replaceAll將匹配的元素替換為規定的元素
$('<p>').replaceAll('.outer_ten a'); //刪除操作
$('.outer_11').empty(); // remove和detach的區別： //remove() dom中刪除節點保留到jquery,元素保留，事件刪除 //detach() dom中刪除節點保留到jquery,元素保留，事件保留
$('.outer_12').click(function(){ $(this).css('background','green'); }).remove().appendTo('.outer_14'); $('.outer_13').click(function(){ $(this).css('background','red'); }).detach().appendTo('.outer_15'); //復制操作clone(even)方法的參數取值boolean如果true保留復制元素的綁定事件否則相反
$('.outer_16').clone().appendTo('.outer_17') </script>
</html>
二、jQuery動畫
show([speed, [easing], [callback]])：顯示隱藏的匹配元素。
hide([speed, [easing], [callback]])：隱藏顯示的元素。
toggle([speed, [easing], [callback]])：如果元素是可見的，切換為隱藏的，如果元素是隱藏的，切換為可見的。
speed：三種預定速度的字符串（slow、normal、fast）或者動畫時長的毫秒數值。
easing：指定切換效果，默認是swing，可用linear。
callback：在動畫完成時執行的函數，每個元素執行一次。
運動過程中：改變width、height、margin、padding、opacity屬性值，添加overflow：hidden屬性。
slideDown([speed, [easing], [callback]])：通過高度變化（向下增大）來動態的顯示所有匹配的元素，顯示完成后可選的觸發一個回調函數。
slideUp([speed, [easing], [callback]])：通過高度變化（向上減小）來動態的隱藏所有匹配的元素，隱藏完成后可選的觸發一個回調函數。
slideToggle([speed, [easing], [callback]])：通過高度變化來切換所有匹配元素的可見性，切換完成后可選的觸發一個回調函數。
speed：三種預定速度的字符串（slow、normal、fast）或者動畫時長的毫秒數值。
easing：指定切換效果，默認是swing，可用linear。
callback：在動畫完成時執行的函數，每個元素執行一次。
運動過程中：改變height、margin-top、margin-bottom、padding-top、padding-bottom屬性值，添加overflow：hidden屬性。
fadeIn([speed, [easing], [callback]])：通過不透明度的變化來實現所有匹配元素的淡入效果，動畫完成后可選的觸發一個回調函數。
fadeOut([speed, [easing], [callback]])：通過不透明度的變化來實現所有匹配元素的淡出效果，動畫完成后可選的觸發一個回調函數。
fadeTo([speed, opacity, [easing], [callback]])：把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，動畫完成后可選的觸發一個回調函數。opacity：一個0到1之間表示透明度的數字。
fadeToggle([speed, [easing], [callback]])：通過不透明度的變化來開關所有匹配元素的淡入淡出效果，動畫完成后可選的觸發一個回調函數。
speed：三種預定速度的字符串（slow、normal、fast）或者動畫時長的毫秒數值。
easing：指定切換效果，默認是swing，可用linear。
callback：在動畫完成時執行的函數，每個元素執行一次。
注：fadeIn、fadeout、fadeToggle，運動過程中修改opacity屬性值，最終只修改display屬性值。而fadeTo只修改opacity屬性值。
animate(params, [speed], [easing], [fn])：用於創建自定義動畫的函數。
params：一組包含作為動畫屬性和終值的樣式屬性和及其值的集合。
speed：三種預定速度的字符串（slow、normal、fast）或者動畫時長的毫秒數值。
easing：指定切換效果，默認是swing，可用linear。
fn：在動畫完成時執行的函數，每個元素執行一次。
stop(clearQueue, [jumpToEnd])：停止所有在指定元素上正在運行的動畫。如果clearQueue沒有設置為true，並且隊列中有等待執行的動畫，他們將馬上執行。
clearQueue：如果同一元素調用多個動畫方法，尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。調用stop()的時候，隊列中的下一個動畫開始。如果clearQueue參數為true，那么在隊列中的動畫其余被刪除並永遠不會被執行。
jumpToEnd：當前動畫將停止，但該元素上的CSS屬性會被立刻修改成動畫的目標值。
delay(duration [,queueName])：設置一個延時來推遲執行隊列中之后的項目。
duration：延遲時間，單位：毫秒。
queueName：隊列名次，默認是Fx，動畫隊列。
jQuery.fx.off：關閉頁面上所有的動畫。把這個屬性設置為true可以立即關閉所有動畫。把這個屬性設置為false，可以重新開啟所有動畫。
jQuery.fx.interval：設置動畫的顯示幀速。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery—dom操作和ajax方法</title>
<style type="text/css">
*{ padding: 0; margin: 0; } .box{ width: 90%; height: 100px; margin: 20px; padding: 10px; border: 10px solid #ff0000; background: #888888; } input[type=button]{ border: 1px solid #555555; padding: 10px 20px; background:'#f3f3f3'; margin:5px; } </style>
</head>
<body>
<div class="container">
<input name="show" type="button" value="show顯示" />
<input name="hide" type="button" value="hide隱藏" />
<input name="toggle" type="button" value="toggle動畫" />
<hr/>
<input name="slideDown" type="button" value="slideDown動畫" />
<input name="slideUp" type="button" value="slideUp動畫" />
<input name="slideToggle" type="button" value="slideToggle動畫" />
<hr/>
<input name="fadeIn" type="button" value="fadeIn動畫" />
<input name="fadeOut" type="button" value="fadeOut動畫" />
<input name="fadeToggle" type="button" value="fadeToggle動畫" />
<input name="fadeTo" type="button" value="fadeTo動畫" />
<hr/>
<input name="animate" type="button" value="animate自定義動畫" />
<input name="delay" type="button" value="delay動畫延遲" />
<input name="stop" type="button" value="stop停止動畫" />
<div class="box">
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
// $.fx.off = true; // 關閉頁面上所有的動畫 // $.fx.interval = 500; //設置動畫顯示幀速 500ms執行一次 // toggle和帶有toggle的jQuery方法顯示動畫為隱藏、隱藏動畫為顯示可重復
$('input[name=show]').click(function () { $('.box').show('slow','linear',function () { console.log("顯示動畫"); }); }); $('input[name=hide]').click(function () { $('.box').hide('quick'); }); $('input[name=toggle]').click(function () { $('.box').toggle(5000); }); // 操作高度控制元素的顯示隱藏
$('input[name=slideDown]').click(function () { $('.box').slideDown(5000, 'linear', function () { console.log('OVER'); }); }); $('input[name=slideUp]').click(function () { $('.box').slideUp(1000); }); $('input[name=slideToggle]').click(function () { $('.box').slideToggle(1000); }); // 操作opacity屬性
$('input[name=fadeIn]').click(function () { $('.box').fadeIn(1000); }); $('input[name=fadeOut]').click(function () { $('.box').fadeOut(1000); }); $('input[name=fadeToggle]').click(function () { $('.box').fadeToggle(1000); }); $('input[name=fadeTo]').click(function () { alert("fadeIn、fadeout、fadeToggle，運動過程中修改opacity屬性值， 最終只修改display屬性值。而fadeTo只修改opacity屬性值 ,故針對此屬性后其他動畫無法顯示。 ")
$('.box').fadeTo(1000, 0); }); // 自定義動畫
$('input[name=animate]').click(function () { $('.box').animate({ width: 200, height: 200, opacity: 0.4, border:0 }, 6000, 'linear', function () { console.log('自定義動畫完成'); }); }); // 動畫延遲
$('input[name=delay]').click(function () { $('.box').delay(2000).animate({ width: 200, height: 200, opacity: 0.4, border:0 }, 6000, 'linear', function () { console.log('自定義動畫完成'); }); }); $('input[name=stop]').click(function () { $('.box').stop(false, true); }); </script>
</html>
三、jQuery循環遍歷及data()方法
對象訪問：
each(callback)：以每一個匹配的元素作為上下文來執行一個函數。回調函數有兩個參數，第一個參數代表索引，第二個參數代表當前遍歷到的DOM對象。return true則跳至下一個循環(就像在普通循環中使用continue)，return false則終止循環（就像在普通循環中使用break）。
get([index])：取得其中一個匹配的元素。 num表示取得第幾個匹配的元素。與$(this)[0]等價。
index([selector|element])：搜索匹配的元素，並返回相應元素的索引值，從0開始計數。如果參數是一組DOM元素或者jQuery對象，那么返回值就是傳遞的元素相對於原先集合的位置。如果不傳遞參數，那么返回值就是這個jQuery對象集合中第一個元素相對於其同輩元素的位置。
數據緩存：
data([key],[value]) ：在元素上存放數據,返回jQuery對象。
removeData([name|list])：在元素上移除存放的數據。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery循環遍歷</title>
<style type="text/css">
*{ margin: 0; padding: 0; } .list{ list-style: none; line-height: 35px; text-indent: 24px; } .list li{ border-bottom: 1px dashed #f3f3f3; } </style>
</head>
<body>
<div class="container">
<ul class="list" data-name='迷城'>
<li>標簽內容1</li>
<li>標簽內容2</li>
<li>標簽內容3</li>
<li>標簽內容4</li>
<li>標簽內容5</li>
</ul>
</div>
<img class="testimg" src="kong" data-src="測試" />
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
/*參數回調函數包含兩個參數，一索引值，二對應項的dom元素*/ $('.list li').each(function (index,value) { // get方法對應索引位置的元素
$(value).hover(function(){ this.style.background="#555555"; console.log(index,$('.list li').get(index)); console.log($(this).index()); },function () { this.style.background="#ffffff"; }); }); // data()添加的數據屬性在dom元素不顯示
/*data()在元素直接定義data需要加data-前綴 后續修改data的值不會dom元素身上呈現 */ $('.list').data('name', '煙霧'); console.log($('.list').data('name')); $('.list').removeData('name') /*removeData()元素身上直接定義的data無法刪除， 可以理解為元素身上添加例如data-name視為初始化data*/ console.log($('.list').data('name')); $('.list').data('age','40'); $('.list').removeData('age'); console.log($('.list').data('age')); console.log($('.testimg').data('src')); $('.testimg').data('src','數據') console.log($('.testimg').data('src')); /*data()、removeData()方法不能直接通過data-操作data()添加的數據*/ $('.testimg').data('data-src'); $('.testimg').attr('src'); /*data(key, value)中value可以存儲任意對象而不限於簡單類型。 為此付出的代價是，dom添加jQuery.expando屬性,用jQuery-ID進行唯一標識， 然后用jQuery.cache做k-v字典，於是dom上只能看到jQuery.expando， 而實際上data數據都是存在那個字典里的*/
//具體查看jQuery框架源碼
</script>
</html>
四、jQuery.ajax方法
1、load(url, [data], [callback])：載入服務器HTML文件代碼並插入至DOM中。默認為GET請求。
1）url不一定是html文件地址，css、js、txt、php等可以。
2）篩選加載進來的HTML文檔：Load(url #content p)。
3）data可以是key/value數據，也可以是字符串類型。如果是鍵值對對象類型，則為POST請求，如果是字符串，則為GET請求。
4）回調函數三個參數：1：獲取的HTML代碼，2：請求狀態的描述，3：XHR對象。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq.ajax方法</title>
<style type="text/css">
*{ padding: 0; margin: 0; } </style>
</head>
<body>
<ul class="list">
<!--
//test.html文件內容
<ul>
<li>測試數據1</li>
<li>測試數據2</li>
<li>測試數據3</li>
<li>測試數據4</li>
<li>測試數據5</li>
</ul> -->
</ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript"> $('.list').load('test.html ul li',function () { console.log("加載完成") }) </script>
</html>
2、jQuery.ajax(url, [settings])：通過HTTP請求加載遠程數據，返回其創建的XHR對象。
url：請求地址，settings也有url配置選項，如果同時設置，則以外面的url為基准。如果都不設置，則默認請求的是當前發起請求的頁面。
settings配置選項：
dataType：支持的數據類型：xml，html、json、jsonp、script、text。
- text和xml類型返回的數據不會經過處理。數據僅僅將簡單的XHR的responseText和responseXML屬性傳遞給success回調函數。
- script類型：jquery會先執行服務器端生成的JS代碼，然后將腳本作為一個文本數據返回。
- jsonp類型：會創建一個查詢字符串參數callback=?，這個參數會加在請求的URL后面。
- xml類型：返回XML文檔，可用jquery處理。
- html類型：返回純文本HTML信息，包含的script標簽會在插入DOM時執行。
- json類型：返回JSON數據。
- text類型：返回純文本字符串。
async：Boolean類型。默認為true（異步）。
contentType：string類型。默認為application/x-www-form-urlencoded，發送信息至服務器時內容編碼類型。
context：object類型。這個對象用於設置AJAX相關回調函數的上下文，也就是說，讓回調函數內部的this指向這個對象。
timeout：設置請求超時時間（毫秒）。
type：請求方式（GET或POST），默認為GET。
url：默認當前頁地址，發送請求的地址。
data：object/string類型。發送到服務器的數據。
jsonp：string類型。在一個jsonp請求中重寫回調函數的名字。這個值用來替代”callback=?”中的callback部分。
jsonpCallback：string類型。為jsonp請求指定一個回調函數名。這個值用來取代jQuery自動生成的隨機函數名。
statusCode：map類型。一組數值的HTTP代碼和函數對象，當響應時調用相應的代碼。
回調函數：
beforeSend：在發送請求之前調用，並且傳入XHR作為參數。
error：在請求出錯時調用。傳入XHR對象，描述錯誤類型的字符串，以及異常對象（如果存在的話）。
dataFilter：在請求成功后調用，傳入返回的數據以及dataType參數的值，並且必須返回新的數據給success回調函數。
success：當請求成功之后調用，傳入返回后的數據，以及包含成功代碼的字符串。
complete：當請求完成后調用這個函數，無論成功或失敗。傳入XHR對象，以及包含成功或錯誤代碼的字符串。
beforeSend：function(xhr, ajax){}
dataFilter：function (data, dataType){}
success：function(data, sInfo, xhr){}
complete：function(xhr, sInfo){}
error：function(xhr, sInfo[, exception]){}
成功執行順序：beforeSend、dataFilter、success、complete
失敗執行順序：beforeSend、error、complete
ajax普通請求：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq.ajax方法</title>
<style type="text/css">
*{ padding: 0; margin: 0; } .container{ border: 1px solid #eeeeee; margin: 100px auto 0; width: 500px; overflow: hidden; } .box{ width: 300px; height: 40px; border: 1px solid #f4f4f4; line-height: 40px; margin: 10px auto; overflow: hidden; } .box label{ width: 60px; text-align: center; display: inline-block; } .box input{ width: 60%; height: 100%; border: none; outline: none; font-size: 18px; } .box input[type=button]{ width: 100%; } </style>
</head>
<body>
<div class="container">
<form action="get">
<div class="box account-box">
<label>賬號：</label>
<input type="text" name="account" />
</div>
<div class="box account-box">
<label>密碼：</label>
<input type="password" name="password" />
</div>
<div class="box account-box">
<input type="button" value="登錄" name="commitBtn" />
</div>
</form>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript"> $.ajax({ type:'POST',//請求類型post/get
url:'ajax.php',//請求路徑url
dataType:'json',//返回數據類型
asyn:true,//是否為異步true異步/false同步
timeout:2000,//設置請求超長事件（毫秒）
beforeSend:function () { console.log("發送前調用的回調函數") }, error:function () { console.log("錯誤捕獲") }, dataFilter:function (data) { return '{}' }, success:function (data) { console.log(data); }, complete:function () { console.log("jq.ajax請求完成都會執行") } }) </script>
</html>
<?php echo "1111";
ajax跨域請求：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq.ajax方法</title>
</head>
<body>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
// 通過jQuery實現跨域
$.ajax({ url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&json=1&p=3&sid=1464_25548_21101_18559_17001_20719&req=2&csor=1', dataType: 'jsonp', // 跨域請求
jsonp: 'cb', //設置回調函數名稱(callback=?的callback部分)
jsonpCallback: 'callcack', //設置回調函數名稱(callback=?的?部分)
success:function (data) { console.log(data) } }); </script>
</html>
3、$.get(url, [data], [callback], [type])：通過HTTP GET請求獲取數據。這是一個簡單的GET請求取代復雜的$.ajax。請求成功時可調用回調函數。如果需要在出錯時執行函數，則使用$.ajax。
type值：_default。HTML或者XML取決於返回值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq.ajax方法</title>
<style type="text/css">
*{ padding: 0; margin: 0; } .container{ border: 1px solid #eeeeee; margin: 100px auto 0; width: 500px; overflow: hidden; } .box{ width: 300px; height: 40px; border: 1px solid #f4f4f4; line-height: 40px; margin: 10px auto; overflow: hidden; } .box label{ width: 60px; text-align: center; display: inline-block; } .box input{ width: 60%; height: 100%; border: none; outline: none; font-size: 18px; } .box input[type=button]{ width: 100%; } </style>
</head>
<body>
<div class="container">
<form action="javascript:;">
<div class="box account-box">
<label>賬號：</label>
<input type="text" name="account" />
</div>
<div class="box account-box">
<label>密碼：</label>
<input type="password" name="password" />
</div>
<div class="box account-box">
<input type="submit" value="登錄" />
</div>
</form>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js">
</script>
<script type="text/javascript"> $("form").submit(function () { var account=$('input[type=text]').val() var password=$('input[type=password]').val() $.get('ajax.php', { account:account, password:password }, function (data) { console.log(data); }, 'json'); }); </script>
</html>
<?php $account = $_GET['account']; $password = $_GET['password']; echo json_encode($account.'||'.$password, JSON_UNESCAPED_UNICODE);
4、$.post(url, [data], [callback], [type])：通過HTTP POST請求獲取數據。這是一個簡單的POST請求取代復雜的$.ajax。請求成功時可調用回調函數。如果需要在出錯時執行函數，則使用$.ajax。
type值：_default。HTML或者XML取決於返回值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq.ajax方法</title>
<style type="text/css">
*{ padding: 0; margin: 0; } .container{ border: 1px solid #eeeeee; margin: 100px auto 0; width: 500px; overflow: hidden; } .box{ width: 300px; height: 40px; border: 1px solid #f4f4f4; line-height: 40px; margin: 10px auto; overflow: hidden; } .box label{ width: 60px; text-align: center; display: inline-block; } .box input{ width: 60%; height: 100%; border: none; outline: none; font-size: 18px; } .box input[type=button]{ width: 100%; } </style>
</head>
<body>
<div class="container">
<form action="javascript:;">
<div class="box account-box">
<label>賬號：</label>
<input type="text" name="account" />
</div>
<div class="box account-box">
<label>密碼：</label>
<input type="password" name="password" />
</div>
<div class="box account-box">
<input type="submit" value="注冊" />
</div>
</form>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js">
</script>
<script type="text/javascript"> $("form").submit(function () { var account=$('input[type=text]').val() var password=$('input[type=password]').val() $.post('ajax.php', { account:account, password:password }, function (data) { if (data===true) { console.log("注冊成功") } else{ console.log("注冊失敗") } }, 'json'); }); </script>
</html>
<?php $account = $_POST['account']; $password = $_POST['password']; $flag=true; if ($account==$password) { $flag=false; } echo json_encode($flag,JSON_UNESCAPED_UNICODE);
5、$.getJSON(url, [data], [callback])：通過HTTP GET請求獲取JSON數據。可以通過使用JSONP形式的回調函數來加載其他網站的數據。如：”myulr?cb=?”，jQuery會自動替換 ? 為正確的函數名，以執行回調函數。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq.ajax方法</title>
</head>
<body>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js">
</script>
<script type="text/javascript">
// 通過getJSON跨域獲取數據
$.getJSON('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&json=1&p=3&sid=1464_25548_21101_18559_17001_20719&req=2&csor=1&cb=?', {a:'b'}, function (data) { console.log(data); }); </script>
</html>
6、$.getScript(url, [callback])：通過HTTP GET請求載入並執行一個JS文件。
// 獲取js代碼，可執行當代碼處理
$.getScript('ajax.php', function (data) { console.log(data); });
四、jQuery序列化方法（可擴展反序列化）
$(DOM).serialize()：序列表單內容為字符串，用於AJAX請求。
$(DOM).serializeArray()：序列化表單元素，返回JSON數據結構數據。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq.ajax方法</title>
<style type="text/css">
*{ padding: 0; margin: 0; } .container{ border: 1px solid #eeeeee; margin: 100px auto 0; width: 500px; overflow: hidden; } .box{ width: 300px; height: 40px; border: 1px solid #f4f4f4; line-height: 40px; margin: 10px auto; overflow: hidden; } .box label{ width: 60px; text-align: center; display: inline-block; } .box input{ width: 60%; height: 100%; border: none; outline: none; font-size: 18px; } .box input[type=button]{ width: 100%; } </style>
</head>
<body>
<div class="container">
<form action="javascript:;">
<div class="box account-box">
<label>賬號：</label>
<input type="text" name="account" />
</div>
<div class="box account-box">
<label>密碼：</label>
<input type="password" name="password" />
</div>
<div class="box account-box">
<input type="submit" value="注冊" />
</div>
</form>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js">
</script>
<script type="text/javascript"> $("form").submit(function () { // var account=$('input[type=text]').val() // var password=$('input[type=password]').val()
var param=$(this).serializeArray() console.log(param)//json格式
var param=$(this).serialize() console.log(param)//字符串格式
$.post('ajax.php', param, function (data) { if (data===true) { console.log("注冊成功") } else{ console.log("注冊失敗") } }, 'json'); }); </script>
</html>
<?php $account = $_POST['account']; $password = $_POST['password']; $flag=true; if ($account==$password) { $flag=false; } echo json_encode($flag,JSON_UNESCAPED_UNICODE);
