一、新建页面  

  <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. ExtJs 获取Dom对象

    对象指页面上的某一部分,如:Input等.我觉得在EXT JS中会有三类基本对象,htmlelement , EXT.Element和CompositeElement .分别解释一下: htmlele ...

  2. Linux 内核通知链随笔【中】

    关于内核通知链不像Netlink那样,既可以用于内核与用户空间的通信,还能用于内核不同子系统之间的通信,通知链只能用于内核不同子系统之间的通信.那么内核通知链到底是怎么工作的?我们如何才能用好通知链? ...

  3. C#数据结构选择

    选择一个合适的数据结构会对程序的性能有着显著的提高 线性表和链表: 1.LinkedList<T>:适合于元素数组不固定,存在大量列表的头尾添加动作场合.其它可使用List<T> ...

  4. PHP测试用例文档

    PHP接口测试用例和文档 PHP在过程中的测试 采用写一个简单html表单做一个简单的post测试 PHP接口测试文档 Alpha部分主要的接口文档可查看 接口文档 功能模块 接口 登录注册模块 验证 ...

  5. win7 64的系统安装。net4.0总是提示安装未成功

    主要原因是Windows update的临时文件损坏,建议重命名该文件夹. 1. 开始——运行——cmd——键入net stop WuAuServ回车(停止windows update服务): 2. ...

  6. JAVA求解线性方程组-列主元高斯消去法

    package MyMath; import java.util.Scanner; public class Gauss { /** * @列主元高斯消去法 */ static double x[]; ...

  7. python day1 变量的命名和赋值

    变量 一.变量的命名 1.不能以数字进行开头 2.不能包含特殊字符 3.不能是python内部的某些关键字 a = 123print(a)123 --------------------------- ...

  8. easyui tree onloadsuccess事件的心得

    在onloadSuccess事件中不能apeed新节点,否则又会触发noloadsuccess事件,形成死循环. 公司电话:028-87657875           13060063607 淘宝店 ...

  9. 如何在SCENEKIT使用SWIFT RUNTIME动态加载COLLADA文件

    问题:今天接到一个项目,负责弄需求的美眉跟我讲能不能做一个原型能够加载Collada文件,流程如下: 用户用app下载Collada 压缩包(如内购项目) 压缩包解压 展示Collada文件里的内容 ...

  10. webform 之LINQde 简单操作

    LinQ: LinQ to Sql类它是一个集成化的数据访问类,微软将原本需要我们自己动手去编写的一些代码,集成到了这个类中,会自动生成. 数据库数据访问,能大大减少代码量. 那就是代码量减少 EF框 ...