如何使用jQuery选择具有多个类的元素?

2021年3月30日15:45:05 发表评论 982 次浏览

有两种使用jQuery选择具有多个类的元素的过程。下面将以适当的示例描述这两个过程。

使用filter()方法:通过使用filter()方法, 我们可以过滤出所有不符合所选条件的元素, 并且将返回这些匹配项。

语法:$(选择器).filter(条件, 函数(索引))

例子:

<!DOCTYPE html> 
< html > 
  
< head > 
     < title > 
         jQuery | Select an element
         with multiple classes
     </ title > 
      
     < style > 
         h1 { 
             color: green; 
         } 
         body { 
             text-align: center; 
         } 
     </ style > 
  
     < script src =
"https://code.jquery.com/jquery-1.12.4.min.js" >
     </ script >
</ head > 
  
< body > 
     < h1 >lsbin</ h1 >
  
     < h3 >
         Select an element with
         multiple classes
     </ h3 > 
  
     < div class = "geeks" >lsbin</ div >
     < div class = "geeks geeks1" >jQuery</ div >
  
     < div class = "geeks1" >
         Select an element with
         multiple classes
     </ div >
  
     < div class = "geeks1 geeks" >Using</ div >
     < div class = "geeks geeks1 geeks2" >
         filter() method
     </ div >
  
     < script >
         $(document).ready(function(){
             $(".geeks").filter(".geeks1").css(
                 "background-color", "yellow");
          
             $(".geeks.geeks2").filter(".geeks1")
                 .css("background-color", "green");
         });
     </ script >
</ body > 
  
</ html >

输出如下:

如何使用jQuery选择具有多个类的元素?1

使用.class选择器:通过使用.class Selector, 可以为要选择的元素指定类。它不能以数字开头。它为多个HTML元素提供样式。

语法:$("。class1.class2.class3 ...")

例子:

<!DOCTYPE html> 
< html > 
  
< head > 
     < title > 
         jQuery | Select an element
         with multiple classes
     </ title > 
      
     < style > 
         h1 { 
             color: green; 
         } 
         body { 
             text-align: center; 
         } 
     </ style > 
      
     < script src =
"https://code.jquery.com/jquery-1.12.4.min.js" >
     </ script >
</ head > 
  
< body > 
     < h1 >lsbin</ h1 > 
      
     < h3 > 
         Select an element with
         multiple classes
     </ h3 > 
      
     < div class = "geeks" >lsbin</ div >
     < div class = "geeks geeks1" >jQuery</ div >
      
     < div class = "geeks1" >
         Select an element with
         multiple classes
     </ div >
      
     < div class = "geeks1 geeks" >Using</ div >
     < div class = "geeks geeks1 geeks2" >
         .class Selector Method
     </ div >
      
     < script >
         $(document).ready(function(){
             $(".geeks1").css(
                 "background-color", "yellow");
              
             $(".geeks").css(
                 "background-color", "white");
  
             $(".geeks.geeks2").css(
                 "background-color", "green");
         });
     </ script >
</ body > 
  
</ html >

输出如下:

如何使用jQuery选择具有多个类的元素?2

木子山

发表评论

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