使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>

使用 toggle() 方法来切换 hide() 和 show() 方法。(显示和隐藏)

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.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>

JQ 常见demo的更多相关文章

  1. JS/JQ常见兼容辅助插件

    1.Respond.js Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-widt ...

  2. jq小demo—图片翻页展示效果 animate()动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 整理版jq 复习贴子

    1绝对定位(abs)与相对定位(relative) 区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把 其它的层遮罩住 绝对定位就是的参照位置 ...

  4. 推荐一个内容滚动jquery插件

    myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...

  5. 单行文字滚动就用myslider

    单行文字滚动就用myslider,myslider是一个小型的内容滚动jquery插件. 首先请看实例:http://keleyi.com/jq/myslider/demo/4.htm 然后来看代码: ...

  6. 使用hovertree菜单作为后台导航

    hovertree是一个jquery菜单插件,官方网址:http://keleyi.com/jq/hovertree/ ,可以登录该网址体验效果. 0.1.3版本:http://keleyi.com/ ...

  7. HoverTree菜单0.1.3新增效果

    HoverTree菜单0.1.3增加弹出菜单的动态效果,可以是动态下拉,也可以是动态淡入. 效果请看:http://keleyi.com/jq/hovertree/demo/demo.0.1.3.ht ...

  8. jQuery仿京东无限级菜单HoverTree

    官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...

  9. js基础第八天

    返回前面起第一个字符位置 indexOf("sdfsdf");它是从左边索引为0开始数,而且只找第一个,然后返回该字符的位置.返回是个数值.如果找不到该字符,那么就会返回-1. 返 ...

随机推荐

  1. repo 修改邮箱地址

    需要重新运行 repo init 被带上参数: --config-name xx@a.com

  2. urlencode遇到中文编码问题

    urlencode并不会改变输入的编码格式, 默认会将中文输出为 gbk 编码, 类似的, quote 会对中文进行 gbk 编码 不过, 当遇到嵌套多层的字典时, 问题就来了, 中文会被 utf8 ...

  3. HP网络打印机--如何添加打印机

    HP网络打印机采用web服务形式,应添加打印机-通过Internet的打印机--填写网址http://192.168.1.10:80(从其他win7电脑-计算机-网络-网络设备中双击添加打印机,然后在 ...

  4. Mac OS X 上安装 ASP.NET 5

    在Mac OS X Yosemite 10.10.3 中搭建第一个 ASP.NET 5 Web 项目 终于有时间在 Mac 上安装一下 ASP.NET 5,网上有许多教程,但是多数的时间比较早了,版本 ...

  5. studing(来自转载)

    1.getchar(): http://www.cnblogs.com/jiangjun/archive/2012/05/16/2503676.html 2.gets()和scanf( ): http ...

  6. Qt5.5.1编译出来的程序出现libgcc_s_dw2-1.dll的解决方案

    问题如图: 输入"myudp2016.exe 1  " 后出现 这是因为没有在系统环境变量path里加上相关路径,我们添加如下路径: 比如说WIN7系统-开始-计算机-右键-属性- ...

  7. Java笔记:关键字

    关键字 描述 abstract 抽象方法,抽象类的修饰符 assert 断言条件是否满足 boolean 布尔数据类型 break 跳出循环或者label代码段 byte 8-bit 有符号数据类型 ...

  8. MVC AjaxOptions 中的OnSuccess方法执行多次的问题

    原因是单个页面嵌套多个部分视图,而多个视图中有多个表单提交但是Onsuccess方法的函数名是一样的. 例如主页面的Onsuccess方法叫success 点击部分视图后js文件又含有一个succes ...

  9. Document对象操作、样式、属性、效果、

    Windows对象主要是操作浏览器外层的东西,而DOM对象是操作浏览器里面的东西. 如果我们要操作网页内容,那么一定需要操作标签! Document:文档对象模型→DOM:可以做一些特效(抢票的).摘 ...

  10. UML大战需求分析——阅读笔记06

    状态机图和活动图在样子比较相似,但状态机图是用来为对象的状态及造成状态改变的事件建模.我们大二学习UML统一建模语言状态机图模块时了解到,UML的状态机图主要用于建立对象类或对象的动态行为模型,描述系 ...