Der Unterschied zwischen focusin() und focus() und find() und children() in jQuery

黄舟

Freigeben： 2017-06-27 13:19:00

Original

1568 Leute haben es durchsucht

Der Unterschied zwischen focus() und focusin(), focus() und children() in jQuery

focus() und focusin()

Der Unterschied zwischen focus() und focusin() besteht darin, dass focusin() das Event-Bubbling unterstützt:

<!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>

Nach dem Login kopieren

Wenn wir auf klicken Das Eingabefeld, das den Fokus erhält, bewirkt, dass das Fokusereignis in die Luft sprudelt, wodurch das p-Tag das Fokusereignis auslöst, und focus() unterstützt das Ereignis-Bubbling nicht. Ebenso unterstützt focusout() das Ereignis-Bubbling, jedoch Blur() nicht.

find() undchildren()

Der Unterschied zwischen find() und children() besteht darin, dass find() mehrere Ebenen von untergeordneten Knoten verfolgt, während untergeordnete Knoten vorhanden sind () Verfolgen Sie nur eine Ebene von untergeordneten Knoten. Das Gleiche zwischen find() und children() besteht darin, dass sie bei der Suche nach untergeordneten Knoten ihre eigenen Knoten nicht einbeziehen.

<!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>

Nach dem Login kopieren

Wenn Sie find() im obigen Beispiel durch children() ersetzen, erhalten Sie andere Ergebnisse.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen focusin() und focus() und find() und children() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!