`
koalaxyq
  • 浏览: 89946 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类

Jquery选择器(五) -- Visibility Filters

阅读更多
可见性过滤器


[1]  :hidden      Returns: Array<Element(s)>
      说明: 匹配所有的隐藏元素。在jQuery 1.3.2中,隐藏元素的计算方式有所改变。假设一个元素是不可见的,那么它或者它的父节点在文档流中不占用任何空间。css visibility属性设置的元素不考虑在内。(虽然visibility属性可以让元素不可见,但元素在文档流中还是占有空间的)
      
$("span:first").text("Found " + $(":hidden", document.body).length + 
         " hidden elements total.");
$("div:hidden").show(3000);
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");




[2]  :visible      Returns: Array<Element(s)>
      说明: 匹配所有的可见元素。在jQuery 1.3.2中,可见元素的计算方式有所改变。假设一个元素是可见的,那么它或者它的父节点在文档流中占用空间。css visibility属性设置的元素不考虑在内(即使   visibility: hidden;   该元素也认为是可见的)。
      
$("div:visible").click(function () {
   $(this).css("background", "yellow");
});
$("button").click(function () {
   $("div:hidden").show("fast");
});






----------------------------------------------------------------------------------------------------------------------------------
分享到:
评论

相关推荐

    前端项目-jquery-visibility.zip

    在"jquery-visibility.zip"压缩包中,包含了一个名为"jquery-visibility-master"的文件夹,这通常意味着这是项目的源代码仓库。在这个文件夹内,我们可能会找到以下关键文件: 1. `README.md`:项目说明文档,详细...

    vue-observe-visibility:检测何时元素在页面上变得可见或隐藏

    npm install --save vue-observe-visibility :warning: 该插件使用了并非在所有浏览器中都支持的 (当前在Edge,Firefox和Chrome中受支持)。 您需要包括一个才能使其在不兼容的浏览器上运行。 进口 import Vue ...

    11_元素的隐藏-display-visibility.html

    11_元素的隐藏-display-visibility

    jQuery选择器介绍,便于记忆

    ### jQuery选择器详解 #### 一、基本选择器 **1.1 #id** - **描述**: 通过指定的ID来匹配单个元素。 - **示例**: `$("#myId")` 将会选中ID为`myId`的元素。 **1.2 .class** - **描述**: 通过指定的类名来匹配一组...

    Api-react-page-visibility.zip

    Api-react-page-visibility.zip,声明的、嵌套的、有状态的、同构的页面可见性react componentreact页面可见性,一个api可以被认为是多个软件设备之间通信的指导手册。例如,api可用于web应用程序之间的数据库通信。...

    jquery选择器

    jQuery选择器基于CSS1、CSS2、CSS3的选择器,并扩展了一些自定义的选择器。 ### 1. 基本选择器 - **ID选择器**: `#id` - 通过元素的ID属性选取单个元素,例如`$("#myID")`。 - **类选择器**: `.class` - 选取具有...

    Jquery选择器说明文档.doc

    本文将详细阐述JQuery中的各种选择器及其使用方法。 1. **基础选择器**: - `#id`:通过元素的ID选择器,如`$("#divId")`选取ID为`divId`的元素。 - `element`:根据元素名称选择,例如`$("a")`选择所有`&lt;a&gt;`元素...

    react-loadable-visibility:围绕react-loadable和@loadablecomponent的包装器,以在页面上可见元素时加载元素

    react-loadable-visibility 包装了和 ,仅加载页面上可见的导入。 使用react-loadable示例 import LoadableVisibility from "react-loadable-visibility/react-loadable" ; import Loading from "./my-loading-...

    react-page-visibility-render-props:用于pagevisibility.js包的简单React包装器呈现道具以实现更好的可组合性

    react-page-visibility-render-props 用于简单,使用实现更好的可组合性。 待办事项:完成自述文件。 安装 npm install --save react-page-visibility-render-props 用法 只需将函数作为组件的&lt;PageVisibility&gt; 。...

    react-document-visibility:功能性的React组件,可在当前文档未聚焦时重新呈现并通知子对象

    $ npm install --save react-document-visibility $ yarn add react-document-visibility 孩子是一种功能 要使用Visbility组件,请Visbility传递一个函数。 状态更改时将使用新值visible调用该函数。 import ...

    jQuery选择器参数及用法详解

    jQuery选择器是jQuery库中的核心功能之一,它允许开发者高效地选取DOM中的特定元素,进而实现各种操作,如添加样式、修改内容或绑定事件等。本文将详细解析jQuery选择器的参数及用法。 ### 基本选择器 1. **#id**...

    jquery-flip翻转插件有demo

    在本文中,我们将深入探讨jQuery-flip插件,这是一个用于创建动态翻转效果的强大工具,尤其适用于网页设计和开发。该插件使开发者能够轻松实现3D翻转效果,为用户界面增添互动性和视觉吸引力。 首先,jQuery-flip...

    javascript&amp;amp;jquery方法比对.docx

    在前端开发领域,JavaScript 是一种核心的编程语言,而 jQuery 是基于 JavaScript 的一个库,它简化了许多常见的任务,如选择元素、处理事件、创建动画等。本文将详细介绍 JavaScript 和 jQuery 在一些常用操作上的...

    JQuery选择器(全面的选择方法)

    jQuery的选择器系统是其强大功能的基础,使得JavaScript代码更加简洁、高效,降低了网页开发的复杂度。在实际开发中,结合使用这些选择器可以实现丰富的交互效果和动态更新内容,从而提升用户体验。

    L06.02jQuery选择器参考1

    jQuery选择器是jQuery库的核心功能之一,用于在DOM(文档对象模型)中高效地选取元素。以下是对jQuery选择器的详细解释: 1. **All Selector ("*")**: 选择所有元素,无论其类型如何。 2. **:animated Selector**:...

    ko-grid-visibility-detection:试图对可见性变化做出React的 ko-grid 扩展

    这篇讨论主要聚焦于一个针对React框架的扩展,名为"ko-grid-visibility-detection",它致力于解决数据网格(grid)在可见性变化时的处理问题。这个扩展是针对Knockout.js(ko)库的一个增强,旨在提升用户体验,特别...

    toggle-password-visibility

    在IT行业中,"toggle-password-visibility"通常指的是一个常见的用户界面功能,允许用户切换显示密码的可见性。这种功能在登录表单、设置页面等地方很常见,它通过一个图标或按钮来切换密码的隐藏与显示状态,以帮助...

    JQuery基础教程(圣思园)

    《JQuery基础教程(圣思园)》是...通过以上分析,可以看出圣思园的《JQuery基础教程》不仅涵盖了JQuery选择器的基础知识,还深入探讨了不同选择器的细节和应用场景,对于初学者理解和掌握JQuery选择器具有极高的价值。

    css-content-visibility:新CSS属性内容可见性|| 性能测试示例

    对于不在视口内的元素,浏览器可能会选择不渲染,从而节省资源。 2. `visible`:指定元素的内容始终可见并参与渲染,与没有设置`content-visibility`的情况相同。 3. `hidden`:元素的内容不会被渲染,直到用户与其...

    use-page-visibility:简而言之,React钩子库可检测页面可见性:eye:

    npm install use-page-visibility 或与纱线 yarn add use-page-visibility 用法 ... import usePageVisibility from 'use-page-visibility' ; function App ( ) { const handleVisibilityChange = visible =&gt; { ...

Global site tag (gtag.js) - Google Analytics