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之选择器的类型的更多相关文章

  1. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  2. HTML 学习笔记 JQuery（选择器）

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  3. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  4. jquery 之选择器

    一.基本: HTML代码: <p class="p1">p段落</p> <h class="h1">h标签</h> ...

  5. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  6. jquery相对选择器,又叫context选择器，上下文选择器;find()与children()区别

    jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...

  7. 关于jquery ID选择器的一点看法

    最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $( ...

  8. jquery下 选择器整理

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

  9. jquery常用选择器（转）

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

随机推荐

  1. kettle数据同步的5中方案

    数据同步:当数据源发生改变时,其他相关数据也跟着发展变化.根据需求不同可采取以下方案.1.触发器:在数据库建立增删改的触发器.触发器将变更放到一张临时表里.oracle同步cdc优点:实时同步缺点:影 ...

  2. 工具类 ，无需再存localstorage

    /** * 工具类 */var Utils = { /** * 获得查询参数 */ getQueryString: function(name) { var search = location.sea ...

  3. MongoDB自学------（1）MongoDB4.0安装

    一.环境 操作系统 安装包 安装方式 Ubuntu18.04 mongodb4.0 apt安装 Ubuntu18.04 mongodb4.0 docker安装 二.apt安装 sudo apt-key ...

  4. docker项目——上线tomcat网站

    项目: 1.使用docker部署tomcat环境 2.上线网站 3.完成访问使用等 第一步.启动基于tomcat镜像的容器 a.导入镜像 [root@localhost ~]# docker load ...

  5. ES6学习笔记01 -- 暂时性死区 （ temporal dead zone ）

    参考文档: let 和 const 命令 - ECMAScript6入门  暂时性死区(temporal dead zone) 理解ES6中的TDZ(暂时性死区) ES6 中 let 暂时性死区详解 ...

  6. PHP Swoole长连接常见问题

    连接失效问题例子其中,Redis常见的报错就是: 配置项:timeout报错信息:Error while reading line from the serverRedis可以配置如果客户端经过多少秒 ...

  7. C#winfrom打开指定的文件

    直接打开指定的文件 System.Diagnostics.Process.Start(v_OpenFilePath); 直接打开目录 string v_OpenFolderPath = @" ...

  8. QQ是怎样创造出来的？——解密好友系统的设计

    本篇介绍笔者接触的第一个后台系统,从自身见闻出发,因此涉及的内容相对比较基础,后台大牛请自觉略过. 什么是好友系统? 简单的说,好友系统是维护用户好友关系的系统.我们最熟悉的好友系统案例当属QQ,实际 ...

  9. nyoj 117 求逆序数 (归并（merge）排序)

    求逆序数 时间限制:2000 ms  |  内存限制:65535 KB 难度:5   描述 在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中 ...

  10. 分析facebook的AsyncDisplayKit框架中的Transaction的工作原理

    在AsyncDisplayKit框架中有一个_ASAsyncTransaction模块,用于AsyncDiplayNode的异步事务,使用了dispatch_group实现. 主要目的是将operat ...