《jquery框架开发》第5课：ID选择器

最新推荐文章于 2024-03-20 16:21:21 发布

李书明

最新推荐文章于 2024-03-20 16:21:21 发布

阅读量277

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/lsmxx/article/details/100032759

版权

jquery 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
</head>
<body>
<article>
    <header>
        <h2>这是一个标题</h2>
    </header>
    <p id="p1">第一段正文</p>
    <p>第二段正文</p>
    <footer>
        <button>隐藏</button>
    </footer>
</article>

<script>
    $(function(){
        $('button').click(function () {
            $('#p1').hide() //选择id = p1的元素，让其隐藏
        })
    })
</script>

</body>
</html>

代码中的$('#p1') 就是ID选择器，它所选中的元素是唯一的。

在HTML中，不允许出现两个ID值相同的元素，虽然浏览器能”容忍“你的错误，但JS或jquery却不能，不信可以试一试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
</head>
<body>
<article>
    <header>
        <h2>这是一个标题</h2>
    </header>
<!--    这里出现两个id相同的元素-->
    <p id="p1">第一段正文</p>
    <p id="p1">第二段正文</p>
    <footer>
        <button>隐藏</button>
    </footer>
</article>

<script>
    $(function(){
        $('button').click(function () {
            $('#p1').hide() //选择id = p1的元素，让其隐藏
        })
    })
</script>

</body>
</html>

运行上面的代码，你就会发现，点击按钮后，只有第一个 id = p1 的元素隐藏了，第二 id = p1 的元素没有隐藏，说明 id 选择器只能找到符合条件的第一个元素，其它元素会忽略掉。

切记：在HTML中，使用 id 时，它的值在整个文档中应该是唯一的。否则不仅影响你的js或jquery代码，还会影响你写的css样式

李书明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
《jquery框架开发》第5课：ID选择器

id 选择器通过 HTML 元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</t...
复制链接

扫一扫