jquery 学习小结4

继续读书记下心得
1 toggle(switch)
如果是显示，则隐藏；如果是隐藏，则显示
比如某张图片 $("img").toggle();

2 sligdeToggle()，自动判断以进行高度的增减的动画效果
$(function() {
$(".divFrame").click(function() { //div元素点击事件
//图片高度状态自动切换，并执行一个回调函数
$("img").slideToggle(3000, function() {
$("img").css("border", "solid 1px #ccc");
})
})
})
3 animate动画效果
$(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) //延时切换图片

6 ajax加载用法
使用load方法比如
$("#divtips").load("c.html);
load方法中可以加载另外一个页面的某个类别的元素，比如
$("#divtips").load("c.html.divcontent);

getJSON方法的使用，比如：
$.getJSON("UserInfo.json", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$.each(data, function(InfoIndex, Info) { //遍历获取的数据
strHTML += "姓名：" + Info["name"] + "<br>";
})
})
7 getScript的使用
可以在jquery中加载另外一个JS，比如
$.getScript("xxxx.js");
8 异步加载XML文档
$.get("UserInfo.xml", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$(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"
})
12 ajax的ajaxstart和ajaxstop等事件
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function() {
$(this).show(); //显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function() {
$(this).html("已成功获取数据。").hide();
})
13 jquery validate插件例子
$(function() {
$("#frmV").validate(
{
/*自定义验证规则*/
rules: {
username: { required: true, minlength: 6 },
email: { required: true, email: true }
},
/*错误提示位置*/
errorPlacement: function(error, element) {
error.appendTo(element.siblings("span"));
}
}
);
})
用户名：

<input id="username" name="username"
type="text" class="txt" />
<font color="red">*</font>

<span></span>

14 自动完成插件autocomplete
下载地址:http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip
$(function() {
var arrUserName = ["xxx","yy".....];
$("#txtSearch").autocomplete(arrUserName, {
minChars: 0, //双击空白文本框时显示全部提示数据
formatItem: function(data, i, total) {
return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
},
formatMatch: function(data, i, total) {
return data[0];
},
formatResult: function(data) {
return data[0];
}
}).result(SearchCallback); //选中匹配数据中的某项数据时，调用插件的result()方法
//自定义返回匹配结果函数
function SearchCallback(event, data, formatted) {
$("#divData").html("您的选择是：" + (!data ? "空" : formatted));
}
//点击"查一下"按钮后，触发插件的search()方法
$("#btnSearch").click(function() {
$("#txtSearch").search();
});

15 jquery 插件开发
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) {
var def_col = "#ccc"; //默认获取焦点的色值
var lst_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);
调用例子：
<div class="divContent">
<ul id="u1">
[*]<span>张三</span><span>男</span>

[*]<span>李四</span><span>女</span>

[*]<span>王五</span><span>男</span>

</ul>
</div>
<script type="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;
var intResult = parseInt(p1) + parseInt(p2);
return intResult;
},
"subNum": function(p1, p2) {
//如果传入的数字不为空，使用传入的数字，否则为0
var intResult = 0;
p1 = (p1 == undefined) ? 0 : p1;
p2 = (p2 == undefined) ? 0 : p2;
if (p1 > p2) { //如果传入的参数前者大于后者
intResult = parseInt(p1) - parseInt(p2);
}
return intResult;
}
});
})(jQuery);

使用时：
$(function() {
$("#Button1").click(function() {
$("#Text3").val(
$.addNum($("#Text1").val(),
$("#Text2").val()));
}); //调用自定义的插件计算两数之和

16 upload上传组件
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));

}
})
})
function SetFileContent(objFile) { //根据上传对象返回预览的图片
var sLi = "";
sLi += "<li>";
sLi += "<img src='" + objFile.filePath + "' width='100' height='100'>";
sLi += "<input type='hidden' value='" + objFile.filePath + "'>";
sLi += "
";
sLi += "<a href='javascript:void(0)'>删除</a>";
sLi += "</li>";
return sLi;
}