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

显示隐藏的例子：

<!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:hidden").show();

  });

});

</script>

</head>

<body>

<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>

<button id="hide" type="button">隐藏</button>

<button id="show" type="button">显示</button>

</body>

</html>

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

其他：

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

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

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

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

例如

$("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. bootstrap--栅格系统布局

    栅格布局使用例子: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  2. Bootstrap启动（关闭）轮播

    $('.carousel').carousel(); //启动轮播 $('.carousel').carousel(‘pause’); //关闭轮播 $(‘.carousel’).carousel({ ...

  3. JAVA ——int 类型除法保留两位小数

    @Test public void txfloat() { // TODO 自动生成的方法存根 int a=9; int b=7; DecimalFormat df=new DecimalFormat ...

  4. NOIP模拟 9.09

    AK300分 果实计数 (count.pas/.c/.cpp) 时间限制:1s,空间限制32MB 题目描述: 淘淘家有棵奇怪的苹果树,这棵树共有n+1层,标号为0~n.这棵树第0层只有一个节点,为根节 ...

  5. SQL竖表转横表Json数据

    1.数据准备 create  table  Vertical(  Id  int ,  ProjectName varchar(20),  ProjectValue int ) insert into ...

  6. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  7. Win7系统中wmiprvse.exe占用CPU高如何解决

    该进程的详细路径是在:C:\WINDOWS\System32\Wbem  我们可以在任务管理器中“wmiprvse.exe”进程上单击右键,选择“打开文件位置”即可看到,如果该文件不在该文件夹中,那么 ...

  8. Python要如何实现（列表）排序？

    排序,是许多编程语言中经常出现的问题.同样的,在Python中,如何是实现排序呢?(以下排序都是基于列表来实现) 一.使用Python内置函数进行排序 Python中拥有内置函数实现排序,可以直接调用 ...

  9. Leetcode874.Walking Robot Simulation模拟行走的机器人

    机器人在一个无限大小的网格上行走,从点 (0, 0) 处开始出发,面向北方.该机器人可以接收以下三种类型的命令: -2:向左转 90 度 -1:向右转 90 度 1 <= x <= 9:向 ...

  10. LeetCode136 Single Number, LeetCode137 Single Number II, LeetCode260 Single Number III

    136. Single Number Given an array of integers, every element appears twice except for one. Find that ...