La différence entre focus() et focusin(), focus() et children() dans jQuery

focus() et focusin()

La différence entre focus() et focusin() est que focusin() prend en charge le bouillonnement d'événements. Voici un exemple :

<!doctype html><html lang="en"><head>
  <meta charset="utf-8">
  <title>focusin demo</title>
  <style>
  span {    display: none;  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js">
  </script>
  </head>
  <body>
  <p>
  <input type="text"> 
  <span>focusin fire</span>
  </p>
  <p>
  <input type="password"> 
  <span>focusin fire</span>
  </p>
  <script>$( "p" ).focusin(function() {
  $( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
});</script>
</body>
</html>

Copier après la connexion

Quand on clique sur. la zone de saisie, qui obtient le focus, fait remonter l'événement focus, provoquant le déclenchement de l'événement focus par la balise p, et focus() ne prend pas en charge le bouillonnement d'événements. De même, focusout() prend en charge le bouillonnement d'événements, mais flou() le fait. pas.

find() et children()

La différence entre find() et children() est que find() retrace plusieurs niveaux de nœuds enfants, tandis que children () Ne tracez qu'un seul niveau de nœuds enfants. La même chose entre find() et children() est qu'ils n'incluent pas leurs propres nœuds lors de la recherche de nœuds enfants.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p{            
        font-size: 20px;            
        width: 200px;            
        color: blue;            
        font-weight: bold;            
        margin: 0 10px;          
        }
          .hilite {            
          background: yellow;          
          }
    #test{        
    font-weight: bolder;    
    }
    </style>
    </head>
    <body>
    <ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II    
  <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B        
      <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li></ul>
    <script src="jquery-2.1.4.js"></script>
    <script>
        $( "li.item-ii" ).find( "li" ).css( "background-color", "red" );    
        </script>
        </body>
        </html>

Copier après la connexion

Si vous remplacez find() dans l'exemple ci-dessus par children(), vous obtiendrez des résultats différents.

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!