jquery控制隐藏,jquery 隐藏

jQuery控制元素显示、隐藏、切换、滑动的方法总结

jQuery

为米林等地区用户提供了全套网页设计制作服务，及米林网站建设行业解决方案。主营业务为成都做网站、网站设计、米林网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

隐藏和显示

通过

hide()

和

show()

两个函数，jQuery

支持对

HTML

元素的隐藏和显示：

实例

复制代码

代码如下:

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

$("p").hide();

});

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

$("p").show();

});

hide()

和

show()

都可以设置两个可选参数：speed

和

callback。

语法：

复制代码

代码如下:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

jquery怎么实现点击一个按钮控制一个div的显示和隐藏？

示例html

div class="abc" style="display:none"/div

input type="button" class="but" /

最简单的方法：

script

$(document).ready(function(e) {

$(".but").click(function(e) {

$(".abc").toggle();

});

});

/script

toggle() 的作用就是当对象是显示的就隐藏，当是隐藏的则显示。

------

如果你除了显示和隐藏之外还需要同时实现其他功能的话，可以这样：

script

$(document).ready(function(e) {

$(".but").click(function(e) {

if( $(".abc").hasClass("show") ){

// 执行隐藏

$(".abc").hide().removeClass("show");

// 其他

}else{

// 显示

$(".abc").show().addClass("show");

}

});

});

/script

这里通过自定义一个 class : show 来判断 div 是显示或隐藏

hasClass() 是否存在某个class

hide() 隐藏对象

show() 显示对象

removeClass() 移除一个class

addClass() 添加一个class

除此，还可以通过jquery设置这个 div 的 css : display:none/block 来实现隐藏/显示

PS：jquery如何删除div里面的某个div

思路：首先获取到需要删除的对象，然后使用jQuery提供的 remove() 方法删除被选元素及其子元素。

例如，对于如下的HTML结构：

div id="test"

div id="test1"/div

div class="test2"/div

div class="test2"/div

div/div

/div

1、删除id为test1的div

首先使用id选择器获取元素，然后使用remove()函数删除，相应代码为：

$("div#test1").remove();

2、删除所有class为test2的元素

$("#test div.test2").remove();   // 或者  $("div").remove("#test .test2");

3、删除最后一个div

虽然该div没有id及class属性，但是可以从其位置关系上获取然后删除之：

$("#test div:last").remove();

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

1.JQ中显隐有以下几种方式

show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作

2.show()方法

显示出隐藏的 p 元素。

$(".btn2").click(function(){

$("p").show();

});

3.toggle()方法

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

html

head

script type="text/javascript" src="/jquery/jquery.js"/script

script type="text/javascript"

$(document).ready(function(){

$(".btn1").click(function(){

$("p").toggle(1000);

});

});

/script

/head

body

pThis is a paragraph./p

button class="btn1"Toggle/button

/body

/html

3.slideDown()方法

以滑动方式显示隐藏的 p 元素：

$(".btn2").click(function(){

$("p").slideDown();

});

4.hide() 方法

隐藏可见的 p 元素：

$(".btn1").click(function(){

$("p").hide();

});

这个函数经常与show一起使用

5.css()方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

$("p").css("display","none");

实例：

!DOCTYPE 

html 

head 

meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 

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 

h3div里内容的显示隐藏特效/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

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