JQuery之选择集转移方法如下图：

所谓选择集，就是通过$()方法获取到的所有标签的集合。

代码实现：

 <script src="JS/jquery-1.12.4.min.js"></script>

     <script>

         $(function(){

             var $div1 = $('#div1');

             $div1.prev().css({

                 // 获取当前元素的上一个同级别的元素

                 'color':'red'

             });

             $div1.prevAll().css({

                 // 获取当前元素上面的所有同级别元素

                 'font-size' : '20px'

             });

             $div1.next().css({

                 // 获取当前元素的下一个同级别元素

                 'color':'blue'

             });

             $div1.nextAll().css({

                 // 获取当前元素下面的所有同级别元素

                 'font-size':'20px'

             });

         });

         $(function(){

             var $div3 = $('#div3');

             $div3.parent().css({

                 // 获取当前元素的父元素

                 'background':'red'

             });

             $div3.parent().parent().css({

                 // 获取当前元素的爷爷元素

                 'background':'blue'

             });

             $div3.children().css({

                 // 获取当前元素的所有孩子元素

                 'background':'yellow'

             });

             $div3.siblings().css({

                 // 获取当前元素的所有兄弟元素

                 'background':'pink'

             });

             // $div3.find('.spn1').css({

             //     // 在当前元素内查找class名为spn1的元素

             //     'font-size':30

             // });

             $div3.find('#spn1').css({

                 // 在当前元素内查找class名为spn1的元素

                 'font-size':99

             });

         });

    </script>

 <body>

     <h1>h1</h1>

     <h2>h2</h2>

     <h3>h3</h3>

     <div id="div1"></div>

     <h4>h4</h4>

     <h5>h5</h5>

     <h6>h6</h6>

     <div>祖

             <div >父

                     <div>子兄弟1</div>

                     <div id="div3" style="background: brown;">子

                         <div>孙</div>

                         <div>

                                 <div>

                                     <span id="spn1" class="spn1">gfgjkkhdsfhgvjskadugjvkoiuvjhfdsyiufhdsjou</span>

                                 </div>

                         </div>

                     </div>

                     <div>子兄弟2</div>

                     <div>子兄弟3</div>

             </div>

     </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 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  5. jQuery过滤选择器

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

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

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

  7. jQuery之选择器

    jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...

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

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

  9. jQuery的选择器中的通配符[id^='code'] 【转】

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

随机推荐

  1. Mokia(三维偏序)P4390

    提到cdq,就不得不提这道该死的,挨千刀的题目了. 极简题面: 给定一个二维平面,在ti时刻会在(xi,yi)放一个点,会在tj时刻查询一个方框里面的点的数量 看道题就是二维线段树乱搞啊,这么水??? ...

  2. 基于docker搭建Jenkins+Gitlab+Harbor+Rancher架构实现CI/CD操作(续)---Harbor的安装

    前期安装文档:https://www.cnblogs.com/lq-93/p/11828626.html Harbor的作用:     开发提交代码至gitlab容器中,Jenkins拉取代码构建镜像 ...

  3. 玩转VSCode-完整构建VSCode开发调试环境

    随着VSCode的不断完善和强大,是时候将部分开发迁移到VS Code中了. 目前使用VS2019开发.NET Core应用,一直有一个想法,在VS Code中复刻VS的开发环境,同时迁移到VS Co ...

  4. 深入理解计算机系统 第三章 程序的机器级表示 part2

    这周由于时间和精力有限,只读一小节:3.4.4  压入和弹出栈数据 栈是一种特殊的数据结构,遵循“后进先出”的原则,可以用数组实现,总是从数组的一端插入和删除元素,这一端被称为栈顶. 栈有两个常用指令 ...

  5. Groovy单元测试框架spock基础功能Demo

    spock是一款全能型的单元测试框架. 最近在做单元测试框架的调研和尝试,目前确定的方案框架包括是:spock,Junit,Mockito以及powermock.由于本身使用Groovy的原因,比较钟 ...

  6. Kubernetes概述

    1. Kubernetes是什么 Kubernetes是一个可移植的.可扩展的.用于管理容器化工作负载和服务的开源平台,它简化(促进)了声明式配置和自动化.它有一个庞大的.快速增长的生态系统.Kube ...

  7. PHP实现微信企业付款到个人零钱步骤

    微信支付企业付款到零钱功能应用广泛,比如微信红包奖励,业务结算等.通过企业向个人付款,付款资金将直接进入用户微信零钱. 一 开通条件 ​ 付款资金 企业付款到零钱资金使用商户号余额资金. 根据商户号的 ...

  8. IDEA+JSP+Servlet+Tomcat简单的登录示例

    1.用IDEA新建Java WEB项目并配置Tomcat 这一部分可以参考之前的一篇随笔 https://www.cnblogs.com/lbhym/p/11496610.html 2.导入Servl ...

  9. hdu 2255 奔小康赚大钱 (KM)

    奔小康赚大钱Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  10. ArcGIS API For Javascript ：双屏（多屏）地图联动的方法

    在遇到地图对比的应用场景下,我们需要双屏地图或者多屏地图来满足我们的业务需求. 解决思路:首先生成两份(多份)地图,然后通过监听地图缩放拖拽,用地图四至将不同的地图对象做绑定,实现多地图联动. 前端部 ...