search

Home  >  Article  >  Web Front-end  >  The difference between focusin() and focus() and find() and children() in jQuery

The difference between focusin() and focus() and find() and children() in jQuery

黄舟
黄舟Original
2017-06-27 13:19:001577browse


The difference between focus() and focusin(), focus() and children() in jQuery

focus() and focusin()

The difference between focus() and focusin() is that focusin() supports event bubbling. The following example illustrates: 

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

When we click on the input box, its Gaining focus causes the focus event to bubble up, causing the p tag to trigger the focus event. However, focus() does not support event bubbling. Similarly, focusout() supports event bubbling, but blur() does not.

find() and children()

The difference between find() and children() is that find() traces down multiple levels of child nodes, while children() Only trace down one level of child nodes. The same thing about find() and children() is that they do not include their own nodes when looking for child nodes. 

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

If you replace find() in the above example with children(), you will get different results.

The above is the detailed content of The difference between focusin() and focus() and find() and children() in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of the difference between JQuery focus() and focusin()Next article：Detailed explanation of the difference between JQuery focus() and focusin()

Related articles

See more