• jquery中DOM的操作方法


    先介绍几个比较简单的方法,不经常用到,做个记录

    1. filter() 方法

    顾名思义,filter是一个过滤器,如果给定表示 DOM 元素集合的 jQuery 对象,.filter() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测试每个元素;所有匹配该选择器的元素都会包含在结果中。

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4   <style>
     5   div { width:60px; height:60px;
     6         margin:5px; float:left;
     7         border:2px white solid; }
     8   </style>
     9   <script type="text/javascript" src="/jquery/jquery.js"></script>
    10 </head>
    11 
    12 <body>
    13   <div></div>
    14 
    15   <div class="middle"></div>
    16   <div class="middle"></div>
    17   <div class="middle"></div>
    18   <div class="middle"></div>
    19 
    20   <div></div>
    21 
    22 <script>
    23   $("div").css("background", "#c8ebcc")
    24     .filter(".middle")
    25     .css("border-color", "red");
    26 </script>
    27 
    28 </body>
    29 </html>
    View Code

    效果:

    2.contents() 方法

    contents() 方法获得匹配元素集合中每个元素的子节点,包括文本和注释节点。

    如果给定表示 DOM 元素集合的 jQuery 对象,.contents() 方法允许我们检索 DOM 树中的这些元素的直接子节点,并用匹配元素构造新的 jQuery 对象。.contents() 和 .children() 方法类似,不同的是前者在结果 jQuery 对象中包含了文本节点以及 HTML 元素。

    .contents() 方法也可以用于获得 iframe 的内容文档,前提是该 iframe 与主页面在同一个域。

    3.andSelf()方法

    官方没有很详细的解释,顾名思义,就是加上自己的意思,看例子:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <script type="text/javascript" src="/jquery/jquery.js"></script>
     5 <style>
     6   p, div { margin:5px; padding:5px; }
     7   .border { border: 2px solid red; }
     8   .background { background:yellow; }
     9 </style>
    10 </head>
    11 <body>
    12   <div>
    13     <p>First Paragraph</p>
    14     <p>Second Paragraph</p>
    15   </div>
    16 <script>
    17     $("div").find("p").andSelf().addClass("border");
    18     $("div").find("p").addClass("background");
    19 </script>
    20 </body>
    21 </html>
    View Code

    效果:

    找到所有 div,以及其中的所有段落,并为它们添加两个类名。请注意,由于未使用 .andSelf(),div 没有黄色背景色。也就是说,把andSelf() 去掉的话,div是没有红色边框的。

    4.end() 方法

    end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4   <style>p { margin:10px; padding:10px; }</style>
     5   <script type="text/javascript" src="/jquery/jquery.js"></script>
     6 </head>
     7 
     8 <body>
     9   <p><span>Hello</span>, how are you?</p>
    10   <script>$("p").find("span").end().css("border", "2px red solid");</script>
    11 </body>
    12 </html>
    View Code

    效果:

    5.warp() 方法

    wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。

    语法

    $(selector).wrap(wrapper)
    参数描述
    wrapper

    必需。规定包裹被选元素的内容。

    可能的值:

    • HTML 代码 - 比如 ("<div></div>")
    • 新元素 - 比如 (document.createElement("div"))
    • 已存在的元素 - 比如 ($(".div1"))

    已存在的元素不会被移动,只会被复制,并包裹被选元素。

     1 <html>
     2 <head>
     3 <script type="text/javascript" src="/jquery/jquery.js"></script>
     4 <script type="text/javascript">
     5 $(document).ready(function(){
     6   $("button").click(function(){
     7     $("p").wrap(function(){
     8       return "<div></div>"
     9     });
    10   });
    11 });
    12 
    13 </script>
    14 <style type="text/css">
    15 div{background-color:yellow;padding:10px;}
    16 </style>
    17 </head>
    18 
    19 <body>
    20 <p>这是一个段落。</p>
    21 <button>用 div 元素来包围 p 元素</button>
    22 </body>
    23 </html>
    View Code

    效果大家自己试一下哦,比较简单。

    暂时先总结这么多,以后遇到再继续完善。

  • 相关阅读:
    2020系统综合实践 第6次实践作业
    2020系统综合实践 第5次实践作业
    2020系统综合实践 第4次实践作业
    2020系统综合实践 第3次实践作业
    2020系统综合实践 第2次实践作业
    2020系统综合实践 第1次实践作业
    2019 SDN大作业
    2019 SDN上机第7次作业
    软工实践个人总结
    第03组 Beta冲刺(5/5)
  • 原文地址:https://www.cnblogs.com/zhangruiping/p/4585481.html
Copyright © 2020-2023  润新知