JQuery之选择器的类型

JQuery中的选择器数量和JavaScript中的选择器数量相差无几，JQuery中的选择器类型如下图：

代码实现：

<script src="JS/jquery-3.4.1.js"></script>
    <script>
        // 利用JQuery创建程序入口1
        $(document).ready(function(){
            var $div = $('#div1');
            alert($div);
        });

        // 利用JQuery创建程序入口2
        $(function(){
            var $div = $('#div');
            alert($div);
        });

        // JQuery中的选择器
        // 类选择器
        $(function(){
            var $div = $('.cd1');
            $div.css({'color':'red','background':'blue'});   
        });
        // ID选择器
        $(function(){
            var $div = $('#div2');
            $div.css({'color':'black','background':'yellow'});
        });
        // 标签选择器
        $(function(){
            var $div = $('div');
            $div.css({'width':'200px','height':'200px'});
        });
        // 层级选择器
        $(function(){
            var $div = $('#div3 #div4');
            $div.css({
                'color':'yellow',
                'background':'cyan'
            });
        });
        // 组选择器
        $(function(){
            var $div = $('#div3,#div5');
            $div.css({
                'background':'pink',
                'color':'white'
            });
        });
        // 标签选择器
        $(function(){
            var $txt = $('input[name=my_text]') ;
            $txt.val('找到你了');
        });
   </script>


<body>
    <div id="div1" class="cd1">AAA</div>
    <div id="div2" class="cd2">BBB</div>
    <div id="div3" class="cd3">CCC
        <div id="div4" class="cd4">DDD
            <input type="text" name="my_text">
        </div>
    </div>
    <div id="div5">EEE

    </div>
</body>

该花的钱要花，该吃的饭要吃。