首页 > Web开发 > 详细

JQuery之选择器的类型

时间:2019-12-10 19:39:16      阅读:88      评论: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 版权所有
打开技术之扣,分享程序人生!