博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery DOM节点操作 - 父节点、子节点、兄弟节点
阅读量:5089 次
发布时间:2019-06-13

本文共 3244 字,大约阅读时间需要 10 分钟。

 -------------------------------------------------------------------

源文地址:  ,转载请务必保留此出处.

 

 

(/)节点:

  .children([selector]).    获得匹配元素集合中每个元素的所有直接子元素(选择器可选)

实例:

              <div>

                     <a href="#"><span>welcome to </span>zhenheinfo</a>

                     <p id="p1">欢迎来到臻和信息</p>

                     <p id="p2">欢迎来到臻和信息</p>

              </div>

 

       操作:  $("div").children();

       结果:    得到<a></a>和<p></p>总共3个节点.

 

  操作:  $("div").children("#p1");

       结果:    得到<p id="p1"></p>节点.

 

  .find(selector).     获得当前匹配元素集合中每个元素的后代(选择器必须)。

  实例:

                   <div>

                       <a href="#"><span>welcome to </span>zhenheinfo</a>

                       <p id="p1">欢迎来到<span>臻和信息</span></p>

                       <p id="p2">欢迎来到臻和信息</p>

                </div>

 

  操作:  $("div"). find ("span");

       结果:    得到2个<span></span>节点.

 

 

兄弟节点:

 .siblings([selector]).    获得匹配元素集合中所有元素的同辈元素(选择器可选)。

实例:

<div>

                   <div>

                     <a href="#"><span>welcome to </span>zhenheinfo</a>

                     <p>欢迎来到<span>臻和信息</span></p>

                     <span id="sp1">臻和信息</span>

              </div>

              <div>

                     <a href="#"><span>welcome to </span>zhenheinfo</a>

                     <p>欢迎来到<span>臻和信息</span></p>

              </div>

       </div>

 

       操作:  $("a").siblings();               

       结果:    得到<p></p>,<span id="sp1"></span>共3个节点.

 

       操作:  $("a").siblings("p");

       结果:    得到2个<p></p>节点.

 

  .prev([selector]).    获得匹配元素集合中每个元素紧邻的前一个同辈元素(选择器可选)。

  .next([selector]).    获得匹配元素集合中每个元素紧邻的后一个同辈元素(选择器可选)。

  实例:

    <div>

                     <span id="sp1">zhenheinfo</span>

                     <a href="#"><span>welcome to </span>zhenheinfo</a>

                     <p id="p1">欢迎来到<span>臻和信息</span></p>

                     <p id="p2">欢迎来到臻和信息</p>

      <span id="sp2">臻和信息</span>

    </div>

 

       操作:  $("#p1").prev();                 结果:    得到<a></a>节点.

       操作:  $("#p1").next();                 结果:    得到<p id="p2"></p>节点.

 

  操作:  $("#p1"). prev ("span");    结果:    得到<span id="sp1"></span>节点.

  操作:  $("#p1"). next ("span");     结果:    得到<span id="sp2"></span>节点.

 

.prevAll([selector]).    获得匹配元素集合中每个元素之前的所有同辈元素(选择器可选)。
.nextAll([selector]).    获得匹配元素集合中每个元素的所有同辈元素(选择器可选)。

  实例:

      <div>

                            <div>

                            <lable id="lab-1">中国梦</lable>

                            <a href="#"><span>welcome to </span><b>zhenheinfo</b></a>

                            <p>欢迎来到<span>臻和信息</span></p>

                            <span id="sp1">臻和信息</span>

                            <lable id="lab-2">中国梦</lable>

       </div>

                     <div>

                            <a href="#"><span>welcome to </span>zhenheinfo</a>

                            <p>欢迎来到<span>臻和信息</span></p>

                            <lable id="lab-3">中国梦</lable>

                     </div>

              </div>

 

       操作:  $("p").prevAll();

       结果:    得到<a></a>,<lable id="lab-1"></label>共3个节点.

 

  操作:  $("p"). nextAll ();

       结果:    得到<span id="sp1"></span>和<lable id="lab-2"></lable>和<lable id="lab-3"></lable>共3个节点.

 

  操作:  $("p"). prevAll ("a");

       结果:    得到2个<a></a>节点.

 

       操作:  $("p").nextAll("lable");

       结果:    得到<lable id="lab-2"></ lable>和<lable id="lab-3"></ lable>节点.

 

 

(/祖先)节点:           

  .parent([selector]).    获得当前匹配元素集合中每个元素的父元素(选择器可选)。

  .parents([selector]).    获得当前匹配元素集合中每个元素的祖先元素(选择器可选)。

       实例:

          <div>

      <div id="d1">

        <lable id="lab-1">中国梦</lable>

        <a href="#"><span>welcome to </span><b>zhenheinfo</b></a>

        <p>欢迎来到<span>臻和信息</span></p>

        <span id="sp1">臻和信息</span>

        <lable id="lab-2">中国梦</lable>

      </div>

      <div>

        <a href="#"><span>welcome to </span>zhenheinfo</a>

        <p>欢迎来到<span>臻和信息</span></p>

        <lable id="lab-3">中国梦</lable>

      </div>

    </div>

 

  操作:  $("span").parent();

  结果:    得到<div id="d1"></div>和<a></a>和<p></p>共5个节点.

 

  操作:  $(" span "). parent("div");

  结果:    得到<div id="d1"></div>节点.

 

  操作:  $("p"). parents();

  结果:    得到<div></div>和<a></a>和<p></p>共7个节点.

 

  操作:  $("p"). parents("div");

  结果:    得到3个<div></div>节点.

 

  ps:关于DOM节点操作,还有哪些具有代表性的相关的操作呢?欢迎留言补充哦..

 

转载于:https://www.cnblogs.com/yunlei0821/p/7577400.html

你可能感兴趣的文章
Matlab中给figure添加图例(legend),标题(title)和颜色(color)...
查看>>
window.location详解
查看>>
UVALive-3989 Ladies' Choice (稳定婚姻问题)
查看>>
CC2430基础——串口代码分析
查看>>
WIN7 不用格式化磁盘怎么把FAT32系统改成NTFS系统
查看>>
macOS seria 10.12升级到macOS Mojave的报错:xcrun: error: invalid active developer path, missing xcrun...
查看>>
在Eclipse中导入dtd和xsd文件,使XML自动提示(转)
查看>>
【网络流24题】魔术球问题 二分答案+最小路径覆盖
查看>>
P2216 理想的正方形
查看>>
Java中的值传递与引用传递
查看>>
安装scrapy
查看>>
从头编写 asp.net core 2.0 web api 基础框架 (5) EF CRUD
查看>>
寻找旋转数组的最小值
查看>>
喜欢的零食
查看>>
canvas画验证码画图中的踩坑
查看>>
洛谷——P2420 让我们异或吧
查看>>
leetcode650—2 Keys Keyboard
查看>>
Django之ORM
查看>>
Infinite Fraction Path(HDU6223 + bfs + 剪枝)
查看>>
PHP+tcpdf的生成
查看>>