一、jQuery的事件
方法 |
描述 |
向匹配元素附加一个或更多事件处理器 |
|
触发、或将函数绑定到指定元素的 blur 事件 |
|
触发、或将函数绑定到指定元素的 change 事件 |
|
触发、或将函数绑定到指定元素的 click 事件 |
|
触发、或将函数绑定到指定元素的 double click 事件 |
|
向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
|
移除所有通过 live() 函数添加的事件处理程序。 |
|
触发、或将函数绑定到指定元素的 error 事件 |
|
返回 event 对象上是否调用了 event.preventDefault()。 |
|
相对于文档左边缘的鼠标位置。 |
|
相对于文档上边缘的鼠标位置。 |
|
阻止事件的默认动作。 |
|
包含由被指定事件触发的事件处理器返回的最后一个值。 |
|
触发该事件的 DOM 元素。 |
|
该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
|
描述事件的类型。 |
|
指示按了哪个键或按钮。 |
|
触发、或将函数绑定到指定元素的 focus 事件 |
|
触发、或将函数绑定到指定元素的 key down 事件 |
|
触发、或将函数绑定到指定元素的 key press 事件 |
|
触发、或将函数绑定到指定元素的 key up 事件 |
|
为当前或未来的匹配元素添加一个或多个事件处理器 |
|
触发、或将函数绑定到指定元素的 load 事件 |
|
触发、或将函数绑定到指定元素的 mouse down 事件 |
|
触发、或将函数绑定到指定元素的 mouse enter 事件 |
|
触发、或将函数绑定到指定元素的 mouse leave 事件 |
|
触发、或将函数绑定到指定元素的 mouse move 事件 |
|
触发、或将函数绑定到指定元素的 mouse out 事件 |
|
触发、或将函数绑定到指定元素的 mouse over 事件 |
|
触发、或将函数绑定到指定元素的 mouse up 事件 |
|
向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
|
文档就绪事件（当 HTML 文档就绪可用时） |
|
触发、或将函数绑定到指定元素的 resize 事件 |
|
触发、或将函数绑定到指定元素的 scroll 事件 |
|
触发、或将函数绑定到指定元素的 select 事件 |
|
触发、或将函数绑定到指定元素的 submit 事件 |
|
绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。 |
|
所有匹配元素的指定事件 |
|
第一个被匹配元素的指定事件 |
|
从匹配元素移除一个被添加的事件处理器 |
|
从匹配元素移除一个被添加的事件处理器，现在或将来 |
|
触发、或将函数绑定到指定元素的 unload 事件 |
绑定事件：
bind:问题①隐式迭代：把匹配的标签都绑定一个事件，造成性能低
②对于尚未存在的标签，无法绑定事件
示例：
$(“div p”).bind(“click”,function(){
console.log($(this).text())
})
移除bind绑定的事件：$(“div p”).unbind(“click”)
delegate:采用的是事件委托的概念,比bind要好，问题：要是DOM层级比较深，不太好用
示例：
$(“div”).delegate(“p”,”click”,function(){
console.log($(this).text());
})
on：基本和delegate原理是一样的(常用方法)
示例：
$(“div”).on(”click”,“p”,function(){
console.log($(this).text());
})
移除on绑定的事件：$(“div”).off(“click”,”p”)
live(基本不用)
one:绑定一次性事件,只绑定一次
示例：$(“#btn2”).one(“click”,function(){
console.log(“******”)
})
总结：①选择器匹配到的元素比较多时，不要用bind()迭代绑定
②用id选择器时，可以用bind()
③需要给动态添加的元素绑定时，用delegate()或者on()
④用delegate()和on()方法，dom树不要太深
⑤尽量使用on()
二、jQuery事件（模拟用户的触发操作）
trigger()：模拟用户触发操作
triggerHandle():与trigger()是一样的，与其不同的是，不会导致浏览器同名的默认行为被执行
例子：
$(“btn”).bind(“click”,function(){
console.log(“*****”)
}).trigger(“click”) //不用鼠标点击，自己执行click事件
三、jQuery事件（模仿悬停事件）
hover(移入函数,移出函数)
示例：$(“btn”).hover(function(){
console.log(“移入”)
},function(){
console.log(“移出”)
})
四、jQuery中的事件处理（事件对象）
$(“btn”).bind(“click”.function(e){
console.log(e)
})
五、jQuery阻止事件冒泡
stopPropagation()
示例：
$(“body”).bind(“click”,function(){
$(this).css(“background-color”,”blue”)
})
$(“#box”).bind(“click”,function(e){
$(this).css(“background-color”,”yellow”)
e.stopPropagation()
})
六、jQuery动画效果（隐藏与显示）
帧动画：setInterval(function(){},1000/24)
①隐藏：hide() //可在括号内加参数，数值表示多久隐藏
示例：$(“#btn1”).click(function(){
$div.hide(2000,function(){ //2000数值表示多久结束，结束后调用函数function
console.log(“动画结束”)
})
})
也可以用hide(“slow”) //slow对应的值是600
“normal” //normal对应的值是400
“fast” //fast对应的值是200
②显示：show() //显示中的所带参数也是跟hide差不多
③显示与隐藏切换：toggle()
七、jQuery动画效果（淡入淡出）
①fadeOut():淡出效果，参数与隐藏与显示一样
②fadeIn():淡入效果
③fadeTo(时间,透明度):调节透明度的，位置依然还在
示例：fadeTo(1000,0.1)
八、jQuery动画效果（滑动显示匹配的元素，滑动隐藏匹配的元素，通过高度的变化动态切换元素的可见性）
①slideUp():向上隐藏
②slideDown():向下显示
③slideToggle():一个按键控制隐藏和显示
④animate(params[,speed][,callback])
params就是动画移动的路线的设置
例子1：
<body style=”position:relative;”
<div id=”box” style=”position:absolute;left:0;top:0”></div>
<script type=”text/javascript”>
var $div = $(“#box”)
$div.animate((left:”200px”),1000)
</script>
</body>
例子2：
<body style=”position:relative;”
<div id=”box” style=”position:absolute;left:0;top:0”></div>
<button id=”btn1”>停止</button>
<script type=”text/javascript”>
var $div = $(“#box”)
var a = $div.animate((left:”200px”),1000).delay(1000).animate((top:”100px”),1000) //接连动作，先向左移动，延迟一秒之后向下移动
$(“#btn1”).click(function(){
a.stop(true,true) //点击按钮之后会停止动画
})
</script>
</body>
注意：
1.在使用animate()方式时，必须设置元素的定位属性position为relative或absolute，元素才能动起来，如果没有明确定义元素的定位属性，并试图使用animate()方法移动元素时，
只会静止不动
2.在animate()方法中可以使用属性opacity来设置元素的透明度
3.如果在{left:”400px”}中的400px之前加上”+=”就表示在当前位置累加，”-=”就表示在当前位置累减
停止动画stop()方法
stop(clearQueue,gotoEnd)
clearQueue:表示是否清空尚未执行完的动画队列（值为true时表示清空动画队列）
gotoEnd：表示是否让正在执行的动画直接到达动画结束时的状态（值为true是表示直接到达动画结束时的状态）
注意：参数gotoEnd设置为true时，只能直接到达正在执行的动画的最终状态，并不能达到动画序列所设置的动画的最终状态
判断动画是否在执行
$(“#btn2”).click(function(){
if(a.is(:animated)){
console.log(“*****”)
}
})
九、同源策略
要求动态内容只能阅读与之同源的那些HTTP应答和cookies，而不能阅读来自非同源的内容
同源三大要素：①同协议 ②同域名/同ip ③同端口
十、Ajax
请求方法：
$.ajax{(
type:”get”, //请求类型
url:””, //文件网络地址
async:true, //是否异步的问题（可以不写这个）
data:{}, //data是给服务器发送数据的（一般也不用），提交表单时候用
success: function(data,textStatus){
var d = data[“CATALOG”][“CD”] //从json中获取数据
for (var i =0;i<d.length;i++){ //将数据显示在网页中
var info = d[i]
var $p = $(“<p>”+info[“TITLE”]+”</p>”)
$(“#box”).append($p)
}
},//此处的success是请求发送成功，服务器并成功返回数据，就调用函数；其中函数中的参数data就是服务器返回的数据
)};
*$.get 和 $.post 都知识$.ajax的分支