jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一、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);
