jQuery基本选择器

最新推荐文章于 2025-01-17 23:44:53 发布

原创最新推荐文章于 2025-01-17 23:44:53 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

4 篇文章

订阅专栏

<html>
    <head>
        <title>jQuery基本选择器</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="jquery-1.11.0.js"></script>
        <style type="text/css">
            *{margin:0;padding: 0;}
            html,body{height:100%;width:100%}
            div{
                background:#aaa;/*#aaa:灰色*/
                border: 1px solid #000;
                font-size:14px;
                font-family:verdana;
            }
            .exa_1{
                width: 450px;
                height: 350px;
            }
            #id_find{
                font-size: 30px;
            }
            .exa_1 .mini{
                width:350px;
                height:150px;
                margin: 20px;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="exa_1">
            <p id="id_find">jQuery基本选择器:</p>
            <div class="mini">
                <p>1、通配符(*)选择器：$("*")选取所有的元素</p>
                <p>2、群组选择器：$("html,body")选取html,body标签</p>
                <p>3、元素选择器: $("div")选取所有div元素</p>
                <p>4、类选择器：$(".exa_1")选取class为exa_1的元素</p>
                <p>5、id选择器：$("#id_find")选取idid_find的元素</p>
                <p>6、后代选择器：$(".exa_1 .mini")选取.exa_1任意class为mini的后代元素</p>
            </div>
        </div>
        <script type="text/javascript"></script>
    </body>
</html>