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;
      }

  }

        根据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-----------------------------------

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