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. 推荐一款Diffy：Twitter的开源自动化测试工具

    1. Diffy是什么 Diffy是一个开源的自动化测试工具,是一种Diff测试技术.它能够自动检测基于Apache Thrift或者基于HTTP的服务.通过同时运行新/老代码,对比运行结果,发现潜在 ...

  2. linux cmake安装方法

    linux cmake安装方法 OpenCV 2.2以后的版本需要使用Cmake生成makefile文件,因此需要先安装cmake:还有其它一些软件都需要先安装cmake 1.在linux环境下打开网 ...

  3. 【集合系列】- 初探java集合框架图

    一.集合类简介 Java集合就像一种容器,可以把多个对象(实际上是对象的引用,但习惯上都称对象)"丢进"该容器中.从Java 5 增加了泛型以后,Java集合可以记住容器中对象的数 ...

  4. idea 常用功能

      Ctrl + E:打开最近文件   双击 Shift:按文件名查找文件   Ctrl + Shift + F:全局搜索   Alt + ~(数字 1 左边的键):commit.push 代码   ...

  5. suseoj 1211: 子集和问题 (dfs)

    1211: 子集和问题 时间限制: 1 Sec  内存限制: 128 MB提交: 2  解决: 2[提交][状态][讨论版][命题人:liyuansong] 题目描述 子集和问题的一个实例为<S ...

  6. Docker+Dubbo+Zookeeper实现RPC远程调用

    Docker+Dubbo+Zookeeper 1.安装Docker 1.1卸载旧版本的Docker //如果Docker处于与运行状态 未运行可跳过 [root@MrADiao ~]# systemc ...

  7. 注意android辅助服务事件不能用于保存

    本来希望把来自辅助服务的事件,像epoll那样暂存在队列进行调度,或者做成事件堆栈,从而将辅助服务事件加入到容器.但是一直不能达到预期的后果.最后才发现一个坑人的事实,辅助服务事件被释放(或者说重置) ...

  8. 【MongoDB】用Docker安装一个MongoDB最新版玩玩

    1 安装 本文假设大家已经安装好了docker并能正常使用,所以不讲解如何安装docker了.用docker安装MongoDB最新版本如下: # 从repository查找mongo的相关镜像,结果很 ...

  9. 结合源码，重温 Android View 的事件处理知多少 ?

    前言 Android View 的 事件处理在我们的编程中,可谓是无处不在了.但对于大多数人而言,一直都是简单的使用,对其原理缺乏深入地认识. 学 Android 有一段时间了,最近发现,很多基础知识 ...

  10. Js获取宽高度的归纳总结

    首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种. window.innerWidth //除去菜单栏的窗口宽度 window.innerHeight//除去菜单栏的窗口高度 win ...