JQuery 控制html元素显示或隐藏

        在做项目中用到界面元素显示或隐藏的功能。比如：点击编辑按钮，切换复选框的显示隐藏。根据数据库中某一字段的不同值，在界面上显示不同的按钮组合。因此查找了如何控制界面元素的显示或隐藏方法。

一、通过jquery封装好的方法：

 

        1、jQuery hide() 和show()：

$("#hide").click(function(){  $("p").hide();}); $("#show").click(function(){  $("p").show();});

  function ShowOrHidden() {      var state = document.getElementById("worksstate").value;      if (state == "送拍") {          $("#auctioned").show();          $("#shooted").hide();          $("#auction").hide();          $("#shoot").hide();          return false;      }  }

    <input type=hidden id="worksstate" runat=server />

     <div id="auction" name="name" >                   <asp:Button ID="btnAuction" runat="server" Text="送拍" onclick="btnShoot_Click" />     </div>     <div id="shoot" name="name" >             <input id="btn1" type="button"  value="送展" />     </div>     <div id="shooted" name="name" >             <input id="Button2" type="button" value="已送展" />     </div>     <div id="auctioned" name="name" >             <input id="Button3" type="button" value="已送拍" />     </div>

        根据id为worksstate的input元素的value值，设置多个div显示隐藏。

        2、jQuery toggle()：

$("button").click(function(){  $("p").toggle();});

        可以借助W3school的在线测试工具验证一下：

        http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_show

二、通过设置元素的属性

        3、设置id为one的元素的display属性为block：显示；设置id为three的元素的display属性为none：隐藏；

  function ShowDelete() {       $("#one").css('display','block');//显示       $("#three").css('display','none'); //隐藏   }

        4、获取界面上所有的input元素，如果input元素为复选框checkbox类型，就设置它们隐藏。

 function HiddenCheckBox() {     var inputs = document.getElementsByTagName("input"); //获取所有的input标签对象      var checkboxArray = []; //初始化空数组，用来存放checkbox对象。      for (var i = 0; i < inputs.length; i++) {         var obj = inputs[i];         if (obj.type == 'checkbox') {             obj.style.display = "none";         }     }         }

        5、设置元素的visibility属性。

$(selector).css("visibility","hidden");//隐藏$(selector).css("visibility","visible");//显示

        此种方式的隐藏虽然不显示了，但是元素依然占着位置。这是与上两种方式的不同之处。

        小小的元素显示隐藏，也有多种不同的方法实现，要根据自己的需求，找一个简便合适的方法。

最后放一个小彩蛋：

        http://www.programgo.com/article/42365453569/;jsessionid=E472E10B45835C96C213F14CA5A28742

-----------------------------------------haha-----------------------------------

        这篇文章给了我很大帮助，查了多个资料，这个最全，居然自己整理下来，几乎全一样。