《jquery框架开发》第6课：元素选择器_一、元素选择器 :jquery 元素选择器基于元素名选取元素。啥意思呢?举个例子-CSDN博客

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

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>第一段正文</p>
    <p>第二段正文</p>
    <footer>
        <button>隐藏</button>
    </footer>
</article>

<script>
    $(function(){
        //选择文档中所有的button元素，其实这样用很危险，万一有多个button元素呢?可以使用id选择器
        $('button').click(function () {
            $('p').hide() //选择文档中所有的p元素，让其隐藏
        })
    })
</script>

</body>
</html>

上面的代码中，有两处使用元素选择器：$('button') 和 $('p') ，选择文档中所有的button元素和 p 元素，如果你的本意不是这样，就不能这样使用了。

其实，我们经常选择网页中某一部分的元素，看下面的例子：

<!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>第一段正文</p>
    <p>第二段正文</p>
    <footer>
        <button>隐藏</button>
    </footer>
</article>
<div>
    <p>不隐藏</p>
    <p>不隐藏</p>
</div>

<script>
    $(function(){
        $('button').click(function () {
           $('article p').hide() 
        })
    })
</script>

</body>
</html>

运行上面的代码，你就会发现，只有article标签中的 p 段落隐藏了，div 标签中的 p 段落不受影响。

$('article p') 使用了层次选择器（后续的章节中会学习到），选择articel标签中的p元素，其它p元素不会被选择。使用层次选择器，可以将某个元素限定在某个范围内，非常方便实用。