jquery的插件

来源：互联网发布：平克弗洛伊德知乎编辑：程序博客网时间：2024/04/30 23:00

jquery.form表单提交：

<script language="javascript" src="jquery.min.js"></script><script language="javascript" src="jquery.form.js"></script><script language="javascript">$(function(){$("input[type=button]:eq(0)").click(function(){var options = {target: "#myTargetDiv"};//ajax一步上传表单$("#myForm").ajaxSubmit(options);});});</script></head><body><form id="myForm" name="myForm" action="15-4.aspx"><table cellspacing="0" id="formTable"><tr><td>用户</td><td><input name="Name" type="text"></td></tr><tr><td>密码</td><td><input name="Password" type="password"></td></tr><tr><td colspan="2" align="center"><input type="button" name="ajaxSub" value="AjaxSubmit"><input type="submit" name="Sub" value="NormalSubmit"></td></tr></table></form><div id="myTargetDiv"></div></body>

jquery拖拽效果：

<script language="javascript" src="jquery.ui/jquery-1.2.4a.js"></script><script language="javascript" src="jquery.ui/ui.base.min.js"></script><script language="javascript" src="jquery.ui/ui.draggable.min.js"></script><script language="javascript">$(function(){for(var i=0;i<3;i++){//添加三个透明的<div>块$(document.body).append($("<div class='block'>Div"+i.toString()+"</div>").css("opacity",0.6));}//直接调用拖拽方法$(".block").draggable();});</script>

购物车：

<script language="javascript" src="jquery.ui/jquery-1.2.4a.js"></script><script language="javascript" src="jquery.ui/ui.base.min.js"></script><script language="javascript" src="jquery.ui/ui.draggable.min.js"></script><script language="javascript" src="jquery.ui/ui.droppable.min.js"></script><script language="javascript">$(function(){$(".draggable").draggable({helper:"clone"});$("#droppable-accept").droppable({accept: function(draggable){//接收类别为green的return $(draggable).hasClass("green");},drop: function(){$(this).append($("<div></div>").html("drop!"));}});});</script></head><body><div class="draggable red">draggable red</div><div class="draggable green">draggable green</div><div id="droppable-accept" class="droppable">droppable<br></div></body>