jQuery(1)——jQuery选择器-优快云博客

本文深入讲解了jQuery选择器的使用，包括元素、ID、类选择器等，通过实例演示了如何利用选择器对HTML元素进行操作，如设置样式、获取元素等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

## jQuery选择器

先看看w3cschool的对jQuery的概述:

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

最常用的有以下三个：

1. 元素选择器

$("div")

2. ID选择器

$("#ID")

3. class选择器

$(".test")

这里有更多的选择器实例 w3cschool jquery选择器

下面这个demo，包含了以上链接的实例练习：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jquery 选择器学习</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
    $(document).ready(function(){
        $('*').css('font-size','30px');     //选取所有元素 设置字体

        $('#a').css('background','green');  //id选择器 设置背景颜色 绿色
        // alert($('#a'));
        // alert(document.getElementById('a'));
        $('.b').css('background','blue');   //.class选择器 设置背景颜色 蓝色

        $('p').css('background','yellow');  //元素选择器 设置背景颜色 黄色

        $('#a span').css('border','2px solid yellow');      //后代选择器 设置黄色边框

        $('div:first').css('border','3px solid red');     //伪类选择器 选择第一个div  设置红色边框

        $('p.test').css('background','gray');   //选择class为test的p元素
        
        //ul--------------------------

        $('ul li:first').css('border','2px solid red');  //选择第一个ul的第一个li 设置红色边框
        
        $('ul li:last-child').css('color','green');     //选择所有ul下的最后一个li 设置绿色字体
        
        $('[href]').html('我是带href属性元素');     //选择带href属性的元素 修改元素内容为‘我是带href属性元素’

        $("a[target='_blank']").html("我是带target='_blank'属性的a标签");    //选择带target='_blank'属性的a标签

        $(':button').css('background','green');     //选择type=button的input,或者<button>标签 设置绿色

        $('li:even').css('background','#999');    //选择偶数位置的li 设置#333背景

        $('li:odd').css('background','pink');    //选择偶数位置的li 设置#333背景

    })
    </script>
</head>
<body>
    <div id="a">
        A
        <span>span</span>
    </div>
    <div class="b">
        B
    </div>
    <p>p</p>
    <p class="test">选择class为test的p元素</p>

    <hr>
    <ul>
        <li>0</li>
        <li>1</li>
        <li><a target="_blank">2</a></li>
        <li>3</li>
    </ul>
    <ul>
        <li>0</li>
        <li>1</li>
        <li><a href="#">2</a></li>
        <li>3</li>
    </ul>
    <input style="width:350px" type="button" value="我是type=button的input">
    <br>
    <button>button</button>
</body>
</html>