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. Elasticsearch 技术分析（八）：剖析 Elasticsearch 的索引原理

    前言 创建索引的时候,我们通过Mapping 映射定义好索引的基本结构信息,接下来我们肯定需要往 ES 里面新增业务文档数据了,例如用户,日志等业务数据.新增的业务数据,我们根据 Mapping 来生 ...

  2. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  3. 通俗易懂了解Vue中nextTick的内部实现原理

    1. 前言 nextTick 是 Vue 中的一个核心功能,在 Vue 内部实现中也经常用到 nextTick.在介绍 nextTick 实现原理之前,我们有必要先了解一下这个东西到底是什么,为什么要 ...

  4. MySQL传统点位复制在线转为GTID模式复制

    1.  GTID优缺点 MySQL传统点位复制在5.7版本前是主要的主从复制模式,而随着MySQL5.6版本引入GTID,并且MySQL5.7进行各方面的优化以后,在mySQL5.7(尤其是MySQL ...

  5. 通过cmd命令查看Python库、函数和模块的帮助文档与介绍

    dir函数式可以查看对象的属性 使用方法很简单,举os类型为例,在Python命令窗口输入 dir(‘os’) 即可查看os模块的属性 打开cmd命令窗口 输入python(注意:计算机需要有Pyth ...

  6. Redis必备面试题《基础篇》

    Date:2019-11-12 读前思考: 面试官会问什么样的问题? 所问的问题背后真实的套路是什么? 喜欢问Redis哪些问题? 如何顺畅回答面试问的问题?吊打面试官. 1.什么是Redis? Re ...

  7. 在VMware环境下安装Windows2008

    1.软硬件安装 软件:推荐使用VMware,这里我使用的是VMware15 镜像:Windows 2008 如果没有镜像可以到这里 链接:https://pan.baidu.com/s/1r_7K-U ...

  8. Convolutional Sequence to Sequence Learning 论文笔记

    目录 简介 模型结构 Position Embeddings GLU or GRU Convolutional Block Structure Multi-step Attention Normali ...

  9. html部分知识点(待完善)

    html部分知识点 跳转 在A页面某链接处`<a href="#aa" target="_blank"></a> 在B页面指定的标题处定 ...

  10. js常用的array方法

      1. splice() splice()方法向/从数组中添加/删除项目,然后返回被删除的项目.(注释:该方法会改变原始数组.) arrayObject.splice(index,howmany,i ...