jQuery 多元素选择器用法介绍

2021年3月10日15:55:03 发表评论 722 次浏览

有两种选择方法多个要素使用选择器:

  • 元件选择器
  • *选择器

语法如下:

对于元素选择器:

$("element1, element2, element3, ...")

对于*选择器:

$("*")

参数:

  • 元件:需要此参数来指定要选择的元素。

示例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() {
             $("h2, div, span").css(
               "background-color", "green");
         });
     </ script >
</ head >
  
< body >
     < center >
         < h1 >Welcome to lsbin
       </ h1 >
         < h2 >Geeks1</ h2 >
  
         < div >Geeks2</ div >
  
         < p >Geeks3</ p >
         < p >< span >Geeks4</ span ></ p >
     </ center >
  
</ body >
  
</ html >

输出如下:

jQuery |多元素选择器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() {
             $("*").css(
             "background-color", "green");
         });
     </ script >
</ head >
  
< body >
     < center >
         < h1 >Welcome to lsbin</ h1 >
         < h2 >Geeks1</ h2 >
  
         < div >Geeks2</ div >
  
         < p >Geeks3</ p >
         < p >< span >Geeks4</ span ></ p >
     </ center >
  
</ body >
  
</ html >

输出如下:

jQuery |多元素选择器2

木子山

发表评论

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