jQuery에서 focus()와 focusin(), focus()와 children()의 차이점

focus()과 focusin()

focus()와 focusin()의 차이점은 focusin()은 이벤트 버블링을 지원합니다.

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

로그인 후 복사

입력 상자를 클릭하면 포커스가 발생하여 포커스 이벤트가 발생하고 p 태그가 포커스 이벤트를 트리거합니다. focus()는 이벤트 버블링을 지원하지 않습니다. 마찬가지로 focusout()도 이벤트 버블링을 지원하지만 Blur()는 지원하지 않습니다.

find() 및 children()

find()와 children()의 차이점은 find()는 여러 수준의 하위 노드를 추적하는 반면, children()은 한 수준의 하위 노드만 추적한다는 것입니다. find()와 children() 사이의 동일한 점은 하위 노드를 찾을 때 자체 노드를 포함하지 않는다는 것입니다.

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

로그인 후 복사

위 예제의 find()를 children()으로 바꾸면 다른 결과가 나옵니다.

위 내용은 jQuery에서 focusin()과 focus(), find()와 children()의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!