JQuery显示和隐藏div

JQuery显示和隐藏div的方式

1.使用attr

$("#id").attr("style","display:none;")---------隐藏div

$("#id").attr("style","display:block")----------显示div

attr()方法：设置或返回被选元素的属性和值

用于返回属性值时返回匹配到的迪欧一个元素的值，。用于设置属性值时为匹配元素设置一个或多个  属性/值  对

2.使用css

$("#id").css("display","none")-----------隐藏

$("#id").css("display","block")-----------显示

css()方法：返回或设置匹配的元素的一个或多个样式属性

注意：display:none 会使元素在页面上所占的物理空间也消失，即“看不见，摸不着”

3.使用show   hide

效果与display:none   类似，“看不见，摸不着”

$("#id").hide()-----------隐藏

$("#id").show()----------显示

4.使用toggle动态显示和隐藏

$("#id").toggle(

         function () { 

              $(this).attr("style","display:none;");--------隐藏div

         },

         function () {    

              $(this).attr("style","display:block;");--------显示div

         }

      );

5.动态添加和移除元素

添加元素的方法：

append-----------在被选元素内的结尾添加元素

preppend---------在被选元素内的开头添加元素

after----------------在被选元素后添加元素

before--------------在被选元素前添加元素

移除元素的方法：

remove-------------删除被选元素及其子元素

empty---------------从被选元素中删除元素

6.特殊情况——希望页面保留元素的物理位置，但是不显示，即“看不见，摸得着”

可以使用visibility:hidden属性值将元素内容隐藏，但是保留元素在页面上的位置