suchen

Heim >Web-Frontend >js-Tutorial >Der Unterschied zwischen focusin() und focus() und find() und children() in jQuery

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

黄舟
黄舟Original
2017-06-27 13:19:001626Durchsuche


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>

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erklärung des Unterschieds zwischen JQuery focus() und focusin()Nächster Artikel：Detaillierte Erklärung des Unterschieds zwischen JQuery focus() und focusin()

In Verbindung stehende Artikel

Mehr sehen