jQuery .class选择器用法示例介绍

2021年3月16日12:05:39 发表评论 796 次浏览

类选择器指定要选择的元素的类。它不能以数字开头。它为多个HTML元素提供样式。

语法如下:

$(".class")

示例1:

<!DOCTYPE html>
< html >
  
< head >
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
   </ script >
     < script >
       $(document).ready(function() {
         $(".GEEKS").css("background-color"
                         , "pink");
         });
     </ script >
</ head >
  
< body >
  
     < p class = "GEEKS" >Geeks For Geeks
   </ p >
  
     < span class = "GEEKS" >jQuery|.class selector
   </ span >
  
</ body >
  
</ html >

输出如下:

jQuery | .class选择器1

示例2:

<!DOCTYPE html>
< html >
  
< head >
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
   </ script >
    
   < script >
       $(document).ready(function() {
        $(".GEEKS").css("background-color", "orange");
         });
     </ script >
</ head >
  
< body >
  
     < div style = "border:2px solid red"
          class = "GEEKS" >
       Geeks For Geeks
   </ div >
     < br >
     < br >
    
     < span class = "GEEKS" >jQuery|.class selector
   </ span >
  
</ body >
  
</ html >

输出如下:

jQuery | .class选择器2

支持的浏览器:

  • 谷歌浏览器
  • 火狐浏览器
  • 边缘
  • 苹果浏览器
  • 歌剧

木子山

发表评论

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