jQuery :first-child第一个元素选择器用法

2021年3月11日17:59:05 发表评论 798 次浏览

它是一个jQuery选择器用于选择每个元素第一个孩子其父母.

语法如下:

$(":first-child")

返回值:它选择并返回其父级的第一个子元素。

示例1:

<!DOCTYPE html>
< html >
< h1 >
   < center >
     Geeks 
   </ center >
   </ h1 >
  
< head >
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
   </ script >
     < script >
         $(document).ready(function() {
             $("p:first-child").css(
               "background-color", "green");
         });
     </ script >
</ head >
  
< body >
< div >
     < p >Geeks for Geeks</ p >
     < p >jQuery</ p >
     < p >First Child Selector</ p >
</ div >
</ body >
  
</ html >

输出如下:

jQuery | :第一个孩子选择器1

示例2:

<!DOCTYPE html>
< html >
< h1 >
   < center >
     Geeks 
   </ center >
   </ h1 >
  
< head >
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
   </ script >
    
   < script >
         $(document).ready(function() {
             $("p:first-child").css(
               "background-color", "green");
         });
     </ script >
</ head >
  
< body >
     < div style = "border:1px solid;" >
         < p >Geeks for Geeks</ p >
         < p >jQuery</ p >
     </ div >
     < br >
  
     < div style = "border:1px solid;" >
         < p >Geeks for Geeks</ p >
         < p >jQuery</ p >
         < p >First Child Selector</ p >
     </ div >
  
     < div >jQuery:First Child Selector</ div >
  
</ body >
  
</ html >

输出如下:

jQuery | :第一个孩子选择器2

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: