recherche

Maison >interface Web >js tutoriel >Comment utiliser le sélecteur de filtre de sous-élément jQuery

Comment utiliser le sélecteur de filtre de sous-élément jQuery

小云云
小云云original
2018-01-31 13:26:391343parcourir

Cet article présente principalement en détail les informations pertinentes du sélecteur de filtre d'élément enfant du sélecteur jQuery. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde. 


<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" >
        <style type="text/css">
      p, span, p {
        width: 140px;
        height: 140px;
        margin: 5px;
        background: #aaa;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Verdana;
      }
      
      p.mini {
        width: 55px;
        height: 55px;
        background-color: #aaa;
        font-size: 12px;
      }
      
      p.hide {
        display: none;
      }      
    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        
        $("#btn1").click(function(){
          //选取子元素, 需要在选择器前添加一个空格. 
          $("p.one :nth-child(2)").css("background", "#ffbbaa");
        });
        $("#btn2").click(function(){
          $("p.one :first-child").css("background", "#ffbbaa");
        });
        $("#btn3").click(function(){
          $("p.one :last-child").css("background", "#ffbbaa");
        });
        
        $("#btn4").click(function(){
          $("p.one :only-child").css("background", "#ffbbaa");
        });
        
      });
    </script>
  </head>
  <body>    
    <input type="button" value="选取每个class为one的p父元素下的第2个子元素." id="btn1"/>
    <input type="button" value="选取每个class为one的p父元素下的第一个子元素." id="btn2"/>
    <input type="button" value="选取每个class为one的p父元素下的最后一个子元素." id="btn3"/>
    <input type="button" value="如果class为one的p父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
    
    <br><br>
    <p class="one" id="one">
      id 为 one,class 为 one 的p
      <p class="mini">class为mini</p>
    </p>
    <p class="one" id="two" title="test">
      id为two,class为one,title为test的p
      <p class="mini" title="other">class为mini,title为other</p>
      <p class="mini" title="test">class为mini,title为test</p>
    </p>
    <p class="one">
      <p class="mini">class为mini</p>
      <p class="mini">class为mini</p>
      <p class="mini">class为mini</p>
      <p class="mini"></p>
    </p>
    <p class="one">
      <p class="mini">class为mini</p>
      <p class="mini">class为mini</p>
      <p class="mini">class为mini</p>
      <p class="mini" title="tesst">class为mini,title为tesst</p>
    </p>
    <p style="display:none;" class="none">style的display为"none"的p</p>
    <p class="hide">class为"hide"的p</p>
    <p>
      包含input的type为"hidden"的p<input type="hidden" value="123456789" size="8">
    </p>
    <p id="mover">正在执行动画的p元素.</p>
  </body>
</html>

Recommandations associées :

Explication détaillée du sélecteur de filtre de sous-éléments jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery 选择器
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de Grunt sur la compression de fichiers statiques et le packaging du contrôle de versionArticle suivant：Explication détaillée de Grunt sur la compression de fichiers statiques et le packaging du contrôle de version

Articles Liés

Voir plus