左侧菜单
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>left_menu</title><style>.menu{height: 500px;width: 30%;background-color: gainsboro;float: left;}.content{height: 500px;width: 70%;background-color: rebeccapurple;float: left;}.title{line-height: 50px;background-color: #425a66;color: forestgreen;}.hide{display: none;}</style> </head> <body><div class="outer"><div class="menu"><div class="item"><div class="title">菜单一</div><div class="con"><div>111</div><div>111</div><div>111</div></div></div><div class="item"><div class="title">菜单二</div><div class="con hide"><div>111</div><div>111</div><div>111</div></div></div><div class="item"><div class="title">菜单三</div><div class="con hide"><div>111</div><div>111</div><div>111</div></div></div></div><div class="content"></div></div> <script src="jquery-3.2.1.js"></script> <script>$(".item .title").click(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>
table切换
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>tab</title><script>function tab(self){var index=$(self).attr("xxx");$("#"+index).removeClass("hide").siblings().addClass("hide");$(self).addClass("current").siblings().removeClass("current");}</script><style>*{margin: 0px;padding: 0px;}.tab_outer{margin: 0px auto;width: 60%;}.menu{background-color: #cccccc;/*border: 1px solid red;*/line-height: 40px;}.menu li{display: inline-block;}.menu a{border-right: 1px solid red;padding: 11px;}.content{background-color: tan;border: 1px solid green;height: 300px;}.hide{display: none;}.current{background-color: darkgray;color: yellow;border-top: solid 2px rebeccapurple;}</style> </head> <body><div class="tab_outer"><ul class="menu"><li xxx="c1" class="current" οnclick="tab(this);">菜单一</li><li xxx="c2" οnclick="tab(this);">菜单二</li><li xxx="c3" οnclick="tab(this);">菜单三</li></ul><div class="content"><div id="c1">内容一</div><div id="c2" class="hide">内容二</div><div id="c3" class="hide">内容三</div></div></div> </body> </html>
正反选
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-1.11.3.min.js"></script><script>function selectall(){$("table :checkbox").prop("checked",true)}function cancel(){$("table :checkbox").prop("checked",false)}function reverse(){// var idlist=$("table :checkbox") // for(var i=0;i<idlist.length;i++){ // var element=idlist[i]; // // var ischecked=$(element).prop("checked") // if (ischecked){ // $(element).prop("checked",false) // } // else { // $(element).prop("checked",true) // } // // } // jquery循环的两种方式//方式一 // li=[10,20,30,40] // dic={name:"yuan",sex:"male"} // $.each(li,function(i,x){ // console.log(i,x) // })//方式二 // $("tr").each(function(){ // console.log($(this).html()) // }) $("table :checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));// if ($(this).prop("checked")){ // $(this).prop("checked",false) // } // else { // $(this).prop("checked",true) // }// 思考:如果用attr方法可以实现吗? });}</script> </head> <body><button οnclick="selectall();">全选</button><button οnclick="cancel();">取消</button><button οnclick="reverse();">反选</button><table border="1"><tr><td><input type="checkbox"></td><td>111</td></tr><tr><td><input type="checkbox"></td><td>222</td></tr><tr><td><input type="checkbox"></td><td>333</td></tr><tr><td><input type="checkbox"></td><td>444</td></tr></table></body> </html>
模态对话框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.back{background-color: rebeccapurple;height: 2000px;}.shade{position: fixed;top: 0;bottom: 0;left:0;right: 0;background-color: coral;opacity: 0.4;}.hide{display: none;}.models{position: fixed;top: 50%;left: 50%;margin-left: -100px;margin-top: -100px;height: 200px;width: 200px;background-color: gold;}</style> </head> <body> <div class="back"><input id="ID1" type="button" value="click" οnclick="action1(this)"> </div><div class="shade hide"></div> <div class="models hide"><input id="ID2" type="button" value="cancel" οnclick="action2(this)"> </div><script src="jquery-1.11.3.min.js"></script> <script>function action1(self){$(self).parent().siblings().removeClass("hide");}function action2(self){//$(self).parent().parent().children(".models,.shade").addClass("hide") $(self).parent().addClass("hide").prev().addClass("hide")} </script> </body> </html>
复制样式条
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body><div class="outer"><div class="item"><input type="button" value="+" οnclick="add(this);"><input type="text"></div></div><script src="jquery-1.11.3.min.js"></script><script>//var $clone_obj=$(self).parent().clone(); // $clone_obj放在这个位置可以吗?function add(self){// 注意:if var $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);}function removed(self){$(self).parent().remove()}</script> </body> </html>
返回顶部
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-2.2.3.js"></script><script>window.onscroll=function(){var current=$(window).scrollTop();console.log(current)if (current>100){$(".returnTop").removeClass("hide")}else {$(".returnTop").addClass("hide")}}function returnTop(){ // $(".div1").scrollTop(0); $(window).scrollTop(0)}</script><style>body{margin: 0px;}.returnTop{height: 60px;width: 100px;background-color: darkgray;position: fixed;right: 0;bottom: 0;color: greenyellow;line-height: 60px;text-align: center;}.div1{background-color: orchid;font-size: 5px;overflow: auto;width: 500px;}.div2{background-color: darkcyan;}.div3{background-color: aqua;}.div{height: 300px;}.hide{display: none;}</style> </head> <body><div class="div1 div"><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p></div><div class="div2 div"></div><div class="div3 div"></div><div class="returnTop hide" οnclick="returnTop();">返回顶部</div> </body> </html>
面板拖动
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body><div style="border: 1px solid #ddd;width: 600px;position: absolute;"><div id="title" style="background-color: black;height: 40px;color: white;">标题</div><div style="height: 300px;">内容</div></div> <script type="text/javascript" src="jquery-2.2.3.js"></script> <script>$(function(){// 页面加载完成之后自动执行$('#title').mouseover(function(){$(this).css('cursor','move');}).mousedown(function(e){//console.log($(this).offset());var _event = e || window.event;// 原始鼠标横纵坐标位置var ord_x = _event.clientX;var ord_y = _event.clientY;var parent_left = $(this).parent().offset().left;var parent_top = $(this).parent().offset().top;$(this).bind('mousemove', function(e){var _new_event = e || window.event;var new_x = _new_event.clientX;var new_y = _new_event.clientY;var x = parent_left + (new_x - ord_x);var y = parent_top + (new_y - ord_y);$(this).parent().css('left',x+'px');$(this).parent().css('top',y+'px');})}).mouseup(function(){$(this).unbind('mousemove');});}) </script> </body> </html>
放大镜
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>bigger</title><style>*{margin: 0;padding:0;}.outer{height: 350px;width: 350px;border: dashed 5px cornflowerblue;}.outer .small_box{position: relative;}.outer .small_box .float{height: 175px;width: 175px;background-color: darkgray;opacity: 0.4;fill-opacity: 0.4;position: absolute;display: none;}.outer .big_box{height: 400px;width: 400px;overflow: hidden;position:absolute;left: 360px;top: 0px;z-index: 1;border: 5px solid rebeccapurple;display: none;}.outer .big_box img{position: absolute;z-index: 5;}</style> </head> <body><div class="outer"><div class="small_box"><div class="float"></div><img src="small.jpg"></div><div class="big_box"><img src="big.jpg"></div></div><script src="jquery-2.1.4.min.js"></script> <script>$(function(){$(".small_box").mouseover(function(){$(".float").css("display","block");$(".big_box").css("display","block")});$(".small_box").mouseout(function(){$(".float").css("display","none");$(".big_box").css("display","none")});$(".small_box").mousemove(function(e){var _event=e || window.event;var float_width=$(".float").width();var float_height=$(".float").height();console.log(float_height,float_width);var float_height_half=float_height/2;var float_width_half=float_width/2; console.log(float_height_half,float_width_half);var small_box_width=$(".small_box").height();var small_box_height=$(".small_box").width();// 鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理var mouse_left=_event.clientX-float_width_half;var mouse_top=_event.clientY-float_height_half;if(mouse_left<0){mouse_left=0}else if (mouse_left>small_box_width-float_width){mouse_left=small_box_width-float_width}if(mouse_top<0){mouse_top=0}else if (mouse_top>small_box_height-float_height){mouse_top=small_box_height-float_height}$(".float").css("left",mouse_left+"px");$(".float").css("top",mouse_top+"px")var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height); console.log(percentX,percentY)$(".big_box img").css("left", -percentX*mouse_left+"px")$(".big_box img").css("top", -percentY*mouse_top+"px")})})</script> </body> </html>
显示隐藏
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-2.1.4.min.js"></script><script>$(document).ready(function() {$("#hide").click(function () {$("p").hide(1000);});$("#show").click(function () {$("p").show(1000);});//用于切换被选元素的 hide() 与 show() 方法。$("#toggle").click(function () {$("p").toggle();}); })</script><link type="text/css" rel="stylesheet" href="style.css"> </head> <body><p>hello</p><button id="hide">隐藏</button><button id="show">显示</button><button id="toggle">切换</button></body> </html>
滑动
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-2.1.4.min.js"></script><script>$(document).ready(function(){$("#slideDown").click(function(){$("#content").slideDown(1000);});$("#slideUp").click(function(){$("#content").slideUp(1000);});$("#slideToggle").click(function(){$("#content").slideToggle(1000);})});</script><style>#content{text-align: center;background-color: lightblue;border:solid 1px red;display: none;padding: 50px;}</style> </head> <body><div id="slideDown">出现</div><div id="slideUp">隐藏</div><div id="slideToggle">toggle</div><div id="content">helloworld</div></body> </html>
淡入淡出
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-2.1.4.min.js"></script><script>$(document).ready(function(){$("#in").click(function(){$("#id1").fadeIn(1000);});$("#out").click(function(){$("#id1").fadeOut(1000);});$("#toggle").click(function(){$("#id1").fadeToggle(1000);});$("#fadeto").click(function(){$("#id1").fadeTo(1000,0.4);}); });</script></head> <body><button id="in">fadein</button><button id="out">fadeout</button><button id="toggle">fadetoggle</button><button id="fadeto">fadeto</button><div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div></body> </html>
回调函数
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-2.1.4.min.js"></script></head> <body><button>hide</button><p>helloworld helloworld helloworld</p><script>$("button").click(function(){$("p").hide(1000,function(){alert($(this).html())})})</script> </body> </html>
注册验证
<form class="Form"><p><input class="v1" type="text" name="username" mark="用户名"></p><p><input class="v1" type="text" name="email" mark="邮箱"></p><p><input class="v1" type="submit" value="submit" οnclick="return validate()"></p></form><script src="jquery-3.1.1.js"></script> <script>// 注意:// DOM对象--->jquery对象 $(DOM)// jquery对象--->DOM对象 $("")[0]//---------------------------------------------------------// DOM绑定版本function validate(){flag=true;$("Form .v1").each(function(){$(this).next("span").remove();// 防止对此点击按钮产生多个span标签var value=$(this).val();if (value.trim().length==0){var mark=$(this).attr("mark");var ele=document.createElement("span");ele.innerHTML=mark+"不能为空!";$(this).after(ele);$(ele).prop("class","error");// DOM对象转换为jquery对象flag=false;// return false-------->引出$.each的return false注意点 }});return flag}//--------------------------------------------------------- //---------------------------------------------------------//---------------------------------------------------------function f(){for(var i=0;i<4;i++){if (i==2){return}console.log(i)}}f(); // 这个例子大家应该不会有问题吧!!! //------------------------------------------li=[11,22,33,44];$.each(li,function(i,v){if (v==33){return ; // ===试一试 return false会怎样? }console.log(v)});//------------------------------------------// $.MyEach(obj,function(i,v){}):for(var i in obj){func(i,obj[i]) ; // i就是索引,v就是对应值// {}:我们写的大括号的内容就是func的执行语句; }// 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行//本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,//希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:for(var i in obj){ret=func(i,obj[i]) ;if(ret==false){return ;}}// 这样就很灵活了:// <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true// <2>如果你不想return后下面循环函数继续执行,那么就直接写return false// ---------------------------------------------------------------------// 说了这么多,请问大家如果我们的需求是:判断出一个输入有问题后面就不判断了(当然也就不显示了),// 怎么办呢?// 对了if (value.trim().length==0){//...//...//flag=false; // flag=false不要去,它的功能是最后如果有问题,不提交数据!return false}//最后,大家尝试着用jquery的绑定来完成这个功能! $(".Form :submit").click(function(){});</script>
hover事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.test{width: 200px;height: 200px;background-color: wheat;}</style> </head> <body><div class="test"></div> </body> <script src="jquery.min.js"></script> <script> // function enter(){ // console.log("enter") // } // function out(){ // console.log("out") // } // $(".test").hover(enter,out) $(".test").mouseenter(function(){console.log("enter") });$(".test").mouseleave(function(){console.log("leave")});</script> </html>
面板拖动
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body><div style="border: 1px solid #ddd;width: 600px;position: absolute;"><div id="title" style="background-color: black;height: 40px;color: white;">标题</div><div style="height: 300px;">内容</div></div> <script type="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;// 原始鼠标横纵坐标位置var ord_x = _event.clientX;var ord_y = _event.clientY;var parent_left = $(this).parent().offset().left;var parent_top = $(this).parent().offset().top;$(this).on('mousemove', function(e){var _new_event = e || window.event;var new_x = _new_event.clientX;var new_y = _new_event.clientY;var x = parent_left + (new_x - ord_x);var y = 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>
each循环
我们知道，
$("p").css("color","red")
是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦
jquery支持两种循环方式：
方式一
格式：$.each(obj,fn)
li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){console.log(i,x)
}); 方式二
格式：$("").each(fn)
$("tr").each(function(){console.log($(this).html())
}) 其中,$(this)代指当前循环标签。
each扩展
/*function f(){for(var i=0;i<4;i++){if (i==2){return}console.log(i)}}f(); // 这个例子大家应该不会有问题吧!!! //-----------------------------------------------------------------------li=[11,22,33,44];$.each(li,function(i,v){if (v==33){return ; // ===试一试 return false会怎样?}console.log(v)});//------------------------------------------// 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行//本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,//希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:for(var i in obj){ret=func(i,obj[i]) ;if(ret==false){return ;}}// 这样就很灵活了:// <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true// <2>如果你不想return后下面循环函数继续执行,那么就直接写return false// ---------------------------------------------------------------------
