jQuery如何使用first方法？示例

fist()是jQuery中的内置函数, 用于从指定元素中选择第一个元素。

语法如下：

$(selector).first()

选择器是所有元素的主要类。

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

返回值：它返回所选元素中的第一个元素。

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

代码1：

< html >
  
< head >
     < script src="https://ajax.googleapis.com/ajax/libs/
                jquery/3.3.1/jquery.min.js"></ script >
     < script >
         $(document).ready(function() {
             $("div").first().css("background-color", "lightgreen");
         });
     </ script >
</ head >
  
< body >
  
     < h1 >Welcome to lsbin !!!</ h1 >
     < div style = "border: 1px solid green;" >
         < p >This is the first statement.</ p >
     </ div >
     < br >
  
     < div style = "border: 1px solid green;" >
         < p >This is the second statement.</ p >
     </ div >
     < br >
  
     < div style = "border: 1px solid green;" >
         < p >This is the third statement.</ p >
     </ div >
     < br >
</ body >
  
</ html >

在上面的代码中, 第一个" div"元素的背景色被更改。

输出如下：

在这里, 你还可以通过选择

"ID"

or

"类"

所选元素的。

代码2：

< html >
  
< head >
     < script src="https://ajax.googleapis.com/ajax/libs/
                  jquery/3.3.1/jquery.min.js"></ script >
     < script >
         $(document).ready(function() {
             $(".main").first().css("background-color", "lightgreen");
         });
     </ script >
</ head >
  
< body >
  
     < h1 >Welcome to lsbin !!!</ h1 >
     < div style = "border: 1px solid green;" >
         < p >This is the first statement.</ p >
     </ div >
     < br >
  
     < div class = "main" style = "border: 1px solid green;" >
         < p >This is second statement.</ p >
     </ div >
     < br >
  
     < div class = "main" style = "border: 1px solid green;" >
         < p >This is the third statement.</ p >
     </ div >
     < br >
</ body >
  
</ html >

在上面的代码中, 具有第一个"主"类的元素被突出显示。

输出如下：

---