左侧菜单
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>left_menu</title><style>.menu{height:500px;width:20%;background-color:gainsboro;text-align:center;float:left;}.content{height:500px;width:80%;background-color:darkgray;float:left;}.title{line-height:50px;background-color:wheat;color:rebeccapurple;}.hide{display:none;}</style></head><body><div><div><div><div>菜单一</div><div><div>111</div><div>111</div><div>111</div></div></div><div><div>菜单二</div><div><div>222</div><div>222</div><div>222</div></div></div><div><div>菜单三</div><div><div>333</div><div>333</div><div>333</div></div></div></div><div></div></div><scriptsrc="jquery.min.js"></script><script>$(".item.title").mouseover(function(){$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");//$(this).next().removeClass("hide");//$(this).parent().siblings().children(".con").addClass("hide");})</script></body></html>
Tab切换
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>tab</title><style>*{margin:0;padding:0;}.tab_outer{margin:20pxauto;width:60%;}.menu{background-color:#cccccc;/*border:1pxsolidred;*/line-height:40px;text-align:center;}.menuli{display:inline-block;margin-left:14px;padding:5px20px;}.menua{border-right:1pxsolidred;padding:11px;}.content{background-color:tan;border:1pxsolidgreen;height:300px;}.hide{display:none;}.current{background-color:#2868c8;color:white;border-top:solid2pxrebeccapurple;}</style></head><body><div><ul><lirelation="c1">菜单一</li><lirelation="c2">菜单二</li><lirelation="c3">菜单三</li></ul><div><div>内容一</div><div>内容二</div><div>内容三</div></div></div></body><scriptsrc="jquery.min.js"></script><script>$(".menuli").click(function(){varindex=$(this).attr("relation");$("#"+index).removeClass("hide").siblings().addClass("hide");$(this).addClass("current").siblings().removeClass("current");});</script></html>
table正反选
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><button>全选</button><button>取消</button><button>反选</button><hr><tableborder="1"><tr><td><inputtype="checkbox"></td><td>111</td><td>111</td><td>111</td><td>111</td></tr><tr><td><inputtype="checkbox"></td><td>222</td><td>222</td><td>222</td><td>222</td></tr><tr><td><inputtype="checkbox"></td><td>333</td><td>333</td><td>333</td><td>333</td></tr><tr><td><inputtype="checkbox"></td><td>444</td><td>444</td><td>444</td><td>444</td></tr></table><scriptsrc="jquery.min.js"></script><script>$("button").click(function(){if($(this).text()=="全选"){//$(this)代指当前点击标签$("table:checkbox").prop("checked",true)}elseif($(this).text()=="取消"){$("table:checkbox").prop("checked",false)}else{$("table:checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));});}});</script></body></html>
模态对话框
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>*{margin:0;}.back{background-color:wheat;height:2000px;}.shade{position:fixed;top:0;bottom:0;left:0;right:0;background-color:darkgray;opacity:0.4;}.hide{display:none;}.models{position:fixed;top:50%;left:50%;margin-left:-100px;height:200px;width:200px;background-color:white;}</style></head><body><div><inputtype="button"value="click"></div><div></div><div><inputtype="button"value="cancel"></div><scriptsrc="jquery.min.js"></script><script>functionaction1(self){$(self).parent().siblings().removeClass("hide");}functionaction2(self){//$(self).parent().parent().children(".models,.shade").addClass("hide")$(self).parent().addClass("hide").prev().addClass("hide")}</script></body></html>
复制样式条
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><div><div><inputtype="button"value="+"><inputtype="text"></div></div><scriptsrc=jquery.min.js></script><script>functionadd(self){//注意:ifvar$clone_obj=$(".outer.item").clone();会一遍二,二变四的增加var$clone_obj=$(self).parent().clone();$clone_obj.children(":button").val("-").attr("onclick","removed(this)");$(self).parent().parent().append($clone_obj);}functionremoved(self){$(self).parent().remove()}/*$("[value=‘+‘]").click(function(){var$clone_obj=$(this).parent().clone();$clone_obj.children(":button").val("-").attr("class","mark");$(this).parent().parent().append($clone_obj);});$(".outer").on("click",".item.mark",function(){console.log($(this));//$(this):.item.mark标签$(this).parent().remove()})*/</script></body></html>注册验证
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><form><p><inputtype="text"name="username"mark="用户名"></p><p><inputtype="text"name="email"mark="邮箱"></p><p><inputtype="submit"value="submit"></p></form><scriptsrc="jquery.min.js"></script><script>$("#form:submit").click(function(){flag=true;$("#form.v1").each(function(){$(this).next("span").remove();//防止对此点击按钮产生多个span标签varvalue=$(this).val();if(value.trim().length==0){varmark=$(this).attr("mark");varele=document.createElement("span");ele.innerHTML=mark+"不能为空!";$(this).after(ele);$(ele).prop("class","error");//DOM对象转换为jquery对象flag=false;returnfalse;//-------->引出$.each的returnfalse注意点}});returnflag});</script></body></html>拖动面板
<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><divstyle="border:1pxsolid#ddd;width:600px;position:absolute;"><divstyle="background-color:black;height:40px;color:white;">标题</div><divstyle="height:300px;">内容</div></div><scripttype="text/javascript"src="jquery.min.js"></script><script>$(function(){//页面加载完成之后自动执行$(‘#title‘).mouseover(function(){$(this).css(‘cursor‘,‘move‘);}).mousedown(function(e){//console.log($(this).offset());var_event=e||window.event;//原始鼠标横纵坐标位置varord_x=_event.clientX;varord_y=_event.clientY;varparent_left=$(this).parent().offset().left;varparent_top=$(this).parent().offset().top;$(this).on(‘mousemove‘,function(e){var_new_event=e||window.event;varnew_x=_new_event.clientX;varnew_y=_new_event.clientY;varx=parent_left+(new_x-ord_x);vary=parent_top+(new_y-ord_y);$(this).parent().css(‘left‘,x+‘px‘);$(this).parent().css(‘top‘,y+‘px‘);})}).mouseup(function(){$(this).off(‘mousemove‘);});})</script></body></html>轮播图
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><scriptsrc="jquery-3.1.1.js"></script><title>Title</title><style>.outer{width:790px;height:340px;margin:80pxauto;position:relative;}.imgli{position:absolute;list-style:none;top:0;left:0;display:none;}.num{&nbs