可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

显示隐藏的例子:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7. $("#hide").click(function(){
  8. $("p").hide();
  9. });
  10. $("#show").click(function(){
  11. $("p:hidden").show();
  12. });
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. <p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
  18. <button id="hide" type="button">隐藏</button>
  19. <button id="show" type="button">显示</button>
  20. </body>
  21. </html>

点击隐藏按钮,字会隐藏,再点击显示按钮就会显示。

其他:

关于 hide() 和 show() 的语法:

  1. $(selector).hide(speed,callback);
  2. $(selector).show(speed,callback);

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

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

例如

  1. $("p:hidden").show(3000);

隐藏的部分就会自上而下缓慢地出现

jQuery学习笔记之可见性过滤选择器的更多相关文章

  1. jQuery学习笔记(简介,选择器)

    jQuery优势 1. 强大的选择器.jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器. 2. 出色的DOM操作封装 3. 可靠的事件处理机制 ...

  2. JQuery学习笔记(1)——选择器

    JQuery本质上还是JavaScript,是JavaScript的一个框架,可以让我们更简洁地去使用JavaScript 使用之前,记得在html头部引用JQuery 通过选择器获得JQuery对象 ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  5. jquery学习笔记(一):选择器

    内容来自[汇智网]jquery学习课程 1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根 ...

  6. JQuery 可见性过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. jQuery选择器之可见性过滤选择器Demo

    测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  8. 锋利的jQuery学习笔记之jQuery选择器

    在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...

  9. jQuery学习笔记(2) jQuery选择器

     jQuery的选择器完全继承了CSS的风格,利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为. 目录 目录 CSS选择器 jQuery选择器 jQuery选 ...

随机推荐

  1. meta标签中设置apple-itunes-app的意义

    告诉iphone的safari浏览器:这个网站对应的是哪个app <meta name="apple-itunes-app" content="app-id=589 ...

  2. 了解真实的『REM』多终端屏幕适配

    作者:hbxeagle 链接:github.com/hbxeagle/rem/blob/master/README.md rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使 ...

  3. 浏览器在IE8 以下时显示提示信息,提示用户升级浏览器

    <!--[if lt IE 8]> <div style="background: #eeeeee;border-bottom: 1px solid #cccccc;col ...

  4. 使用Pycharm写一个网络爬虫

    在初步了解网络爬虫之后,我们接下来就要动手运用Python来爬取网页了. 我们知道,网络爬虫应用一般分为两个步骤: 1.通过网页链接获取内容: 2.对获得的网页内容进行处理 这两个步骤需要分别使用不同 ...

  5. Java中用JXL导出Excel代码详解

    jxl是一个韩国人写的java操作excel的工具, 在开源世界中,有两套比较有影响的API可供使用,一个是POI,一个是jExcelAPI.其中功能相对POI比较弱一点.但jExcelAPI对中文支 ...

  6. 2018-8-10-如何移动-nuget-缓存文件夹

    title author date CreateTime categories 如何移动 nuget 缓存文件夹 lindexi 2018-08-10 19:16:51 +0800 2018-2-13 ...

  7. 简单的layui二级联动

    用layui实现省市二级联动, 需要注意的是使用layui之后, 你看到的下拉选框就不是option了,而是一些div 1.select表单 2.JS, ajax返回的是普通的数组

  8. django中模板

    一.创建模板目录和模板html文件 # /templates/应用名称/html文件集合 #模板目录:创建项目根目录下面,和manage.py工具在同一层#在模板目录下面分别创建各个应用的模板目录#最 ...

  9. 从0开始学习 GitHub 系列之「07.GitHub 常见的几种操作」

    之前写了一个 GitHub 系列,反响很不错,突然发现竟然还落下点东西没写,前段时间 GitHub 也改版了,借此机会补充下. 我们都说开源社区最大的魅力是人人多可以参与进去,发挥众人的力量,让一个项 ...

  10. go struct 继承