下载文档原格式
1. 如何创建嵌套的过滤器：1.//允许你减少集合中的匹配元素的过滤器，2.//只剩下那些与给定的选择器匹配的部分。
在这种情况下，3.//查询删除了任何没（:not）有（:has）4.//包含class为“selected”（.selected）的子节点。
5..filter(":not(:has(.selected))")2. 如何重用元素搜索1.var allItems = $("div.item");2.var keepList = $("div#container1 div.item");3.//现在你可以继续使用这些jQuery对象来工作了。
例如，4.//基于复选框裁剪“keep list”，复选框的名称5.//符合6.< DIV >class names:7.$(formToLookAt + " input:checked").each(function() {8. keepList = keepList.filter("." + $(this).attr("name"));9.});10.< /DIV>3. 任何使用has()来检查某个元素是否包含某个类或是元素：1.//jQuery 1.4.*包含了对这一has方法的支持。
该方法找出2.//某个元素是否包含了其他另一个元素类或是其他任何的3.//你正在查找并要在其之上进行操作的东东。
4.$("input").has(".email").addClass("email_icon");4. 如何使用jQuery来切换样式表1.//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。
2.$('link[media='screen']').attr('href', 'Alternative.css');5. 如何限制选择范围（基于优化目的）：1.//尽可能使用标签名来作为类名的前缀，2.//这样jQuery就不需要花费更多的时间来搜索3.//你想要的元素。
jQuery实现左右滑动的toggle⽅法我们知道使⽤ jQuery 来实现上下移⼊移除，可以直接使⽤ slideUp() 和 slideDown() ⽅法。
slideUp()⽅法和slideDown()⽅法只会改变元素的⾼度。
如果⼀个元素的 display 属性值为 “none”，当调⽤ slideDown() ⽅法时，这个元素将由上⾄下延伸显⽰。
slideUp()⽅法正好相反，元素将由上到下缩短隐藏。
代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>toggle-jquery1.9</title><script src="https:///jquery/1.9.0/jquery.min.js"></script><style>div.container {height: 320px;border: 1px solid #ccc;}div.left {width: 200px;height: 300px;background-color: #36f;}</style></head><body><div class="container"><div class="left"></div></div><button id="toggle">toggle</button><script>$(document).ready(function(){$('#toggle').click(function(){$('.left').slideToggle(300);});});</script></body></html>那么，要实现左右的滑⼊滑出呢？demo 如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>toggle-jquery1.9</title><script src="https:///jquery/1.9.0/jquery.min.js"></script><style>div.container {height: 320px;border: 1px solid #ccc;}div.left {width: 200px;height: 300px;background-color: #36f;}</style></head><body><div class="container"><div class="left"></div></div><button id="toggle">toggle</button><script>$(document).ready(function(){$('#toggle').click(function(){$('.left').animate({width:'toggle'},350);});});</script></body></html>效果如下：以上这篇jQuery实现左右滑动的toggle⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
jQuery的属性,事件及操作1.属性操作1.1 基本属性操作$("img").attr("src") 返回⽂档中所有图像的src属性值$("img").attr("src","test.jpg") 设置⽂档中所有图像的src属性值$("img").removeAttr("src") 将⽂档中图像的src属性删除$("input[type='checkbox']").prop("checked",true) 选中复选框$("input[type='checkbox']").prop("checked",false) 取消复选框$("img").removeProp("src") 删除img的src属性值attr与prop的区别:attr可以找到⾃定义的属性,prop只能找到固有的属性例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><button class="select_all">全选</button><button class="reverse">反选</button><button class="cancel">取消</button><hr><table border="1"><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr></table><script>//为"select_all"类绑定点击事件$(".select_all").click(function(){$(":checkbox").prop("checked",true);//选中所有的"checkbox"标签});//为"cancel"类绑定点击事件$(".cancel").click(function(){$(":checkbox").prop("checked",false);//取消选中的"checkbox"标签});//为"reverse"类绑定点击事件$(".reverse").click(function(){//循环每⼀个"checkbox"标签$(":checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));//把所有的"checkbox"标签的属性取反})});</script></body></html>1.2 class属性操作$("p").addClass("test") 为p元素加上"text"类$("p").removeClass("test") 从p元素中删除"test"类$("p").toggleClass("test") 如果存在就删除,否则就添加"test"类$("p").hasClass("test") 判断有没有"test",返回⼀个布尔值1.3 标签⽂本text/HTML的属性$("p").html() 返回p标签的html内容$("p").html("hello world") 设置p标签的html内容$("p").text() 返回p标签的text内容$("p").text("test") 设置p标签的text内容$("input").val() 获取⽂本框中的值$("input").val("test") 设置⽂本框中的内容2.CSS操作2.1 样式$("p").css("color") 访问查看p元素的color属性$("p").css("color","red") 设置p元素的color属性的"red"$("p").css({"color":"red","bakcground-color":"yellow"}) 设置p元素的color为"red",background属性为"yellow"(设置多个属性要⽤{}字典形式) 2.2 位置$("p").offset() 元素在当前窗⼝的相对偏移,object{top:100,left:100}$("p").offset().top 元素相对窗⼝顶部的偏移$("p").offset().left 元素相对窗⼝左侧的偏移$("p").position() 元素相对⽗元素的偏移,对可见元素有效,object{top:100,left:100}例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script><style type="text/css">*{margin:0;padding:0;}</style></head><body><div class="div1" style="width:200px;height:200px;background-color:darkblue"></div><script>var val_x=0;//初始化标签到浏览器左边框的距离var val_y=0;//初始化标签到浏览器上边框的距离//定义当⿏标悬浮在标签上⾯的时候,⿏标的样式为移动$(".div1").mouseover(function(){$(this).css("cursor","move")});//为盒⼦绑定⿏标左键按下事件$(".div1").mousedown(function(e){val_x=e.clientX;//定义标签的初始x坐标val_y=e.clientY;//定义标签的初始y坐标var $box_x=$(".div1").offset().left;//获取盒⼦相对窗⼝左侧的偏移var $box_y=$(".div1").offset().top;//获取盒⼦相对窗⼝顶侧的偏移//定义⿏标移动的操作$(document).mousemove(function(e){var move_x=e.clientX;//获取⿏标的偏移量var move_y=e.clientY;//移动窗⼝到指定的偏移量$(".div1").offset({left:$box_x+move_x-val_x,top:$box_y+move_y-val_y})});//绑定⿏标左键松开事件$(document).mouseup(function(){$(document).off();//关闭事件})});</script></body></html>这样可以使div盒⼦跟随⿏标的移动⽽移动$(window).scrollTop() 获取窗⼝滚动条的⾼度$(window).scrollLeft() 获取窗⼝滚动条的宽度$(window).scrollTop("100") 获取窗⼝滚动条的⾼度为100例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><div class="box"></div><div id="returnTop">to top</div><script>//定义窗⼝的滚动条$(window).scroll(function(){console.log($(window).scrollTop());//打印滚动条的位置//当滚动条的位置⼤于200的时候if($(window).scrollTop()>200){$("#returnTop").show();//显⽰滚动条}else{$("#returnTop").hide();//隐藏滚动条}//为返回顶部按钮绑定点击事件$("#returnTop").click(function(){$(window).scrollTop(0);//使窗⼝返回顶部})})</script></body></html>2.3 尺⼨$("p").height() 获取p元素的⾼度$("p").width() 获取p元素的宽度$("p:first").innerHeight() 获取p元素的第⼀个元素的内部区域的⾼度(不包括边框) $("p:first").innerWidth() 获取p元素的第⼀个元素的内部区域宽度(不包括边框)$("p:first").outerHeight() 获取p元素的第⼀个元素的外部区域的⾼度(默认包括边框) $("p:first").outerWidth() 获取p元素的第⼀个元素的外部区域的宽度(默认包括边框) $("p:first").outerHeight(true) 为true时包括边框例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script><style>.box{width:200px;height:100px;padding:50px;border:10px solid red;background-color:pink;margin:20px;}</style></head><body><div class="box">DIV</div><script>console.log($(".box").height());//获取盒⼦的⾼度console.log($(".box").width());//获取盒⼦的宽度console.log($(".box").innerHeight());//获取盒⼦的内部区域的⾼度(包括填充)console.log($(".box").innerWidth());//获取盒⼦的内部区域的宽度(包括填充)console.log($(".box").outerHeight());//获取盒⼦的外部区域的⾼度(包括边框)console.log($(".box").outerWidth());//获取盒⼦的外部区域的宽度(包括边框)console.log($(".box").outerHeight(true));//获取盒⼦的外部区域的⾼度(⽰包括边距) console.log($(".box").outerWidth(true));//获取盒⼦的外部区域的宽度(不包括边距) </script></body></html>显⽰如下:打印结果如下:3. ⽂档处理3.1 内部插⼊$("p").append("<p>p1</p>") 在p标签后⾯追加标签"<p>p1</p>" $("p").appendTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"后⾯$("p").prepend("<p>p1</p>") 在p标签前⾯追加标签"<p>p1</p>" $("p").prependTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"前⾯3.2 外部插⼊$("p").after("<p>p1</p>") 在p标签的同级标签后⾯插⼊标签"<p>p1</p>" $("p").before("<p>p1</p>") 在p标签的同级标签前⾯插⼊标签"<p>p1</p>" $("p").insertAfter("<p>p1</p>") 把p标签插⼊到标签"<p>p1</p>"后⾯$("p").insertBefore("<p>p1</p>") 把p标签插⼊到标签"<p>p1</p>"前⾯3.3 替换$("p").replaceWith("<img src='a.jpg'>") 把p标签替换成图⽚$(".div1").replaceAll("p") 把div类替换成⽂档中所有的p标签例⼦⼀:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><div class="div1">div5</div><div class="div1">div6</div><div class="div1">div7</div><script>$(".div1").replaceWith("<p>p1</p>");//把p标签替换成p标签</script></body></html>显⽰如下:例⼦⼆:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><div class="div1">div5</div><div class="div1">div6</div><div class="div1">div7</div><script>$(".div1").replaceAll("p");//把div类替换成⽂档中所有的p标签</script></body></html>显⽰如下:3.4 删除$("p").empty() 删除所有的p标签中的所有的⼦标签$("p").remove([expr]) 删除所有的p标签以及p标签中的⼦标签3.5 复制$("p").clone() 克隆p标签$("p").clone(true) 布尔值指定事件处理函数是否会被复制3.6 循环使⽤jQuery实现的集合循环⽅式⼀:$.each(Array,function(){function_suite})⽅式⼆:$(element).each(function(){function_suite})例⼦:使⽤each循环进⾏判断代码⼀:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><script>li=[11,22,33,44,55,66,77];$.each(li,function(i,v){if(v==33){return;}console.log(v);});</script></body></html>打印如下:代码⼆:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><script>li=[11,22,33,44,55,66,77];//定义循环,i为列表的索引,v为列表索引对应的值$.each(li,function(i,v){//当循环中的值为33时if (v==33){return false;}console.log(v);});</body></html>打印如下:结论:each的参数function内如果出现return,结束当次循环,类似于continueeach的参数function内如果出现return false,结束的是整个each循环,类似break4. 事件4.1 事件$("p").click() 单击事件$("p").dbclick() 双击事件$("p").mouseover() 当⿏标指针位于元素上⽅时触发事件$("p").mousemove() 当⿏标指针在指定的元素中移动时触发事件$("p").mouseout() 当⿏标指针从元素上移开时触发事件$("input[type='text']").focus() 元素获得焦点时,触发focus事件$("input[type='text']").blur() 元素失去焦点时,触发blur事件$("input[type='text']").change() 当元素的值发⽣改变时触发事件$("button").mousedown() 当按下⿏标时触发事件$("button").mouseup() 元素上放开⿏标按键时触发事件$(window).keydown() 当键盘或按钮被按下时触发事件$(window).keypress() 当键盘或按钮被按下时触发事件,每输⼊⼀个字符都触发⼀次事件$(window).scroll() 当⽤户滚动窗⼝的滚动条时触发事件$(window).resize() 当调整浏览器窗⼝的⼤⼩时触发事件$(window).unload() ⽤户离开页⾯时,触发事件$("input").keyup() 当按钮被松开时触发事件$("input").select() 当input元素中的⽂本被选择时触发事件$("form").submit() 当提交表单时触发事件4.2 绑定⽅式$(标签).事件(函数内容)4.3 事件委托通过其上级(可以是多层上级)事件委托,当点击这个标签时才会绑定事件在页⾯不刷新的情况下添加⼀⾏数据,⾏数据有操作按钮,点击并⽆效果,就可以通过事件委托来解决委托⽅式:$("ul").on("click","li",function(){function_suite})例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.2.1.js"></script></head><body><div id="box"><div class="item">111</div><div class="item">222</div><div class="item">333</div><div class="item">444</div><div class="item">555</div><div class="item">666</div></div><button>ADD</button><script>//为"button"按钮添加点击事件$("button").click(function(){$("#box").append("<div class='item'>777</div>");//在div标签后⾯添加⼀⾏//为"box"下的"item"类添加点击事件$("#box").on("click",".item",function(){console.log($(".item").text());//打印"item"类的⽂本})</script></body></html>4.4 event object所有的事件函数都可以传⼊event参数⽅便处理事件⽅式:$("p").click(function(event){function_suite})(event_object)的属性⽅法event.pageX 事件发⽣时,⿏标距离⽹页左上⾓的⽔平距离event.pageY 事件发⽣时,⿏标距离⽹页左上⾓的垂直距离event.type 事件的类型event.which 按下了哪⼀个键event.data 在事件对象在绑定数据,然后传⼊事件处理函数event.target 事件针对的⽹页元素event.preventDefault() 阻⽌事件的默认⾏为(⽐如点击链接,会⾃动打开新页⾯)event.stopPropagation() 停⽌事件向上层元素冒泡4.5 动画效果基点$("p").show() 显⽰隐藏的匹配元素$("p");show("slow") 参数表⽰速度,("slow","normal","fast"),也可以设置为毫秒$("p").hide() 隐藏显⽰的元素$("p").toggle() 切换显⽰/隐藏例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script></head><body><img src="a.jpg">;//定义⼀张图⽚<hr><button class="hide_element">hide</button>;//定义隐藏按钮<button class="show_element">show</button>;//定义显⽰按钮<button class="toggle_element">toggle</button>;//定义切换按钮<script>//定义隐藏的点击事件$(".hide_element").click(function(){$("img").hide()});//定义显⽰的点击事件$(".show_element").click(function(){$("img").show()});//定义切换按钮的点击事件$(".toggle_element").click(function(){$("img").toggle()});</script></body></html>⽤浏览器打开的效果如下:可以看到,图⽚是显⽰的,点击"hide"按钮,图⽚就被隐藏起来,然后再点击"show"按钮,图⽚就⼜会被显⽰出来了.另外,当图⽚显⽰的时候,点击"toggle"按钮,图⽚就会隐藏,⽽当图⽚是隐藏的时候,点击"toggle"按钮,图⽚⼜会显⽰出来.4.6 滑动操作$("p").slideDown("1000") ⽤1000毫秒的时间将段落滑下$("p").slideUp("1000") ⽤1000毫秒的时间将段落滑上$("p").slideToggle("1000") ⽤1000毫秒的时间将段落滑上,滑下例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script></head><body><img src="a.jpg" style="width:500px;height:300px"><hr><button class="slide_up">slide_up</button><button class="slide_down">slide_down</button><button class="toggle">toggle</button><script>//对"slide_up"类绑定点击事件$(".slide_up").click(function(){$("img").slideUp(1000);//⽤1000毫秒的时间将段落收起});//对"slide_down"类绑定点击事件$(".slide_down").click(function(){$("img").slideDown(1000);//⽤1000毫秒的时间将段落滑下});//对"toggle"类绑定点击事件$(".toggle").click(function(){$("img").slideToggle(1000);//⽤1000毫秒的时间将段落滑下或者收起 });</script></body></html>4.7 淡⼊淡出$("p").fadeIn("1000") ⽤1000毫秒时间将段落淡⼊$("p").fadeOut("1000") ⽤1000毫秒时间将段落淡出$("p").fadeToggle("1000") ⽤1000毫秒时间将段落淡⼊,淡出$("p").fadeTo("slow",0.6) ⽤慢速度将段落的透明度调整到0.6例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><img src="a.jpg" style="width:500px;height:300px"><hr><button class="fade_in">fadeIn</button><button class="fade_out">fadeOut</button><button class="fade_toggle">fadeToggle</button><button class="fade_to">fadeTo</button><script>//对"fade_in"类绑定点击事件$(".fade_in").click(function(){$("img").fadeIn(1000);//⽤1000毫秒时间将段落淡⼊});//对"fade_out"类绑定点击事件$(".fade_out").click(function(){$("img").fadeOut(1000);//⽤1000毫秒时间将段落淡出});//对"fade_toggle"类绑定点击事件$(".fade_toggle").click(function(){$("img").fadeToggle(1000);//⽤1000毫秒时间将段落淡⼊或淡出});//对"fade_to"类绑定点击事件$(".fade_to").click(function(){$("img").fadeTo("slow",0.6);//⽤慢速度将图⽚的透明度调整到0.6 });</script></body></html>4.8 页⾯载⼊页⾯载⼊,也就是当页⾯载⼊成功后⽴即运⾏的函数事件$(document).ready(function(){function_suite})也可以简写为:$(function(){function_suite})。
JQuery之隐藏hide方法和显示show方法JQuery是一个非常流行的JavaScript库，它提供了一系列简化网页开发的功能和方法。
其中，隐藏和显示元素是经常使用的操作之一、JQuery提供了hide(和show(方法来实现元素的隐藏和显示，本文将详细介绍这两个方法的使用和实现原理。
一、隐藏hide(方法1. hide(方法的基本用法hide(方法是JQuery提供的用于隐藏元素的方法。
使用hide(方法，可以隐藏一个或多个元素。
hide(方法的基本语法如下：$(selector).hide(speed, callback);2.示例代码下面是一个简单的示例代码，演示了如何使用hide(方法隐藏元素：```<button id="hideBtn">隐藏</button><div id="hideDiv">要隐藏的元素</div><script>$(document).ready(function$("#hideBtn").click(function$("#hideDiv").hide(1000, functionalert("元素已隐藏");});});});</script>```在上面的代码中，首先为按钮"hideBtn"和待隐藏的div元素"hideDiv"添加了id属性，然后使用$("#hideBtn")获取该按钮，并为其添加了点击事件。
在点击事件的回调函数中，使用$("#hideDiv")获取待隐藏的div元素，并调用hide(方法，将其隐藏。
在hide(方法中，指定了隐藏速度为1000毫秒，并在隐藏完成后通过回调函数弹出提示框。
1 引入JQuery的js文件<scrīpt type="text/javascrīpt" src="js/jquery.js"></scrīpt>2 jquery中的对象1 jquery对象只能使用jquery的方法2 dom对象只能使用dom的方法3 jquery对象引用方法$() 引用，通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象）4 、jQuery对象与dom对象的转换1 普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。
所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：$("#msg").html();$("#msg")[0].innerHTML;$("#msg").eq(0)[0].innerHTML;$("#msg").get(0).innerHTML;5 如何获取jQuery集合的某一项$("div").eq(2).html(); //eq返回的jquery对象，调用jquery对象的方法$("div").get(2).innerHTML; //get(n)和索引返回的是dom元素对象，调用dom的方法属性6、同一函数实现set和getJquery中的很多方法都是如此，主要包括如下几个：$("#msg").html(); //返回id为msg的元素节点的html内容。
jquery的hide方法jQuery的hide方法详解hide方法概述hide方法是jQuery中非常常用的一个方法，用于隐藏指定的元素。
通过hide方法，可以实现页面元素的动态隐藏和显示，使页面更加灵活和交互。
hide方法的基本用法hide方法的基本用法非常简单，只需传入一个参数即可隐藏指定元素。
示例代码如下：$('#elementId').hide();该代码会隐藏id为elementId的元素。
hide方法的参数详解hide方法还支持一些可选的参数，用于控制隐藏效果的速度和回调函数的执行。
以下是常用的hide方法参数的详解： - speed：隐藏效果的速度。
可以是：‘slow’、‘fast’，或者是毫秒数如：1000（表示1秒）。
- callback：隐藏完成后的回调函数，会在隐藏动画结束后执行。
示例代码如下：$('#elementId').hide('slow', function(){// 隐藏完成后的回调函数代码});hide方法的衍生方法除了基本的hide方法，jQuery还提供了一些衍生方法，用于更加灵活地控制隐藏效果。
以下是常用的hide方法的衍生方法的详解：- hide(speed,callback)：控制隐藏效果的速度和回调函数的执行。
- hide(duration,easing,callback)：控制隐藏效果的持续时间、缓动函数和回调函数。
- hide(options)：以动画效果隐藏元素，可以传入自定义的参数设置，如：{duration:500,easing:‘swing’,complete:function(){}}。
示例代码如下：$('#elementId').hide({duration: 1000,easing: 'swing',complete: function(){// 隐藏完成后的回调函数代码}});其他相关方法除了hide方法外，jQuery还提供了一些相关的方法用于显示和隐藏元素。
jquery的show⽅法是display：block还是display：inline呢？以前⼀直show()肯定是display:block,但是今天写jq的时候发现不是这样的，有时候却出现是display:inline。
简单看了下jquery此处的实现源码if ( show ) {// Reset the inline display of this element to learn if it is// being hidden by cascaded rules or notif ( !values[ index ] && elem.style.display === "none" ) {elem.style.display = "";}// Set elements which have been overridden with display: none// in a stylesheet to whatever the default browser style is// for such an elementif ( (elem.style.display === "" && curCSS( elem, "display" ) === "none") ||!jQuery.contains( elem.ownerDocument.documentElement, elem ) ) {values[ index ] = jQuery._data( elem, "olddisplay", defaultDisplay(elem.nodeName) );}} else {display = curCSS( elem, "display" );if ( !values[ index ] && display !== "none" ) {jQuery._data( elem, "olddisplay", display );}}发现有缓存原有的display 值，这样它的show只是显⽰并不改变你原来display的⽅式，如果改变的话那不造成样式的困扰了。
jQuery效果slideToggle（）方法（在隐藏和显示之间切换
有关jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
实例
通过使用滑动效果，在显示和隐藏状态之间切换
元素：
复制代码代码如下:
$(".btn1").click(function(){
$("p").slideT oggle();
});
定义和用法
slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
语法
$(selector).slideT oggle(speed,callback)参数描述
speed 可选。
规定元素从隐藏到可见的速度（或者相反）。
默认为 "normal"。
可能的值：
毫秒（比如 1500）
"slow"
"normal"
"fast"
在设置速度的'情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
callback 可选。
toggle 函数执行完之后，要执行的函数。
如需学习更多有关callback 的内容，请访问我们的jQuery Callback 这一章。
除非设置了 speed 参数，否则不能设置该参数。
提示和注释
提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。
下载全文。
js toggle用法JS Toggle用法JS Toggle是一种常用的JavaScript技术，它可以帮助我们在网页中实现一些交互效果。
具体来说，JS Toggle可以让我们通过点击按钮或者其他元素来切换某个元素的显示状态，从而实现一些简单的动态效果。
下面我们来详细了解一下JS Toggle的用法。
1. 基本语法JS Toggle的基本语法非常简单，我们只需要使用一个toggle()方法即可。
这个方法可以接受一个或多个参数，其中第一个参数是要切换显示状态的元素，后面的参数则是可选的。
下面是一个基本的JS Toggle语法示例：```document.getElementById("myElement").toggle();```这个示例中，我们使用了getElementById()方法来获取一个ID为“myElement”的元素，然后调用了它的toggle()方法来切换它的显示状态。
2. 切换显示状态JS Toggle最常用的功能就是切换元素的显示状态。
我们可以通过点击按钮或者其他元素来触发这个功能，从而实现一些简单的动态效果。
下面是一个切换显示状态的示例：```<buttononclick="document.getElementById('myElement').toggle()">Tog gle</button><div id="myElement">Hello, world!</div>```这个示例中，我们创建了一个按钮，并在它的onclick事件中调用了getElementById()方法来获取一个ID为“myElement”的元素，并调用了它的toggle()方法来切换它的显示状态。
当我们点击按钮时，就会切换这个元素的显示状态。
3. 切换样式除了切换显示状态，JS Toggle还可以帮助我们切换元素的样式。
这篇文章主要介绍了实例讲解Jquery中隐藏hide、显示show、切换toggle的用法，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery中show()、hide()和toggle()用法实例，供大家参考，具体内容如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>初识jQuery</title>
<script src="http://jquery/1.9.0/jquery.js" type="text/javascript"></script>
<!--引用这个jquery库-->
<style>
#test{
display:none;
width:120px;
height:50px;
border:1px solid blue;
}
</style>
</head>
<body>
<div id="test">Hello world!</div>
<!--设置三个按钮，每次点击调用特定的函数-->
<button onclick="sayHello()">点我打开！</button>
<button onclick="sayGoodbye()">点我关闭！</button>
<button onclick="change()">点我切换！</button>
<script type="text/javascript">
function sayHello(){
$("#test").show(5000);
<!--设参数5000，表示用5000ms的时间完成这个动作-->
}
function sayGoodbye(){
$("#test").hide();
<!--不设置，默认速度-->
}
function change(){
$("#test").toggle("slow");
<!--设置以slow的速度打开-->
}
</script>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。
