首页 > Web开发 > 详细

JQuery之选择器的类型

时间:2019-12-10 19:39:16      阅读:95      评论:0      收藏:0      [点我收藏+]

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>

 

JQuery之选择器的类型

原文:https://www.cnblogs.com/chao666/p/12018320.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论(0)
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!