标签： 我的笔记
JQuery中的动画
显隐 show、hide
$("div").hide(); //隐藏所有DIV元素，相当于sytle=”display:none”
$("div").show(); //显示所有DIV元素
加特效 duang
$("div").hide(1000);//一秒内隐藏
slow() 600毫秒， normal() 400毫秒， fast() 200毫秒
透明度 fadeIn、fadeOut
$("div").fadeOut(); //变透明，直至消失（支持速度参数）
$("div").fadeIn(); //变清晰
收缩 slideUp、slideDown
$("div").slideUp(); //向上收缩，直至消失（支持速度参数）
$("div").slideDown(); //向下
自定义动画animate
$(elem).animate(params, speed, callback);
- params：样式属性及值的映射 {property1:"value", property2:"value"}
- speed: 速度参数
- callback: 动画完成后执行函数，可选
即：用speed毫秒将elem的样式改为params的值。
$("#myDiv").animate({left:"500px"}, 2000); //两秒内将元素的left属性改为500px
$("#myDiv").animate({left:"+=500px"}, 2000); //同上，支持累加、累减
$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上，多重动画，同时执行
多个animate可以形成动作队列。
停止动画
$("#myDiv").stop([cleanQuene] [,gotoEnd]);
判断元素是否在执行动画
$("#myDiv").is(":animate");
其它动画
$("#myDiv").toggle(); //显示与隐藏元素
$("#myDiv").slideToggle(); //展开与收缩元素
$("#myDiv").fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%
jQuery操作表单、表格
表单应用
单行文本框
$(":input").focus(function() { // 获得焦点时
$(this).addClass("focus");
if ($(this).val() == this.defaultValue) {
$(this).val("");
}
}).blur(function() { // 失去焦点时
$(this).removeClass("focus");
if ($(this).val() == '') {
$(this).val(this.defaultValue);
}
});
多行文本框
1、放大、缩小多行文本框的高度
var $txt = $(“#textArea”);
$(“.bigger”).click(function(){
if( $txt.height() < 500)
$txt.height( $txt.height() + 50 );
});
复选框 （实现全选、全不选、反选）
//全选
$(“#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; //这里用js更简单
}
});
//输出值
$("#btnCheckedRev").click(function(){
var str="你选中的是：\r\n";
$('[name=items]:checkbox:checked').each(function(){
str+=$(this).val()+"\r\n";
})
alert(str);
});
下拉框
将一个下拉列表的选中项搬至另一个下拉列表
//将选中选项搬过去
$(“#btnAdd”).click(function(){
$(“#mySelect1 option:selected”).appendTo(“#mySelect2″);
});
//将全部选项搬过去
$(“#btnAddAll”).click(function(){
$(“#mySelect1 option”).appendTo(“#mySelect2″);
});
//双击项搬过去
$(“#mySelect1″).dblclick(function()[
$("#mySelect1 option:selected").appendTo("#mySelect2");
}
表单验证
//往每个class有required样式的input元素后面添加*号
$("form :input.required").each(function(){
$(this).parent().append( $("*") );
});
//失去焦点时验证域
$("form :input.required").blur(function(){
if( this.value == "" ){
$(this).parent().append( $("必填字段") );
}
else{
$(this).parent().append( $("验证正确") );
$(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
加载数据：$(selector).load()
$(selector).load( url [,data] [,callback] )方法
url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数
1、 载入HTML文档
$(“#myDiv”).load(“hello.html”); //向myDiv元素加载hello.html的内容
2、 筛选载入的HTML文档
$(“#myDiv”).load(“hello.html .myClass”); //筛选，只加载hello.html中myClass样式的内容
3、 传递方式
load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST方式。
$(“#myDiv”).load(“hello.html”, function(){
//...
} );//无参数是GET
$(“#myDiv”).load(“hello.html”, {id:’123′, name:’dier’}, function(){
//...
} ); //有参数是POST
4、 回调参数
$(“#myDiv”).load(“hello.html”, function(responseText, textStatus, XMLHttpRequest){
//responseText : 请求返回的内容
//textStatus : 请求状态 success error notmodified timeout
//XMLHttpRequest : Ajax对象
});
请求数据：$.get()，$.post()
$.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
//1、当data是HTML时，直接加载
$(“#myDiv”).html(data);
//2、当data是XML时，可筛选 脚本载入：$.getScript()
$.getScript(url [,callback])方法
//1、动态加载JS脚本
$.getScript(“test.js”);
//2、动态加载JS脚本，并使用回调函数
$.getScript(“test.js”, function(){
//do something..
});
getScript()函数可以远程载入js脚本并且执行。（JSONP）。
请求JSON数据：$.getJSON()
$.getJSON(url [,callback])方法
它是设置了JSON参数的 ajax()函数的一个简化版本。也是可以跨域使用的。
$(function(){
//1、动态加载JS脚本
$.getJSON(“test.js”);
2、动态加载JS脚本，并使用回调函数
$.getJSON(“test.js”, function(data){
//do something..
$.each( data, function(index, item){
//遍历，相当于foreach
//index : 索引
//item : 当前项内容
//return false; 退出循环
});
});
});
请求数据：$.ajax(options)方法
最复杂的请求数据方法ajax。
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()
//将form1整个表单中的所有域序列化成提交的参数，支持自动编码
//比如：`name=abc&age=18`
$.get( “test.aspx”, $(“#form1″).serialize(), function(data,textStatus){
//。。。
});
序列化数组 serializeArray()
//将所有checkbox和radio选中的内容序列化
//比如：`mycheck=1&mycheck=4&myradio=1`
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();
});