jquery中用什么方法隐藏元素

.hide()

站在用户的角度思考问题，与客户深入沟通，找到海棠网站设计与海棠网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、虚拟主机、企业邮箱。业务覆盖海棠地区。

这个方法不接受任何参数。

.hide(

[duration

]

[,

complete

]

)

duration

(默认:

400)

类型:

Number

or

String

一个字符串或者数字决定动画将运行多久。

complete

类型:

Function()

在动画完成时执行的函数。

如果没有参数，.hide()方法是最简单的方法来隐藏一个元素：

$('.target').hide();

匹配的元素将被立即隐藏，没有动画。这大致相当于调用.css('display',

'none')，但display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。如果一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。

Jquery实现显示和隐藏的4种简单方式

Html代码：

复制代码

代码如下:

div

class="topicList"

h3span学习天地/span/h3

ul

li1111111111/li

li2222222222/li

li333333333/li

li4444444444/li

li5555555555/li

li6666666666/li

/ul

/div

Jquery代码：

第一种实现方式：

复制代码

代码如下:

1.

script

type="text/javascript"

$(function(){

$(".topicList

h3").click(function(){

var

UL

=

$(this).next("ul");

if(UL.css("display")=="none"){

UL.css("display","block");

}

else{

UL.css("display","none");

}

});

});

/script

第二种实现方式：

复制代码

代码如下:

2.

script

type="text/javascript"

$(function(){

$(".topicList

h3").toggle(function(){

$(this).next("ul").hide(1000);

},function(){

$(this).next("ul").show(1000);

});

});

/script

第三种实现方式：

可以使用Jquery提供的show和hide来完成带缓动的显示和隐藏效果，由于两个方法相似，可以直接使用toggle来完成。

复制代码

代码如下:

3.

script

type="text/javascript"

$(function(){

$(".topicList

h3").toggle(function(){

$(this).next("ul").css("display","none");

},function(){

$(this).next("ul").css("display","block");

});

});

/script

第四种实现方式：

toggle如果有两个参数，并且都是函数，表示第一次点击执行第一个函数，第二次点击执行第二个函数。

复制代码

代码如下:

4.

script

type="text/javascript"

$(function(){

$(".topicList

h3").toggle(topicHandler,topicHandler);

function

topicHandler(){

//使用fadeIn、show、slideDown可以完成某个容器的显示

//使用fadeOut、hide、slideUp可以完成某个容器的隐藏

//所以可以通过各个的toggle来完成两个之间的轮换

$(this).next("ul").toggle(1000);

}

});

/script

如何通过jquery隐藏和显示元素

jQuery 效果 - 隐藏和显示

jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

实例

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

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

实例

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

语法：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。