Ajax
非同期および同期
使用 Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步 有什么区别呢？我们普通的 Web 程序开发基本都是同步的，意为执行一段程序才能执行下 一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务， 感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax 也可以 使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一 条执行，会让 Web 页面出现假死状态，所以，一般 Ajax 大部分采用异步模式。
jQuery对Ajax采用了三层封装，其中最底层的是$.ajax(),中层封装是.load()，$.get()，$.post，最顶层是getScript和getJSON()。
2. .load（）メソッド
jqueryは多くのAjaxをカプセル化します。カプセル化メソッドの場合、jqueryは3層のカプセル化を使用します。ここで、$。ajax（）は下部のカプセル化であり、上部のカプセル化メソッドには.load（ ）メソッド、。get（）、。Get（）、。G E T （）、 .post（）メソッド。
.load()方法是局部方法,.load()方法中共有三个参数，一个是url，链接地址，第二个是发送的数据data，第三个是回调函数callback，期中第二个参数为非必选参数。
1.パラメータurlは、フィルタリング機能を提供できます。
$（）。load（ 'data / test.html'）
$（）。load（ 'data / text.html .box'）>>>フィルター関数
2.データパラメータは、ポストモードでパラメータを送信するかどうかを決定するために渡され、オブジェクトとして渡されます。
$（）。load（ 'data / test.html'、{data： 'admin'}）
3.回调函数function（response、status、xhr）{}
$（）。load（ 'data / test.html'、{data： 'admin'}、function（response、status、xhr）{}）
response ：返回结果，和页面里内容一样 。
status ：状态，success，或者error
xhr ：XMLHttpRequest，他是一个对象
xhrには4つの共通の属性があります。
プロパティ名
説明は
responseText
テキストはレスポンスボディとして返される
のresponseXML
レスポンスボディのコンテンツタイプが「text / xmlで」または「アプリケーション/ xml」である場合には、レスポンスデータを含むXMLDOM文書が返されます。
ステータス
のHTTPのステータス応答を（ステータスコード）
statusTextの
HTTPステータス命令
3つ、.get（）と.get（）と。G E T （）と.post（）
。（GET）と（に.get）と。グラムのE T （）と.post（）パラメータである第1のアドレスパラメータは必須のパラメータである、第2のパラメータデータは、第三のコールバック関数と.LOAD（）メソッドと同じであり、第四の4つのパラメータを有しますタイプ
$ .get（ 'data / test.html'、{name： 'admin'}、 'html'）
由于php返回的值默认为纯文本格式，所以数据格式html和text格式可以不写。如果写入数据格式，那么默认会强制转换为该格式。如果传入错误格式，那么不会有返回值。
注：通常、型は判定のみ可能で、手動で設定する必要はありません。ファイル全体のコードを印刷する必要がない限り、型変換が必要です。
.get（）および.get（）および 。G E T （）との差.post（）である：。取得（）は、道を得るために提出され、に.get（）は、提出を取得する方法です。G E Tは（）であるとG E Tのウェイタイプ言及後、 .post（）モードは、ポスト提出あります。
1.get方式提交数据是吧数据放在浏览器网址上面的，post是通过http消息，实体提交的。
2.get提交方式有大小限制，限制在2KB，而post方式不收大小限制。
3.get方式因为在浏览器中会被历史记录缓存，所以这种提交数据方式并不安全，post方式没有这种问题。
4.在服务器端（php语言），get方式通过$GET[]方式获取，post通过$POST[]方式获取。
第四に、$。ajax（）メソッド。
getScript()和$.getJSON()；
jquery封装AJAX的最顶层，用于特定情况下的使用。 有三个参数,与$.get()和$.post()方法，前三个参数相同。
getScript()在需要资源的时候加载，是实现资源节约的时候需要用到的一个方法。
$.ajax()方法
$.ajax({
url:'', 链接路径
type:'post/get'
用什么方式提交
data:{键:值},
传入数据用键值对方式传入
success:function(){ 成功是传入的参数 }
})
フォームのシリアル化
ページ上のフォームを送信する必要がある場合、データをデータに直接書き込むと、手間がかかるため、フォームのシリアル化が表示されます。
$（ 'form'）。serialize（）
フォームのシリアル化とは、フォームのコンテンツ全体を抽出し、キーと値のペアを形成して、URLをエンコードすることです。
$.ajaxSetup() ajax初始化对于ajax可以做一个预先设置，减少重复。
$.ajaxSetup({
url:'',
type:'post',
data:{user:'ddd'}
})
$.ajax({
success:function(data){
alert(data)
}
})
$ .param（）メソッドは、オブジェクトを解析するために使用されます。
ブラウザによるオブジェクトの分析が制限されているため、複雑すぎるオブジェクトは解析できません。そのため、$。param（）メソッドはオブジェクトを解析しているように見えます。
alert($.param({
email:'ddd',
user:'lll'
}))
グローバル関数タイプ
トリガーされる
タイミングパラメーター
ajaxStart
在jQuery AJAX函数或命令发起时，但在XHR实例被创建之前
类型被设置为ajaxStart的全局回调信息对象
ajaxSend
在XHR实例被创建之后，但在XHR实例被发送给服务器之前
类型被设置为ajaxSend的全局回调信息对象；XHR实例；$.ajax()函数使用的属性
ajaxSuccess
在请求已从服务器返回之后，并且响应包含成功状态码
类型被设置为ajaxSuccess的全局回调信息对象；XHR实例；$.ajax()函数使用的属性
ajaxError
在请求已从服务器返回之后，并且响应包含失败状态码
类型被设置为ajaxError的全局回调信息对象；XHR实例；$.ajax()函数使用的属性；被XHR实例返回的异常对象(如果有的话)
ajaxComplete
在请求已从服务器返回之后，并且在任何已声名的ajaxSuccess或ajaxError回调函数已被调用之后
类型被设置为ajaxComplete的全局回调信息对象；XHR实例；$.ajax()函数使用的属性
ajaxStop
在所有其他AJAX处理完成以及任何其他适用的全局回调函数已被调用之后
类型被设置为ajaxStop的全局回调信息对象
jQueryDOM
jQueryトラバーサル：
祖先：
parent()
parents()
parentsUntil()
子孫：
children()--------- >
find()---------
ブラザーズ：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
フィルタ
eq()
jQueryメソッドが要素値を設定できる場合は、習慣を身に付けてください。メソッドは要素値を取得できる必要があります。
DOM要素と属性の操作。
1.设置（获取）元素内容。
html() 可以获取该元素的标签和内容
html(text)
text(text) 只可以获取该元素的文本内容；
text()
val(text)
val()
addClass( )方法
addClass（class） 给元素添加一个class
addClass( 'class1 class2 class3' )给元素添加多个class
removeClass(class) 给元素删除一个class
removeClass('class1 class2 class3')给元素删除多个class
toggleClass(class) 如果元素没有当前class那么添加，如果有那么删除
デモ：
2。要素の属性を操作します。（取得、設定、変更、削除）
.attr( )
.attr( )的参数有几种设置方法。
1）$('div') .attr('type')获取该属性属性值
2）$('div') .attr('type','value')设置属性值
3)$('div') .attr({
'data':'value1',
'data2':'value2'
})
设置一组属性值；
4）$('div').removeAttr('title')；
3.操作要素のスタイル
css()
注：css（）方法不仅能获取行内样式，也能获取非行内样式
css() 方法的参数有几种设置方法，
css(name) 获取某个元素的行内样式
css('name',value) 设置行内样式
css({
name1:value1,
name2:value2
}) 设置多个行内样式
var box=$('div').css(['color','height','width']); //得到多个 CSS 样式的数组对象
for(var i in box){
//逐个遍历出来 alert(i+':' +box[i]);
}
jquery提供了一个方法$.each()他和for in一样可以遍历对象。
$.each(obj,function(index,value){
})
css方法
width()
height()
innerWidth() 包含内边距（padding）
outerWidth()包含内边距和边框( padding border)
offset() 获取某个元素相对于浏览器窗口(可视区域的距离)
position()获取某个元素相对于父元素的偏移距离
scrollTop()获取垂直滚动条的值；
scrollTop(value)设置垂直滚动条的值;
scrollLeft()获取水平滚动条的值；
scrollLeft(value)设置水平滚动条的值;
jQueryノードの操作
1。ページをよりインテリジェントにするためにノードを作成するために、HTML構造ページに要素タグを動的に追加したい場合があります。挿入する前に実行する最初のアクションは次のとおりです。
1.ノードを作成します。
var box=$('<div id="box">节点</div>'); //创建一个节点 $('body').append(box); //将节点插入到<body>元素内部
2.ノードを挿入します
append(content) 向指定元素内部后面插入节点 content
appendTo(content) 将指定元素移入到指定元素 content 内部后面
prepend(content) 向指定元素 content 内部的前面插入节点
prependTo(content) 将指定元素移入到指定元素 content 内部前面
after(content) 向指定元素的外部后面插入节点 content
before(content) 向指定元素的外部前面插入节点 content
3.ノード操作
$('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中
注：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上 true 参数的话，这个元素附带的事件处理行为也复制出来。
$('div').remove(); //直接删除 div 元素
$('div').empty(); //删除 div 所有的子元素
remove()方法可以接收一个参数，过滤需要删除的元素。
$('div').replaceWith('<span>节点</span>'); //将 div 替换成 span 元素
jQueryイベント
1.jqueryイベントバインディング;
$('input').bind('click',[data],fn)
$('input').bind('click',[1,2,4,5],function(evt) {
alert(evt.data)
})
1)同时绑定多个事件，公用一个事件处理函数
$('input').bind('mouseover mouseout',function(){
alert(1)
})
2）複数のイベントを同時にバインドし、異なるイベント処理関数を使用する
$('input').bind({
mouseout:function(){
alert('移出')
},
mouseover:function(){
alert('移入')
}
})
3）異なるイベント処理関数を同じイベントにバインドします。
$('input').bind('click',fn1)
$('input').bind('click',fn2)
function fn1(){
alert(1)
}
function fn2(){
alert(2)
}
実行順序は、イベントバインディングの順序です。
2.イベントのバインド解除
$('input').unbind() 不传参数的时候默认移除该DOM元素上所有事件。
$('input').unbind('mouseover') 移出该DOM元素上参数（'mouseover'）的事件。
3.jqueryイベント
jquery的事件就是将JavaScript事件简写（省略了on）,然后在后面加上括号。(注：前缀必须是jQuery对象)
document.onclick=function(){ > jQuery 写法> $(document).click(function(){
//事件处理函数 //事件处理函数
} })
值得注意的是mouseover、mouseout 和 mouseenter、mouseleave 的差别
（mouseover）当事件发生在当前元素外的元素上的时候，会立即触发mouseout；
（mouseenter）只要事件还在当前元素内，无论是否移动到子集元素上，都不会触发mouseleave事件
（hover事件）相当于给元素同时绑定了mouseenter 和 mouseleave
$('div').hover(fn1,fn2) // 鼠标移入执行fn1， 鼠标移出执行fn2
function fn1(){
alert(1)
}
function fn2(){
alert(2)
}
4.イベントオブジェクト
JavaScript事件对象是浏览器默认传入的，但是对于浏览器的兼容问题，我们需要对事件对象进行兼容。很烦！但是jQuery已经帮我们解决了所有兼容性的烦恼，并且给我们添加了很多有用的方法。
event.target 获取绑定事件的DOM元素
event.type 获取事件的类型
event.data 获取事件中传递的数据
event.pageX/pageY 获取根据页面原点的X,Y值
event.screenX/screenY 获取根据显示器窗口的X,Y值
event.offsetX/offsetY 获取根据父元素X,Y值
event.which 获取当前鼠标点击的键1,2,3
event.altKey/shiftKey/ctrlKey/ 返回 true、false
5.イベントバブリング（デフォルトイベント）
preventDefault() //阻止默认行为 >>>> contextmenu
stopPropagation() //取消事件冒泡
return false 阻止默认事件和事件冒泡 双层阻止
6.イベントをシミュレートする
$('input').trigger('click');
（jquery对象）.trigger方法(事件名)；
模拟用户触发事件：同时触发事件冒泡。
$（'input'）.triggerHandler('click')
（jquery对象）.triggerHandler方法(事件名)
模拟用户触发事件：不触发事件冒泡。
计时器自动执行事件时可用
7.イベントの名前空間
$（'input'）.bind('click',function(){
alert(1)
})
$（'input'）.bind('click.abc',function(){
alert(1)
})
方便模拟事件、解绑事件时选定特定事件。
8.イベントの委任
什么是事件委托：有 100 个学生同时在某天中午收到快递，但这 100 个学生不可能同时站在学校门口等，那么都会委托门卫去收取，然后再逐个交给学生。 而在 jQuery 中，我们通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素(或祖先元素) 上，然后再进行相关处理即可。
传统事件绑定，会让性能变得很低，造成程序中非常多的冗余，事件委托完美解决了这个问题，他只需要给父级元素绑定一个事件，那么他的自己元素全部会在事件流中接受到事件，并对事件处理函数做出相应。
一个新的方法on(on已经全面取代了bind)
$('div').on('click','input',function(evt){
// alert(evt.target)
$('div').append($('input').eq(0).clone(true))
})
使用on添加事件
使用off删除on添加的事件
使用on添加的事件存在事件的命名空间，方便删除
渡される2番目のパラメーターは、このポイントを変更することです。
Transcript.html