jquery选择器如何获取父级元素、同级元素、子元素
一、新建页面
<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()
获得当前匹配元素集合中每个元素的祖先元素,应用选择器进行筛选是可选的。
- $('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选择器如何获取父级元素、同级元素、子元素的更多相关文章
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- jquery选择器 之 获取父级元素,子元素,同级元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...
- jquery选择器 之 获取父级元素、同级元素、子元素(转)
一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir& ...
- jquery选择器之获取父级元素、同级元素、子元素
一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 二.获取同级元素: 1.next([expr]): 获取指定元素的下一个同级元素 2.nextAll([expr]) ...
- jquery选择器:获取父级元素、同级元素、子元素
jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获 ...
- JQuery 获取父级元素、同级元素、子元素等
例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...
- jQuery父级以及同级元素查找介绍
父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下: jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$ ...
- jQuery父级以及同级元素查找的实例
父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$( ...
随机推荐
- Java程序调用javascript等脚本的实现方法
public static void main(String[] args) throws FileNotFoundException, ScriptException, NoSuchMethodEx ...
- [13]APUE:KQUEUE / FreeBSD
[a] 概述 kqueue API 由两个函数(kqueue.kevent).一个辅助宏(EV_SET).一个结构体(struct kevent)构成,可以应用于 socket.FIFO.pipe.a ...
- Java多线程基本概念
基本概念 线程与任务的概念不一样. 任务:通常是一些抽象的且离散的工作单元,比如在Web请求中,针对用户的请求需要返回相应的页面是一个任务,在Java中实现Runnable接口的类也是一个任务. 线程 ...
- 如何去掉div滚动条
1.去掉横向滚动条 style="overflow-x:hidden" 2.去掉纵向滚动条 style="overflow-y:hidden" 3.同时去掉横向 ...
- HTTP协议-----小白
HTTP是一个属于应用层的面向对象的协议. ***OSI的7层从上到下分别是 7 应用层 6 表示层 5 会话层 4 传输层 3 网络层 2 数据链路层 1 物理层 HTTP协议的主要特点可概括如下: ...
- seaJS 简单例子,理解seaJS
学习心得: 记得第一次学underscore的时候,去的官网(不管什么都是官网好),呼啦一长列语法,我就一个个看,看完也不知道underscore是做什么的.就是现在underscore我也用不上,学 ...
- Socket通信基本原理
Http通信: http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客户端向服务器发送请求后,服务器端才能向客户端返回数据. Socket通信: Socket通信则是在双方建立起连接后就 ...
- php常用的几个模块
上传下载.操作excel.编码.内存管理.浮点运算.系统时间.seo.web安全.网络 0.环境搭建 1.上传下载 借助jquery的uploaderfily插件.表单内嵌iframe提交 2.exc ...
- H5中的拖拽事件
最近浏览了张鑫旭大神的基于HTML5 drag/drop模块拖动插入排序删除完整实例,感觉受益匪浅.于是将最做的demo记录下来. 首先浏览一下事件,这些事件比较好记,只要记住用在谁的身上就好了,无非 ...
- ExtJS入门实例
一.去官网下载EXTJS包extjs5,这里采用的是5.0版本! 二.解压extjs包,找到 ext-all.js基础包(\ext-5.0.0\build): ext-all-debug.js基础包, ...