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. 2019.NET Conf China（中国.NET开发者峰会）活动全纪录：.NET技术之崛起，已势不可挡

    一.微软走向开放与.NET Core的诞生 当今时代,气象更新,技术飞速发展. 当今时代,开发者大概是最优秀的群体.每一位开发者,无不奋勇向前,努力追寻时代的步伐,以大无畏的精神迎接挑战,紧跟大时代成 ...

  2. ftp工具无法连接到Linux服务器

    ftp工具无法连接Linux服务器,文件无法上传,是因为你的ftp服务器未搭建(或未启动) 许久没有登录腾讯云,今天想用xshell的xftp工具上传文件,却突然出现连接不上. 用22端口,可以正常登 ...

  3. 详解Kafka Producer

    上一篇文章我们主要介绍了什么是 Kafka,Kafka 的基本概念是什么,Kafka 单机和集群版的搭建,以及对基本的配置文件进行了大致的介绍,还对 Kafka 的几个主要角色进行了描述,我们知道,不 ...

  4. UML简明使用

    1.继承 空心三角+实线 2.实现接口 空心三角+虚线 3.关联 箭头+实线 4.聚合 空心菱形+实线+箭头 5.组合 实心菱形+实线+箭头 6.依赖 虚线+箭头 7.关联.聚合.组合.依赖的区别 关 ...

  5. Spring Security登录验证流程源码解析

    一.登录认证基于过滤器链 Spring Security的登录验证流程核心就是过滤器链.当一个请求到达时按照过滤器链的顺序依次进行处理,通过所有过滤器链的验证,就可以访问API接口了. SpringS ...

  6. Java升级那么快，多个版本如何灵活切换和管理？

    前言 近两年,Java 版本升级频繁,感觉刚刚掌握 Java8,写本文时,已听到 java14 的消息,无论是尝鲜新特性(Java12 中 Collectors.teeing 超强功能使用),还是由于 ...

  7. C# VI: 删除字符串中指定字符的几种方法

    本文基于Stackoverflows上以下几个Question: Fastest way to remove chars from string (http://stackoverflow.com/q ...

  8. [LC]26题 Remove Duplicates from Sorted Array （删除排序数组中的重复项）（双指针法）（原地实现）

    ①中文题目 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...

  9. Java自动生成数据

    最近在造数据库中的表数据,写了些数据生成类 可以随机生成姓名.性别,民族,出生日期,身份证号,手机号,邮箱,身高,文化程度,地址,单位,日期时间,编码等 package com.util.create ...

  10. 二.整体预览tomcat

    一.概述 如果将tomcat内核高度抽象,则它可以看成由连接器(Connector)组件和容器(Container)组件组成,其中Connector组件负责在服务器端处理客户端链接,包括接受客户端链接 ...