jQuery-基本选择器

最新推荐文章于 2022-02-06 19:29:53 发布

原创最新推荐文章于 2022-02-06 19:29:53 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#标签 #class #dom #jquery #html

jQuery 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个使用jQuery基本选择器的示例，展示了如何通过元素ID、class和标签名来选择并操作DOM元素，例如改变背景颜色。

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

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id，class和标签名等来查找DOM元素。在网页中，每个ID名称只能使用一次，class允许重复使用。

效果描述：一个简单的HTML示例，通过基本选择器来匹配刚才HTML代码中的<div>,<span>等元素并进行操作（改背景色）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <script src="../libs/jquery.js"></script>
    <style type="text/css">
        div,span,p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaaaaa;
            font-size: 12px;
        }
        div.hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="one" id="one">
    id is one,class also is one
    <div class="mini">class name is mini</div>
</div>
<div class="one" id="two" title="test">
    id is two, class is one, title is test
    <div class="mini" title="other">class is mini,title is other</div>
    <div class="mini" title="test">class is mini, title is test</div>
</div>
<div class="one">
    <div class="mini">class is mini</div>
    <div class="mini">class is mini</div>
    <div class="mini">class is mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class is mini</div>
    <div class="mini">class is mini</div>
    <div class="mini">class is mini</div>
    <div class="mini" title="test">class is mini, title is test</div>
</div>
<div style="display: none" class="none">
    style的display为“none”的div
</div>
<div class="hide"> class is hide</div>
<div>
    包含input的type为“hidden”的div
    <input type="hidden" size="8">
</div>
<span id="mover">正在执行动画的sapn元素</span>
<script>
   /* $("#one")       //改变ID为one的元素的背景色
            .css("background","#000099");
    $(".mini")      //改变class为mini的所有元素的背景色
            .css("background","#330000");
    $("div")        //改变元素名是div的所有元素的背景色
            .css("background","#666699");
    $("*")
            .css("background","#bbffaa");*/
    $("span,#two")      //改变所有的span元素的ID为two的元素背景色
            .css("background","#999966");
</script>
</body>
</html>