jquery 学习小结4
PHP基础学习 2011-10-14
继续读书记下心得
1toggle(switch)
如果是显示，则隐藏；如果是隐藏，则显示
比如某张图片$("img").toggle();
2sligdeToggle()，自动判断以进行高度的增减的动画效果
$(function(){
$(".divFrame").click(function(){//div元素点击事件
//图片高度状态自动切换，并执行一个回调函数
$("img").slideToggle(3000,function(){
$("img").css("border","solid1px#ccc");
})
})
})
3animate动画效果
$(function(){
$("input:eq(0)").click(function(){//左移按钮点击事件
//在3000毫秒内，以动画的形式向左移动52个像素
$(".divList").animate({left:"-=52px"},3000);
})
$("input:eq(1)").click(function(){//右移按钮点击事件
//在3000毫秒内，以动画的形式向右移动52个像素
$(".divList").animate({left:"+=52px"},3000);
})
})
4动画队列
$(function(){
$("div").click(function(){//div块单击事件
$(this)
.animate({height:100},"slow")//第1列
.animate({width:100},"slow")//第2列
.animate({height:50},"slow")//第3列
.animate({width:50},"slow");//第4列
})
})
5动画的停止和延时
$("img").stop();//停止正在执行的动画
$("img").delay(2000)//延时切换图片
6ajax加载用法
使用load方法比如
$("#divtips").load("c.html);
load方法中可以加载另外一个页面的某个类别的元素，比如
$("#divtips").load("c.html.divcontent);
getJSON方法的使用，比如：
$.getJSON("UserInfo.json",function(data){
$("#divTip").empty();//先清空标记中的内容
varstrHTML="";//初始化保存内容变量
$.each(data,function(InfoIndex,Info){//遍历获取的数据
strHTML+="姓名："+Info["name"]+"<br>";
})
})
7getScript的使用
可以在jquery中加载另外一个JS，比如
$.getScript("xxxx.js");
8异步加载XML文档
$.get("UserInfo.xml",function(data){
$("#divTip").empty();//先清空标记中的内容
varstrHTML="";//初始化保存内容变量
$(data).find("User").each(function(){//遍历获取的数据
var$strUser=$(this);
............................
9向服务端传送数据
.get以及使用.post，比如.post的例子
$.post("User_Info.aspx",
{name:encodeURI($("#txtName").val()),
sex:encodeURI($("#selSex").val())
},
function(data){
$("#divTip")
.html(data);//显示服务器返回的数据
})
当使用中文时，要用encodeUri
10序列化表单
serialize()
将所选择的dom元素转成能随ajax传递的字符串，即序列化所选的dom元素
11$.ajax()方法
可以代替其他$.get,$.post,$.getJSON等
可以设置$.ajaxSetup()设置全局的ajax选项，方便一次过设置
$.ajaxSetup({//设置全局性的Ajax选项
type:"GET",
url:"xxx.xml",
dataType:"xml"
})
12ajax的ajaxstart和ajaxstop等事件
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function(){
$(this).show();//显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function(){
$(this).html("已成功获取数据。").hide();
})
13jqueryvalidate插件例子
$(function(){
$("#frmV").validate(
{
/*自定义验证规则*/
rules:{
username:{required:true,minlength:6},
email:{required:true,email:true}
},
/*错误提示位置*/
errorPlacement:function(error,element){
error.appendTo(element.siblings("span"));
}
}
);
})
用户名：
<inputid="username"name="username"
type="text"class="txt"/>
<fontcolor="red">*</font>
<span></span>
14自动完成插件autocomplete
下载地址:http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip
$(function(){
vararrUserName=["xxx","yy".....];
$("#txtSearch").autocomplete(arrUserName,{
minChars:0,//双击空白文本框时显示全部提示数据
formatItem:function(data,i,total){
return"<I>"+data[0]+"</I>";//改变匹配数据显示的格式
},
formatMatch:function(data,i,total){
returndata[0];
},
formatResult:function(data){
returndata[0];
}
}).result(SearchCallback);//选中匹配数据中的某项数据时，调用插件的result()方法
//自定义返回匹配结果函数
functionSearchCallback(event,data,formatted){
$("#divData").html("您的选择是："+(!data?"空":formatted));
}
//点击"查一下"按钮后，触发插件的search()方法
$("#btnSearch").click(function(){
$("#txtSearch").search();
});
15jquery插件开发
1)封装方法插件
通过jquery选择器获取对象，并为对象添加方法，然后将方法打包，封装为一个插件
2）封闭函数插件
可以直接给jquery添加静态方法，并且将函数置于jquery命名空间中，比如
$.ajax()等
插件以jquery.XXXX.js命名，如果是对象级别的插件，所有方法都依附于jquery.fn
主体对象；如果是类别级别的，依附于jquery对象，结尾都必须用分号结束；
对象级别的插件时，用jquery.fn.extend()扩展；针对类别的话，用jquery.extend()
扩展
3对象级别的例子：
;(function($){
$.fn.extend({
"focusColor":function(li_col){
vardef_col="#ccc";//默认获取焦点的色值
varlst_col="#fff";//默认丢失焦点的色值
//如果设置的颜色不为空，使用设置的颜色，否则为默认色
li_col=(li_col==undefined)?def_col:li_col;
$(this).find("li").each(function(){//遍历表项<li>中的全部元素
$(this).mouseover(function(){//获取鼠标焦点事件
$(this).css("background-color",li_col);//使用设置的颜色
}).mouseout(function(){//鼠标焦点移出事件
$(this).css("background-color","#fff");//恢复原来的颜色
})
})
return$(this);//返回jQuery对象，保持链式操作
}
});
})(jQuery);
调用例子：
<divclass="divContent">
<ulid="u1">
<span>张三</span><span>男</span><span>李四</span><span>女</span><span>王五</span><span>男</span></ul>
</div>
<scripttype="text/javascript">
$(function(){
$("#u1").focusColor("blue");//调用自定义的插件
})
</script>
4）类级别的元素：
;(function($){
$.extend({
"addNum":function(p1,p2){
//如果传入的数字不为空，使用传入的数字，否则为0
p1=(p1==undefined)?0:p1;
p2=(p2==undefined)?0:p2;
varintResult=parseInt(p1)+parseInt(p2);
returnintResult;
},
"subNum":function(p1,p2){
//如果传入的数字不为空，使用传入的数字，否则为0
varintResult=0;
p1=(p1==undefined)?0:p1;
p2=(p2==undefined)?0:p2;
if(p1>p2){//如果传入的参数前者大于后者
intResult=parseInt(p1)-parseInt(p2);
}
returnintResult;
}
});
})(jQuery);
使用时：
$(function(){
$("#Button1").click(function(){
$("#Text3").val(
$.addNum($("#Text1").val(),
$("#Text2").val()));
});//调用自定义的插件计算两数之和
16upload上传组件
uploadify:
下载地址：http://www.uploadify.com/download
$("#uploadify").uploadify({
'uploader':'Images/uploadify.swf',
'script':'Deal/UploadFile.ashx',
'cancelImg':'Images/cancel.png',
'folder':'Uploads/',
'queueID':'fileQueue',
'buttonImg':'Images/uploadify.jpg',
'auto':true,
'multi':true,
'fileExt':'*.jpg;*.jpeg;*.gif;*.png;*.doc;*.docx;*.xls;*.xlsx;*.pdf;*.txt',
'onComplete':function(event,queueID,fileObj,response,data){
$('ul').append(SetFileContent(fileObj));
}
})
})
functionSetFileContent(objFile){//根据上传对象返回预览的图片
varsLi="";
sLi+="<li>";
sLi+="<imgsrc='"+objFile.filePath+"'width='100'height='100'>";
sLi+="<inputtype='hidden'value='"+objFile.filePath+"'>";
sLi+="
";
sLi+="<ahref='javascript:void(0)'>删除</a>";
sLi+="</li>";
returnsLi;
}
