JQuery 插件
//表单验证插件 $("#formid").validate({自定义规则});
$("#formid").validate({
rules:{
email:{
required:true,
email:true
}
},
errorPlancement:function(error,element){
error.appendTo("#错误信息提示id");
}
});
//表单插件form
var options = {
url:"www.baidu.com",
target:"#返回内容显示的id"
}
$("#formid").ajaxForm(options);
//放大镜
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片放大镜插件</title>
<link href="http://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">图片放大镜</span>
</div>
<div class="content">
<a href="http://img.mukewang.com/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖">
<img src="http://img.mukewang.com/52e4aee700012df702130212.jpg" alt=""/>
</a>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#jqzoom").jqzoom{ //绑定图片放大插件jqzoom
zoomWidth: 123, //小图片所选区域的宽
zoomHeight: 123, //小图片所选区域的高
zoomType: 'reverse' //设置放大镜的类型
});
});
</script>
</body>
</html>
//cookie插件
$.cookie(key,value,{expires: 7, path: ‘/’}); //新建 保存 并设置相关属性: 有效期 路径
$.cookie(key);//读取
$.cookie(key,null);//清除
//右键菜单插件 contextmenu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>右键菜单插件</title> <link href="http://www.imooc.com/data/jquery.contextmenu.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script src="http://www.imooc.com/data/jquery.contextmenu.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div class="title"><span class="fl">点击右键</span></div> <div class="content"> <input id="btnSubmit" type="button" value="提交" /> <div class="tip"></div> </div> <div class="contextMenu" id="sysMenu"> <ul> <li id="Li3"><img src="http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li> <li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.jpg" alt="" />退出</li> </ul> </div> </div> <script type="text/javascript"> $(function () { $("#btnSubmit").contextMenu("sysMenu", { bindings: { 'Li3': function (Item) { $(".tip").show().html("您点击了“保存”项"); }, 'Li4': function (Item) { $(".tip").show().html("您点击了“退出”项"); } } }); }); </script> </body> </html>
//ul鼠标滑过li时 li的背景色改变
$("ul").focusColor("red"); //鼠标经过ul时 li的背景色为红色
//加
$.addNum($("#txtid1").val(),$("#txtid2").val());//两个数相加
//减
$.subNum($("#txtid1").val(),$("#txtid2").val());//两个数相减
