jQuery常用选择器

【标签选择器】

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
  <!-- 标签选择器 -->
    <h1>清平调</h1>
    <h3>李白</h3>
    <script>
        $("h1").attr("style", "font-size:3rem;text-align:center");
        $("h3").attr("style", "font-size:1.2rem;text-align:center");
    </script>

【id选择器】

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- id选择器 -->
<hr id="hr_1" />
<script>
    $("#hr_1").attr("color", "red");
    $("#hr_1").attr("width", "30%");
</script>

【class选择器】

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- class选择器 -->
<p class="info">云想衣裳花想容，</p>
<p class="info">春风拂槛露华浓。</p>
<p class="info">若非群玉山头见，</p>
<p class="info">会向瑶台月下逢。</p>
<script>
    var classes = $(".info");
    classes.attr("style", "text-align:center;font-size:1.7rem");
</script>

【集合选择器】

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- 集合选择器 -->
<style>
    ul {
        list-style: none;
        padding: 0px;
        font-size: 1.5rem;
        width: 30%;
    }
</style>
<ul>
    <li>0:A</li>
    <li>1:B</li>
    <li>2:AB</li>
    <li>3:O</li>
    <li>4:H+</li>
    <li>5:H-</li>
</ul>
<script>
    //获取集合中所有的奇数下标:odd/偶数下标:even
    var ul = $("ul li:odd");
    ul.attr("style", "background-color:skyblue");
    var oul = $("ul li:even");
    oul.attr("style", "background-color:pink");
</script>

效果：

jQuery常用选择器【标签选择器】【id选择器】【class选择器】【集合选择器】_javascript

希望能对大家有所帮助。