Jquery中Show(),hide()方法的使用

news/2024/7/11 0:50:55 标签: 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() 方法:

实例

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果您点击我,我会消失。</p>
<p>点击我,我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>

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

实例
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>

</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

语法:
$(selector).toggle(speed,callback);可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。


http://www.niftyadmin.cn/n/1732326.html

相关文章

css问题filter: alpha(opacity=100,finishopacity=0,style=2)

alpha是来设置透明度的,它的基本属性是filter&#xff1a;alpha&#xff08;opacity&#xff0c;finishopacity&#xff0c; style&#xff0c;startX&#xff0c;startY&#xff0c;finishX&#xff0c;finishY&#xff09;. opacity代表透明度数,选值0-100,0是完全透明,100是…

Chrome浏览器、火狐等浏览器上和IE类浏览器(360、qq等)有所不同,目前已发现的不同以及解决办法

1、Chrome浏览器、火狐等浏览器上和IE类浏览器&#xff08;360、qq等&#xff09;有所不同&#xff0c;目前已发现的不同以及解决办法&#xff1a; &#xff08;1&#xff09; IE是parent.document&#xff0c;Chrome是parent.contentDocument 解决办法&#xff08;通用型&a…

Jquery使用post方式进行异步请求

jQuery.post( url, [data], [callback], [type] ) &#xff1a;使用POST方式来进行异步请求参数&#xff1a;url(String) : 发送请求的URL地址.data(Map) : (可选) 要发送给服务器的数据&#xff0c;以 Key/value 的键值对形式表示。callback(Function) : (可选) 载入成功时回调…

JQuery 弹出层,始终显示在屏幕正中间

上一篇是关于遮罩层的展示&#xff1a; 链接地址为&#xff1a;http://xutao5641745.iteye.com/blog/1310955 样式代码&#xff1a; .model{position: absolute; z-index: 1003; width:320px; height:320px; text-align:center;background-color:#0066FF; display: none;}jq…

尤雨溪公布 Vue 3.0 开发路线:将从头开始重写 3.0

在上周的 Vue.js 伦敦大会上&#xff0c;Vue.js 作者尤雨溪简要介绍了 Vue 下一个主要版本要发布的内容&#xff0c;9 月 30 日&#xff0c;尤雨溪在 medium 个人博客上发布了 Vue 3.0 的开发路线&#xff0c;我们不妨看看 Vue 3.0 将会有怎样的发展。兼容按照尤雨溪的说法&…

JavaScript弹出窗口DIV层效果代码 [

document对象] 该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。 属性 alinkColor 活动链接的颜色(ALINK)   anchor 一个HTMI锚点,使用#lt;A NAME#gt;标记创建(该属性本身也是一个对象)   anchors array 列出文档锚点对象的数组(#lt;A NAME#gt;)(该…

使用70行代码配合hooks重新实现react-redux

原由 react-hooks 是 react 官方新的编写推荐&#xff0c;我们很容易在官方的 useReducer 钩子上进行一层很简单的封装以达到和以往 react-redux \ redux-thunk \ redux-logger 类似的功能&#xff0c;并且大幅度简化了声明。 react-hooks 的更多信息请阅读 reactjs.org/hook…

炫酷粒子表白,双十一脱单靠它了!

双十一光棍节又要来临了&#xff0c;每年这个时候都是本人最苦闷的时刻。日渐消瘦的钱包&#xff0c;愈发干涸的双手&#xff0c;虽然变强了&#xff0c;头却变凉了。今年一定要搞点事情&#xff01; 最近听女神说想谈恋爱了&#xff0c;✧(≖ ◡ ≖) 嘿嘿&#xff0c;一定不能…