一、新建页面　　

  <ul>

         <li>list item 1</li>

         <li>list item 2</li>

         <li class="third-item">list item 3</li>

         <li>list item 4</li>

         <li>list item 5</li>

     </ul>

     <p>Hello1</p>

     <p>Hello2</p>

     <div>

         <span>Word</span>

     </div>

     <ul class="level-1">

         <li class="item-i">I</li>

         <li class="item-ii">

             II

             <ul class="level-2">

                 <li class="item-a">A</li>

                 <li class="item-b">

                     B

                     <ul class="level-3">

                         <li class="item-1">1</li>

                         <li class="item-2">2</li>

                         <li class="item-3">3</li>

                     </ul>

                 </li>

                 <li class="item-c">C</li>

             </ul>

         </li>

         <li class="item-iii">III</li>

     </ul>

二、获取父级元素

　　1、 parent([expr]): 

　　　　获取指定元素的所有父级元素

　　　　代码如下:
　　　　

$("li.third-item").parent().css('background-color', 'aqua');

　　效果如下：

　　2、parents()

　　　　获得当前匹配元素集合中每个元素的祖先元素，应用选择器进行筛选是可选的。

    1. $('li.item-a').parents().css('background-color', 'red');

　　　　　　调用的结果是，level-2 列表、项目 II 以及 level-1 列表等元素（沿 DOM 树一路向上直到 <html>）设置红色背景。

　　3、.closest(selector)
　　　　closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

三、获取同级元素　　

　　1、.next(selector)
　　　　获得匹配元素紧邻的下一个同级元素。

　　2、.nextAll(selector)
 　　　　获得匹配元素后面的所有同级元素。

　　3、.prev(selector)
　　　　获得匹配元素紧邻的前一个同级元素（与next相反）

　　4、.prevAll(selector)
 　　　　获得当前匹配元素前面的所有同级元素（与nextAll相反）

　　5、andSelf(): 
　　　　获取指定元素后边的所有同级元素，之后加上指定的元素。

四、获取子元素

　　1、.children(selector)
　　　　返回匹配元素的子元素。

　　2、.find(selector)
　　　　获得当前元素的后代

　　3，查找子元素：> 

　　　　例如 ul下所有的li元素 var nods = $("ul > li");

用法如下：

<script type="text/javascript">

        $(document).ready(function () {

            //获取指定元素的所有父级元素

            //$("li.third-item").parent().css('background-color', 'aqua');

            //获取指定元素的上一个同级元素

            //$("li.third-item").prev().css('background-color', 'red');// list item 2变红色

            //获取指定元素的前边所有的同级元素

            //$("li.third-item").prevAll().css('background-color', 'red');// list item 3以前的都变为红色

            //获取指定元素的下一个同级元素

            // $("li.third-item").next().css('background-color', 'red');// list item 4变红色

            //获取指定元素后边的所有同级元素

            //$("li.third-item").nextAll().css('background-color', 'red');//list item 4以后的都变为红色

            //获取指定元素后边的所有子元素

            //$('ul.level-2').children().css('border', '1px solid green');//level-2下class为item-a，item-b和item-c都加上颜色为green的边框，不包括item-b下class为level-3的元素

            //获取指定元素后边的所有指定的子元素

            $('ul.level-2').find('li').css('border', '1px solid green');//level-2下的li都加上颜色为green的边框

            //获取指定元素后边的所有同级元素，之后加上指定的元素

            var p_nex = $("p").nextAll().andSelf();

            p_nex.addClass('p-css');//选择p标签后面的所有同级标签，以及自己class都加上p-css

            //子元素

            var nods = $("ul.level-1 > li");

            alert(nods.length);//3个

        });

    </script>

　　

jquery选择器如何获取父级元素、同级元素、子元素的更多相关文章

  1. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  2. jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  3. jquery选择器 之 获取父级元素，子元素，同级元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...

  4. jquery选择器 之 获取父级元素、同级元素、子元素（转）

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir& ...

  5. jquery选择器之获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 二.获取同级元素: 1.next([expr]): 获取指定元素的下一个同级元素 2.nextAll([expr]) ...

  6. jquery选择器:获取父级元素、同级元素、子元素

    jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获 ...

  7. JQuery 获取父级元素、同级元素、子元素等

    例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...

  8. jQuery父级以及同级元素查找介绍

    父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下: jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$ ...

  9. jQuery父级以及同级元素查找的实例

    父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$( ...

随机推荐

  1. 利用OpenShift托管Node.js Web服务进行微信公众号开发

    最近写了一个微信的翻译机器人.用户只要关注该公众号,发送英文的消息,就能收到中文翻译的回复.有兴趣的读者可以扫描下面的二维码关注该公众号,尝试发送英文单词试试看.(有时候第一次发送单词会收到“该公众号 ...

  2. Nginx密码验证 ngx_http_auth_basic_module模块

    有时候我们需要限制某些目录只允许指定的用户才可以访问,我们可以给指定的目录添加一个用户限制. nginx给我们提供了ngx_http_auth_basic_module模块来实现这个功能. 模块ngx ...

  3. POJ 3057 Evacuation 二分图匹配

    每个门每个时间只能出一个人,那就把每个门拆成多个,对应每个时间. 不断增加时间,然后增广,直到最大匹配. //#pragma comment(linker, "/STACK:10240000 ...

  4. ListView显示不同行以及数据重用

    Handling ListViews with Multiple Row Types When you start writing Android Apps it isn’t long before ...

  5. 查看应用程序使用的所有dll

    VS2008命令提示符下: >dumpbin.exe   /dependents  <文件路径+文件名> □

  6. fname

    from lxml import etreeimport requestsdef getHtml(html): novelcontent = requests.get(html).content re ...

  7. 20.cocoapods的安装和使用

    一.CocoaPods是什么? CocoaPods是一个负责管理iOS项目中第三方开源库的工具.CocoaPods的项目源码在Github上管理.该项目开始于2011年8月12日,在这两年多的时间里, ...

  8. 数据导出Excel中文乱码

    数据导出到EXCEL提供用户下载,当记录数大于5行时不会出现乱码.但只要不退出Excel,再删除除记录,当记录数小于5行时,导出也不会出现乱码.当然一旦退出Excel再导出就会出现乱码了. 可以试试 ...

  9. 易学PHP——WAMP环境搭建

    安装前的准备 查看本机的类型(x86/x64,即 32 位还是 64 位) 安装好 VC9/VC11/VC14 运行库(需要按照本机的类型选择安装) 创建好一个安装路径用于安装整套 amp 环境(我使 ...

  10. Ubuntu 16.04 启动错误 "a start job is running for hold until boot process finishes up"

    老司机也差点翻船... 升级16.04的时候,将默认启动管理器(default display manager)选为gm3(gnome3)了(应该使用默认的lightgm)如果改成gm3,好像是nvi ...