jquery中DOM的操作方法

时间：2023-03-08 23:03:31
jquery中DOM的操作方法

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

1. filter() 方法

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

 <!DOCTYPE html>

 <html>

 <head>

   <style>

   div { width:60px; height:60px;

         margin:5px; float:left;

         border:2px white solid; }

   </style>

   <script type="text/javascript" src="/jquery/jquery.js"></script>

 </head>

 <body>

   <div></div>

   <div class="middle"></div>

   <div class="middle"></div>

   <div class="middle"></div>

   <div class="middle"></div>

   <div></div>

 <script>

   $("div").css("background", "#c8ebcc")

     .filter(".middle")

     .css("border-color", "red");

 </script>

 </body>

 </html>

效果：

jquery中DOM的操作方法

2.contents() 方法

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

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

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

3.andSelf()方法

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

 <!DOCTYPE html>

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <style>

   p, div { margin:5px; padding:5px; }

   .border { border: 2px solid red; }

   .background { background:yellow; }

 </style>

 </head>

 <body>

   <div>

     <p>First Paragraph</p>

     <p>Second Paragraph</p>

   </div>

 <script>

     $("div").find("p").andSelf().addClass("border");

     $("div").find("p").addClass("background");

 </script>

 </body>

 </html>

效果：

jquery中DOM的操作方法

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

4.end() 方法

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

 <!DOCTYPE html>

 <html>

 <head>

   <style>p { margin:10px; padding:10px; }</style>

   <script type="text/javascript" src="/jquery/jquery.js"></script>

 </head>

 <body>

   <p><span>Hello</span>, how are you?</p>

   <script>$("p").find("span").end().css("border", "2px red solid");</script>

 </body>

 </html>

效果：

jquery中DOM的操作方法

5.warp() 方法

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

语法

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

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

可能的值:

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

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

 
 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").wrap(function(){

       return "<div></div>"

     });

   });

 });

 </script>

 <style type="text/css">

 div{background-color:yellow;padding:10px;}

 </style>

 </head>

 <body>

 <p>这是一个段落。</p>

 <button>用 div 元素来包围 p 元素</button>

 </body>

 </html>

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

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

相关文章