JQuery学习笔记（2）
//---------------------------- 第四章 JQuery中的事件和动画 -------------------------------
·加载DOM
$(window).load() 等价于 window.onload 事件
$(document).ready() 相当于window.onload事件，但有些区别：
(1)执行时机：
window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行
$(document).ready() 是在DOM完全就绪时就可以被调用，此时，并不意味着这些元素关系的文件都已经下载完毕
(2)多次使用：可以在同一个页面注册多个$(document).ready()事件
(3)简写方式：可以缩写成 $(function(){ }) 或 $().ready()
·事件绑定
当文档装载完成后，可以通过bind()方法，为特定的元素进行事件的绑定，可重复多次使用
bind( type, [data, ] fn );
type：指事件的类型:
blur（失去焦点）、focus（获得焦点）
load（加载完成）、unload（销毁完成）
resize（调整元素大小）、scroll（滚动元素）
click（单击元素事件）、dbclick（双击元素事件）
mousedown（按下鼠标）、mouseup（松开鼠标）
mousemove（鼠标移过）、mouseover（鼠标移入）、mouseout（鼠标移出）
mouseenter（鼠标进入）、mouseleave（鼠标离开）
change（值改变）、select（下拉框索引改变）、submit（提交按钮）
keydown（键盘按下）、keyup（键盘松开）、keypress（键盘单击）
error（异常）
data：指事件传递的属性值，event.data 额外传递给对象事件的值
fn：指绑定的处理函数，在此函数体内，$(this)指携带相应行为的DOM元素
·合并事件
hover(enter,leave)：鼠标移入执行enter、移出事件执行leave
$("#myDiv").hover( function(){
$(this).css("border", "1px solid black");0
}, function(){
$(this).css("border", "none");
});
toggle(fn1,fn2,...fnN)：鼠标每点击一次，执行一个函数，直到最后一个后重复
$("#myDiv").toggle( function(){
$(this).css("border", "1px solid black");0
}, function(){
$(this).css("border", "none");
});
·事件冒泡
下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分别将三种元素都注册click事件。
那么，click事件会按照DOM的层次结构，像水泡一样不断向上直到顶端，所以称之为事件冒泡。
<body><div><span>我是SPAN我怕谁</span></div></body>
$("span").bind("click", function(){ alert('span click'); });
$("div").bind("click", function(){ alert('div click'); });
$("body").bind("click", function(){ alert('body click'); });
·阻止冒泡
解决这个问题的办法是：在SPAN执行完click事件后，停止事件冒泡。
$("span").bind("click", function(event){
alert('span click');
event.stopPropagation(); //停止冒泡
});
·阻止默认行为
提交按钮在提交前做相应的逻辑判断，当不满足时
$("#btnSubmit").bind("click", function(event){
event.preventDefault(); //阻止默认行为 相当于return false;
});
·事件对象的属性
$("#myDiv").bind("click", function(event){ });
event.type() //返回：click
event.target() //获取当前元素
event.relatedTarget() //引发事件的元素
event.pageX()/event.pageY() //获取鼠标相对于页面的X和Y坐标
event.which() //在单击事件中获取到对应的按键 鼠标左中右分别是123
event.metaKey() //获取操作中的相关功能键（ctrl/alt/shift）
·移除事件
$("#myDiv").bind("click", fn1 = function(){
alert("function1");
}).bind("click", fn2 = function(){
alert("function2");
}).bind("click", fn3 = function(){
alert("function3");
});
$("#myDiv").unbind(); //移除id为myDiv的元素的所有事件
$("#myDiv").unbind("click"); //移除id为myDiv的元素的所有click事件
$("#myDiv").unbind("click",fn1); //移除id为myDiv的元素的名称为fn1的click事件
·一次性事件：绑定的事件执行一次后自动移除
$("#myDiv").one("click", [data], function(){
alert("function1");
});
·触发事件
$("#btn").trigger("click", [data]); //代码方式触发click事件
$("#btn").click(); //另一种简写方式
·事件命名空间
$("#myDiv").bind("click.hello", function(){
alert("function1");
});
$("#myDiv").bind("click", function(){
alert("function1");
})
$("div").unbind("click"); //两个事件都被移除
$("div").unbind(".hello"); //只移除第一个
$("div").unbind("click!"); //只移除第二个（注意感叹号，指没有名字空间的）
·JQuery中的动画
$("div").hide(); //隐藏所有DIV元素，相当于sytle="display:none"
$("div").show(); //显示所有DIV元素
$("div").hide(1000); //一秒内隐藏所有DIV元素，其它参数还有：slow(600) normal(400) fast(200)
$("div").show(1000); //一秒内显示所有DIV元素
$("div").fadeOut(); //降低元素的不透明度，直至消失（支持速度参数，不会改变宽高）
$("div").fadeIn(); //升高元素的不透明度，直至显示
$("div").slideUp(); //由下至上收缩元素，直至消失（支持速度参数）
$("div").slideDown(); //由上至下展开元素，直至显示
·自定义动画animate
$(elem).animate(params, speed, callback);
params：样式属性及值的映射 {protected:"value", protected:"value"}
speed: 速度参数
callback: 动画完成后执行函数，可选
$("#myDiv").animate({left:"500px"}, 2000); //两秒内ID为myDiv的元素移至左边距500px的位置
$("#myDiv").animate({left:"+=500px"}, 2000); //同上，支持累加、累减
$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上，多重动画，同时执行
$("#myDiv").animate({opacity:"0.5"}, 1000) //先变成50%透明
.animate({top:"500px"}, 500) //移至离顶端500px
.animate({left:"500px"}, 500) //移至离左边500px
.fadeOut(1000); //显示出来 （四个动作为队列，一步步执行）
$("#myDiv").stop([cleanQuene] [,gotuEnd]); //停止动画，参数为boolean
$("#myDiv").is(":animate") //判断元素是否在执行动画
·其它动画
$("#myDiv").toggle(); //显示与隐藏元素
$("#myDiv").slideToggle(); //展开与收缩元素
$("#myDiv").fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%
//-------------------- 第五章 JQuery对表单、表格的操作及更多应用 ------------------------
·单选文本框应用（获得焦点时，加了个特殊的样式，失去焦点时还原，兼容所有浏览器）
$(":input").focus(function(){ this.addClass("inputFocus"); })
.blur(function(){ this.removeClass("inputFocus"); });
·多行文本框的应用（放大、缩小多行文本框的高度，限制最大500px，兼容所有浏览器）
var $txt = $("#textArea");
$(".bigger").click(function(){
if( $txt.height() < 500) $txt.height( $txt.height() + 50 );
//if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );
});
$(".smaller").click(function(){
if( $txt.height() > 100) $txt.height( $txt.height() - 50 );
//if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );
});
·复选框的应用（实现全选、全不选、反选）
$("#btnCheckedAll").click(function(){ //全选
$("[name=items]:checkbox").attr("checked", true);
});
$("#btnCheckedNone").click(function(){ //全不选
$("[name=items]:checkbox").attr("checked", false);
});
$("#btnCheckedRev").click(function(){ //反选
$("[name=items]:checkbox").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
//this.checked = !this.checked;
}
});
·下拉框的应用（将一个下拉列表的选中项搬至另一个下拉列表）
$("#btnAdd").click(function(){ //将选中选项搬过去
$("#mySelect1 option:selected").appendTo("#mySelect2");
});
$("#btnAddAll").click(function(){ //将全部选项搬过去
$("#mySelect1 option").appendTo("#mySelect2");
});
$("#mySelect1").dblclick(function()[ //双击项搬过去
$("#mySelect1 option:selected").appendTo("#mySelect2");
}
·表单验证
<form>
<div>
<label>用户名：</label>
<input type="text" id="txtUid" class="required" value="" />
</div>
</form>
$("form :input.required").each(function(){ //往每个class有required样式的input元素后面添加*号
$(this).parent().append( $("<span class='star'>*</span>") );
});
$("form :input.required").blur(function(){ //失去焦点时验证域
if( this.value == "" ){
$(this).parent().append( $("<span class='error'>必填字段</span>") );
}
else{
$(this).parent().append( $("<span class='success'>验证正确</span>") );
$(this).parent().find(".error").remove();
}
}).keyup(function(){ //用户每点一个键触发
$(this).triggerHandler("blur");
}).focus(function(){ //控制有焦点时触发
$(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
$("form :input.required").trigger("blur"); //让所有需要验证的域失去焦点
var errNum = $("form .error").length;
if( errNum ){
alert("有验证字段失败，请重新填写");
return false;
}
});
·表格应用
$("tr:odd").addClass("oddTr"); //给奇数行添加oddTr样式
$("tr:even").addClass("evenTr"); //给偶数行添加evenTr样式
$("tr:contains('王五')").addClass("highlightTr"); //查找包含“王五”的行，添加highlightTr样式
$("tr").click(function(){
$(this).addClass("selectedTr") //给当前行添加选中样式
.siblings().removeClass("selectedTr") //反选移除选中样式
.end() //结束，返回$(this)，否则则是反选的行
.find(':radio").attr("checked",true); //在当前行查找单选框，选中它
});
//-------------------- 第六章 JQuery与Ajax的应用 ------------------------
·load( url [,data] [,callback] )方法
url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数
$("#myDiv").load("hello.html"); //向myDiv元素加载hello.html的内容
$("#myDiv").load("hello.html .myClass"); //筛选，只加载hello.html中myClass样式的内容
$("#myDiv").load("hello.html", function(){} ); //没参数的，使用GET方式
$("#myDiv").load("hello.html", {id:'123', name:'dier'}, function(){} ); //有参数的，使用POST方式
$("#myDiv").load("hello.html", function(responseText, textStatus, XMLHttpRequest){ //回调函数
//responseText : 请求返回的内容
//textStatus : 请求状态 success error notmodified timeout
//XMLHttpRequest : Ajax对象
});
·$.get( url [,data] [,callback] [,type])和$.post( url [,data] [,callback] [,type])方法
url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数
type：指定服务器返回内容的格式 xml html script json text _default
$.get( "test.aspx", {id:"123", name:"dier"}, function(data,textStatus){ //回调函数只有当状态是success才触发
//data : 请求返回的内容
//textStatus : 请求状态 success error notmodified timeout
//当data是HTML时，直接加载
$("#myDiv").html(data);
//当data是XML时，可筛选 <user id="123" name="dier" age="27" />
var age = $(data).find("user").attr("age");
//当data是JSON时，可直接点出属性来 {id:"123", name:"dier", age:"27"}
var age = data.age;
});
·getScript(url [,callback])方法
$(function(){ //动态加载JS脚本
$.getScript("test.js");
$.getScript("test.js", function(){ //回调函数
//do something..
});
});
·getJSON(url [,callback])方法
$(function(){ //动态加载JS脚本
$.getJSON("test.js");
$.getJSON("test.js", function(data){ //回调函数
//do something..
//data : 返回的数据
$.each( data, function(index, item){ //遍历，相当于foreach
//index : 索引
//item : 当前项内容
//return false; 退出循环
});
});
});
·ajax(options)方法
url : 请求的地址
type : 请求的方式 GET POST 默认为GET
timeout : 请求超时时间(单位：毫秒）
data : 请求时发送的参数（String,Object）
dataType : 预期返回的数据类型 xml html script json jsonp text
bdforeSend : 发送请求前触发事件，如果return false则取消发送 function(XmlHttpRequest){}
complete : 请求完成后触发事件，不管成功与否 function(XmlHttpRequest, textStatus){}
success : 请求完成并且成功时触发事件 function(data, textStatus){}
error : 请求完成并且失败时触发事件 function(XmlHttpRequest, textStatus, errorThrown){}
global : 是否为全局请求，默认为true，可使用AjaxStart、AjaxStop控制各种事件
$.ajax({
url : "test.aspx",
type : "POST",
timeout : "3000",
data : {id:"123", name:"dier"},
dataType : "HTML",
success : function(data,textStatus){
$("#myDiv").html( data );
}
error : function(XmlHttpRequest, textStatus, errThrown){
$("#myDiv").html( "请求失败：" + errThrown );
}
});
·序列化字符串 serialize()
$.get( "test.aspx", $("#form1").serialize(), function(data,textStatus){
//将form1整个表单中的所有域序列化成提交的参数，支持自动编码
});
·序列化数组 serializeArray()
var arr = $(":checkbox, :radio").serializeArray();
·对象序列化 param()
var obj = {id:"123", name:"dier", age:"27"};
var kv = $.param(obj); //id=123&name=dier&age=27
·JQuery中的全局Ajax事件
ajaxStart(callback) //请求开始时触发
ajaxStop(callback) //请求结束时触发
ajaxComplete(callback) //请求完成时触发
ajaxSuccess(callback) //请求成功时触发
ajaxError(callback) //请求失败时触发
ajaxSend(callback) //请求发送前触发
$("#loading").ajaxStart(function(){ //当有AJAX请求时显示，完成时隐藏
$(this).show();
}.ajaxStop(function(){
$(this).hide();
}
);