jQuery中兄弟元素、子元素和父元素的获取

  我们这里主要总结jQuery中对某元素的兄弟元素、子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行获取和操作。

jQuery提供的方法

  上来就把jQuery提供的方法摆在这里是不是有点不好呀,不过,我们从jQuery的方法名称上就能知道这些方法是干嘛的了。

parent(selector) 查找父元素,可传入selector进行过滤(下同)
parents(selector) 查找所有的祖先节点
children(selector) 返回所有的子节点,不过该方法只会返回直接的子节点,不会返回所有的子孙节点
prev() 返回该节点的上一个兄弟节点
prevAll() 返回该节点之前所有的节点
next() 返回该节点的下一个兄弟节点
nextAll() 返回该节点之后所有的节点
siblings() 返回该节点所有的兄弟节点,不分前后
find(selector) 返回该节点所有的子孙节点

  看完所有的方法之后,我们可以发现:children()只能获取直接的子节点;而find能获取所有的子孙节点,当然也包括直接的子节点。

  让我们通过一个直观的例子来看看这些方法是怎么使用的,【狠狠点击这里»

  从实例中我们能够很清楚的看到这些方法都是获取的哪些元素,比如parent()是获取当前元素的直接父亲元素,而parents()是获取所有的父亲元素(也包括其直接父元素)。前面的那些方法使用起来都比较简单,不过这里还是要多说一句:所有的方法都能接收一个selector参数来对获取到的结果集进行过滤,来真正的获取我们想要的元素。find()方法的使用是我们这里重点要讲的。

find(selector)方法的讲解

官方文档的解释:通过一个选择器、jQuery对象或元素过滤,得到当前匹配的元素集合中每个元素的后代。

我们通过这样的代码来更加清晰地了解这句话的意思:

$("#main").find(‘.list‘)    // 选择器过滤

var $span = $(‘span‘);
$(‘#main‘).find($span);     // jQuery对象过滤

var span = $(‘span‘)[0];
$(‘#main‘).find(span)       // DOM元素过滤

从上面的代码中我们可以看到三种方式都能从$main的所有子孙元素中获取相应的元素。而且find()方法获取子孙元素时采用的时深度搜索优先的策略进行检索的。还是拿我们上面的实例来举例,$(‘.current’)就是当前的元素,然后用find()获取该元素所有的子孙元素:

  从上面的图中我们可以看到,find()先找到第一个.item元素,然后开始检索.item里的子元素.s;.item里的子元素检索完成以后,开始寻找第二个.item元素,然后接着检索第二个.item里的子元素;第二个.item检索完成后,开始进行第三个。深度优先的策略就是:先闷头一直往下找,下一个没有元素时再确认是否有next()兄弟元素,如果没有兄弟元素,那么再往上返回一级,确认这个元素有没有兄弟元素,直到第一级的子元素;如果当前元素有兄弟元素,那么就从这个兄弟元素开始往下执行深度搜索。待所有的子元素检索完毕后,find()方法结束。

  这篇文章比较短,不过也算是探索了一下这些方法的使用,能够从例子中直观的看到这些方法获取到的是哪些元素。

时间: 2024-08-02 02:50:05

jQuery中兄弟元素、子元素和父元素的获取的相关文章

Jquery中的offset()和position()深入剖析(元素定位)

先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父元素的偏移. 返回的对象包含两个整形属性:top 和 left.为精确计算结果,请在补白.边框和填充属性上使用像素单位.此方法只对可见元素有效. 真的就这么简单吗?实践出真知. 先来看看在jquery框架源码里面,是怎么获得position()的: 1 // Get *real* offsetPar

点击子元素事件不触发父元素事件

<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script> <style type="text/css">

子元素设置margin-top,父元素也受影响

外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好.例子可以查看下面代码(IE下表现"正常",标准浏览器下查看出现"bug"): <!doctype html> <html> <head> <title>子元素设置margin-top,父元素也受影响</title>

解决:子元素设置margin-top,父元素也受影响的问题

<!doctype html><html> <head> <title>子元素设置margin-top,父元素也受影响</title></head><style type="text/css"> * { margin: 0px; padding: 0px; } .father { width: 500px; height: 800px; background: #ccc; cursor: pointer

当子元素需要相对父元素定位时,父元素无法被子元素撑大该怎么办

今天遇到了子元素相对父元素定位之后,父元素无法被撑开的问题,那是因为绝对定位之后,子元素已经脱离文档流了所以无法用自身的高度把父元素撑开,这个时候只能用js来解决这个问题了: function psize(){ $("父元素").css('height',$("子元素").innerHeight()); } 上面是封装了一个函数,可以通过调用使用. height与innerHeight 的具体情况请看上一篇随笔.

html事件-子元素事件不触发父元素事件

<div class="list-row" onclick="showChatDialog('dy','100000001',true);"> <img class="icon" src="/icon/default.ico" onclick="personData(event,100000001);"> <a class="nickname">dy&

[ jquery 选择器 :nth-of-type() ] 选取指定类型(p)父元素下的第几个子元素

选取指定类型(p)父元素下的第几个子元素: 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,keyword2,ke

子元素浮动后、父元素的高度自适应

一.普通情况下,即没有任何浮动样式等的情况下 设置父元素的高度为aotu 或100% 或者不设置,那么父元素会根据子元素的高度而自动调整自身高度. 栗子 <!--html代码--> <div id="wrap"> <img src="./1.png" alt="logo"/> <div id="content"></div> </div> CSS样式 #w

子元素使用margin-top影响父元素的解决方法

当我们给子元素使用margin-top的时候,我们会发现父元素会跟到子元素一起移动,那我们怎么样才能解决这个问题呢?很简单,我们只需在父元素中添加一个overflow: hidden;此问题即可解决.具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>