jQuery如何使用contents()？用法示例

contents()是jQuery中的内置方法, 它返回所有直接子级, 包括所选元素的文本和注释节点。

语法如下：

$(selector).contents()

参数：它不接受任何参数。

返回值：它返回所选元素的所有直接子元素。

jQuery代码显示此方法的工作方式：

代码1：

< html >
  
< head >
     < script src="https://ajax.googleapis.com/ajax/libs/
                jquery/3.3.1/jquery.min.js"></ script >
     < script >
         $(document).ready(function() {
             <!-- jQuery code to perform this method -->
             $("button").click(function() {
                 $("div").contents().filter("p").wrap("< b />");
             });
         });
     </ script >
     < style >
         #p1 {
             width: 420px;
             padding: 50px;
             display: block;
             border: 2px solid green;
             font-size: 30px;
         }
     </ style >
</ head >
  
< body >
     < div >
         <!-- This paragraph will get bold after click on
               the button -->
         < p id = "p1" >Welcome to lsbin !!!</ p >
     </ div >
     <!-- click on this button -->
     < button >Click Me!</ button >
     < br >
</ body >
  
</ html >

输出如下：

在点击"点击我！"之前按钮-

点击"点击我！"后按钮-

代码2：

在下面的代码中, 无需单击任何按钮。

< html >
  
< head >
     < script src = "https://code.jquery.com/jquery-1.10.2.js" ></ script >
     < style >
         #p1 {
             display: block;
             width: 400px;
             padding: 30px;
             border: 2px solid green;
             font-size: 30px;
         }
     </ style >
</ head >
  
< body >
     <!-- This paragraph will get bold -->
     < p id = "p1" >Welcome to lsbin !</ p >
     < script >
         $("p")
             .contents()
             .filter(function() {
                 return this.nodeType !== 1;
             })
             .wrap("< b ></ b >");
     </ script >
</ body >
  
</ html >

输出如下：

---