JQuery学习笔记-可见性选择器

JQuery是一种JavaScript库，它提供的丰富的API可以帮助我们更容易地操作HTML文档、处理事件、创建动画等等。本文将主要介绍JQuery中的可见性选择器，包括相关的语法、用法以及示例。

可见性选择器主要用于选择当前页面中可见的元素，对于隐藏的元素或不可见的元素则不进行选择。这里我们将介绍以下四个可见性选择器：

1. :visible：选择当前可见元素。

2. :hidden：选择当前隐藏元素。

3. :focus：选择当前被焦点的元素。

4. :blur：选择当前失去焦点的元素。

以上这些选择器都是以冒号（:）作为开头的，可以在jQuery选择器中与其他选择器组合使用，以实现更多的选择功能。

下面是一些具体的使用方法和示例：

1. :visible

:visible选择器可以选择所有可见的元素，包括宽度和高度都为0的元素。

语法：$(":visible")

示例：选择当前所有可见元素，并将它们的文本内容替换成“可见元素”。

$("：visible").each(function() {

  $(this).text("可见元素");

});

2. :hidden

:hidden选择器可以选择所有的隐藏元素，包括display:none、visibility:hidden、宽度和高度为0等情况下的元素。

语法：$(":hidden")

示例：选择当前所有隐藏元素，并使它们的display属性设置为“block”。

$(":hidden").css("display", "block");

3. :focus

:focus选择器可以选择当前被焦点的元素。

语法：$(":focus")

示例：给当前被焦点的输入框添加一个红色的边框。

$(":focus").css("border", "1px solid red");

4. :blur

:blur选择器可以选择当前失去焦点的元素。

语法：$(":blur")

示例：失去焦点的输入框背景颜色变为灰色。

$(":blur").css("background-color", "gray");

通过学习以上四个可见性选择器，我们可以更加灵活地操作页面中的元素。在实际开发中，可以根据需要结合这些选择器，快速实现一些特定的交互效果。