Heim > Web-Frontend > js-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-06-27 13:19:00
Original
1580 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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage