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. npm start 的应用 改为forever 后台启动的方法记录

    记录日志的启动方式 forever start -l forever.log -o out.log -e err.log app.js 记录日志的启动方式 forever start -a app.j ...

  2. 通过ISO镜像简单搭建本地yum仓库

    本文参考链接:https://segmentfault.com/a/1190000015155966 *有时候在我们本地搭建一些Linux上的程序运行环境或者安装一些软件的时候,难免会遇到需要使用yu ...

  3. Python的看门狗实现自动化实时对服务器、Windows或Linux文件夹的实时监控

    众所周知,在运维过程中,实时获取目标文件夹至关重要,Python的watchdog是用程序来监视文件系统事件Python库,所以用该库可以实现对文件夹的实时监控,filenotify.py代码如下: ...

  4. 在VMware CentOS7挂载系统光盘搭建本地仓库

    1.软件准备: 安装VMware环境,在这里我使用的是VMware15 一个虚拟机系统,在这里我使用的是CentOS7(版本不同可能会有一点出入,但是应该相差不大) 在这里还有一个前提是已经建立好了y ...

  5. 201871010114-李岩松《面向对象程序设计（java）》第六、七周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  6. table的列固定

    <body onload="showFix(true,false,initTableId);"> <!doctype html> <html lang ...

  7. PHP RSA签名(公钥、私钥)

    签名算法:    Setp.1 确定待签名参数        在请求参数列表中,除去sign参数外,其他需要使用到的参数皆是要签名的参数. 在通知返回参数列表中,除去sign参数外,凡是通知返回回来的 ...

  8. 浅析ORACLE中NVL/NVL2/DECODE/CASE WHEN的用法

    使用NVL的时候只能对值进行是否为空的判断,基本语法是NVL( 值1, ,结果2).它的功能是如果值1为空,则此函数返回结果2,不为空的话直接输出值1(如果两个参数都为空,那么还是返回空): NVL2 ...

  9. spark集群搭建（三台虚拟机）——kafka集群搭建（4）

    !!!该系列使用三台虚拟机搭建一个完整的spark集群,集群环境如下: virtualBox5.2.Ubuntu14.04.securecrt7.3.6_x64英文版(连接虚拟机) jdk1.7.0. ...

  10. mysql 索引笔记

    MyISAM引擎的B+Tree的索引 通过上图可以直接的看出, 在MyISAM对B+树的运用中明显的特点如下: 所有的非叶子节点中存储的全部是索引信息 在叶子节点中存储的 value值其实是 数据库中 ...