jquery之超简单的div显示和隐藏特效demo

来源：互联网发布：食品标签制作软件下载编辑：程序博客网时间：2024/05/20 00:09

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="jquery_last.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(  function(){});function hiden(){$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast}function slideToggle(){$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上}function show(){$("#divObj").show();//显示,参数说明同上}function toggle(){$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上}function slide(){$("#divObj").slideDown();//窗帘效果展开}</script></head><body><h3>div里内容的显示隐藏特效</h3><input type="button" value="隐藏" onclick="hiden()"/> <input type="button" value="显示" onclick="show()"/> <input type="button" value="窗帘效果显示2" onclick="slide()"/> <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>  <input type="button" value="隐藏显示效果切换" onclick="toggle()"/><div id="divObj" style="display:none">        1.测试例子<br/>        2.测试例子<br/>        3.测试例子<br/>        4.测试例子<br/>        5.测试例子<br/>        6.测试例子<br/>        7.测试例子<br/>        8.测试例子<br/>        9.测试例子<br/>        0.测试例子<br/>    </div></body></html>

asdf

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(  function(){});function hiden(){$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(500)以500毫秒的速度隐藏,还可以带slow,fast}function slideToggle(){$("#divObj").slideToggle(500);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上}function show(){$("#divObj").show();//显示,参数说明同上}function toggle(){$("#divObj").toggle(500);//显示隐藏切换,参数可以无,参数说明同上}function slide(){$("#divObj").slideDown();//窗帘效果展开}</script></head><body><h3>div里内容的显示隐藏特效</h3><input type="button" value="隐藏" onclick="hiden()"/><input type="button" value="显示" onclick="show()"/><input type="button" value="窗帘效果显示2" onclick="slide()"/><input type="button" value="窗帘效果的切换" onclick="slideToggle()"/><input type="button" value="隐藏显示效果切换" onclick="toggle()"/><div id="divObj" style="display:none"> 1.测试例子<br/>  2.测试例子<br/>  3.测试例子<br/>  4.测试例子<br/>  5.测试例子<br/>  6.测试例子<br/>  7.测试例子<br/>  8.测试例子<br/>  9.测试例子<br/>  0.测试例子<br/></div></body></html>

    <!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>              <meta http-equiv="Content-Type" content="text/html; charset=gbk" />              <title>StripingTable</title>              <script type="text/javascript" src="http://www.wozaishuo.com.cn/example/jquery/jquery-1.2.1.js"></script>              <script type="text/javascript">              <!--                   $(document).ready(function(){ });                                      //隐藏和显示div层                   function changeDisplay(){                       var helloDivObj = $("#helloDiv");                       var buttonObj = $("#btnDisplay");                       var val = buttonObj.attr("value");                       if(val=="隐藏"){                           helloDivObj.hide();                           buttonObj.attr("value","显示");                       }else{                           helloDivObj.show();                           buttonObj.attr("value","隐藏");                       }                                 // var helloDivObj = $("#helloDiv").toggle(); //甚至只需要这一句搞定切换隐藏与显示                       }               -->              </script>          </head>          <body>              <div class="title_a">一、JQuery核心库</div>              <div class="title_b">(一)、jQuery(expression,[context])用法!</div>              <div class="title_c">3.jQuery(elements)</div>              将一个或多个DOM元素转化为jQuery对象。这个函数也可以接收XML文档和Window对象（虽然它们不是DOM元素）作为有效的参数。<p></p>                             <input id="btnDisplay" type="button" value="隐藏" onclick="changeDisplay()"/>              <div id="helloDiv">              Hello,everyone<p></p>              Hello,everytwo<p></p>              Hello,everythree<p></p>              </div>          </bdoy>      </html>