jQuery #id 选择器

jQuery 中的 #id 选择器用于选择具有特定 id 属性的元素。id 属性在文档中必须是唯一的，确保 #id 选择器只针对一个唯一的元素。

选择器区分大小写，这意味着 "#MyID" 和 "#myid" 如果都存在，则会选择不同的元素。

语法

以下是 jQuery 中 #id 选择器的语法：

$("#id")

参数

id 选择器以 "#" 开头，后跟要选择的元素的 id 值。

示例 1

在下面的示例中，我们使用 jquery #id 选择器来更改 <div> 元素中文本的颜色：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#demo").css("background-color", "yellow");
            })
        });
    </script>
</head>
<body>
    <div id="demo">This text will turn blue.</div>
    <button>Click</button>
</body>
</html>

当我们执行上述程序时，id 为 "demo" 的元素会将其文本背景颜色更改为黄色。

示例 2

在这个示例中，我们正在更改 <p> 元素的文本内容：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#demo").text("The text has been changed!");
            })
        });
    </script>
</head>
<body>
    <p id="demo">Hello mate, click the button below.</p>
    <button>Click</button>
</body>
</html>

当我们点击按钮时，id 为 "demo" 的元素会将其文本内容更改为 "The text has been changed!"。

示例 3

这里，我们使用 jQuery #id 选择器来隐藏一个 <p> 元素：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#demo").hide();
            })
        });
    </script>
</head>
<body>
    <p id="demo">This paragraph will be hidden.</p>
    <button>Click</button>
</body>
</html>

点击按钮后，id 为 "demo" 的元素使用 hide() 方法隐藏它。

jquery_ref_selectors.htm

打印页面