首頁 > web前端 > 前端問答 > jquery選擇器中大於號怎麼用

jquery選擇器中大於號怎麼用

WBOY
發布: 2022-06-14 18:27:43
原創
2012 人瀏覽過

在jquery中,選擇器中的大於號用於選取指定元素下子元素,語法為「$("父元素>子元素").jquery方法(...)」;大於號表示的是取得指定元素下的第一級子元素,並不是所有的後代元素。

jquery選擇器中大於號怎麼用

本教學操作環境:windows10系統、jquery3.6.0版本、Dell G3電腦。

jquery選擇器中大於號怎麼用

>選擇器是匹配指定元素的一級子元素,而不是所有的後代元素。

擴充知識:

  • $(this)    目前HTML 元素   

  • $("p")    所有

  • $("p.intro")    所有class="intro" 的

    元素   

  • $(". intro")    所有class="intro" 的元素   

  • #$("#intro")    id="intro" 的元素   

  • $ ("ul li:first")    每個

      的第一個
    • 元素   
    • $("[href$='.jpg']")   所有以".jpg" 結尾的屬性值的href 屬性   

    • $("div#intro .head")    id="intro" 的

      元素中的所有class="head" 的元素   

      範例如下:

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8"> 
      <title>123</title> 
      <script src="js/jquery.min.js">
      </script>
      <script>
      $(document).ready(function(){
        $("#box>div").css("background-color","green");
      });
      </script>
      <style type="text/css">
      #box{
        width:300px;
        height:200px;
        background:black;
      }
      #middle{
        width:200px;
        height:150px;
        background:red;
        margin:0px auto;
      }
      #inner{
        width:100px;
        height:100px;
        background:blue;
        margin:0px auto;
      }
      </style>
      </head>
      <body>
      <div id="box">
        <div id="middle">
          <div id="inner"></div>
        </div>
      </div>
      </body>
      </html>
      登入後複製

      輸出結果:

      jquery選擇器中大於號怎麼用

      ##影片教學推薦:

      jQuery影片教學

以上是jquery選擇器中大於號怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板