jquery中show()、hide()和toggle()用法实例


Posted in Javascript onJanuary 15, 2015

本文实例讲述了jquery中show()、hide()和toggle()用法。分享给大家供大家参考。具体分析如下:

这里介绍了jquery效果:show()方法、hide()方法和toggle()方法
现实应用场景:QQ面板里我的好友分组

<html>

<head>

<title>jquery效果:show()方法、hide()方法和toggle()方法</title>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

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

  $("p").show();

 });

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

  $("p").hide(2000);

 });

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

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

 });

});

</script>

</head>

<body>

<button id="show">显示</button><button id="hide">隐藏</button><button id="tog">切换</button>

<p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 变量命名规则
Sep 23 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
js获取地址栏参数的两种方法
Jun 27 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 #Javascript
jquery果冻抖动效果实现方法
Jan 15 #Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 #Javascript
js实现遮罩层弹出框的方法
Jan 15 #Javascript
jquery隔行换色效果实现方法
Jan 15 #Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 #Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 #Javascript
You might like
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
学校通报表扬范文
2015/05/04 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python