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

focus()과 focusin()

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

&lt;!doctype html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;focusin demo&lt;/title&gt;
  &lt;style&gt;
  span {    display: none;  }
  &lt;/style&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-1.10.2.js&quot;&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;
  &lt;input type=&quot;text&quot;&gt; 
  &lt;span&gt;focusin fire&lt;/span&gt;
  &lt;/p&gt;
  &lt;p&gt;
  &lt;input type=&quot;password&quot;&gt; 
  &lt;span&gt;focusin fire&lt;/span&gt;
  &lt;/p&gt;
  &lt;script&gt;$( &quot;p&quot; ).focusin(function() {
  $( this ).find( &quot;span&quot; ).css( &quot;display&quot;, &quot;inline&quot; ).fadeOut( 1000 );
});&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

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

find() 및 children()

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

&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        p{            
        font-size: 20px;            
        width: 200px;            
        color: blue;            
        font-weight: bold;            
        margin: 0 10px;          
        }
          .hilite {            
          background: yellow;          
          }
    #test{        
    font-weight: bolder;    
    }
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;ul class=&quot;level-1&quot;&gt;
  &lt;li class=&quot;item-i&quot;&gt;I&lt;/li&gt;
  &lt;li class=&quot;item-ii&quot;&gt;II    
  &lt;ul class=&quot;level-2&quot;&gt;
      &lt;li class=&quot;item-a&quot;&gt;A&lt;/li&gt;
      &lt;li class=&quot;item-b&quot;&gt;B        
      &lt;ul class=&quot;level-3&quot;&gt;
          &lt;li class=&quot;item-1&quot;&gt;1&lt;/li&gt;
          &lt;li class=&quot;item-2&quot;&gt;2&lt;/li&gt;
          &lt;li class=&quot;item-3&quot;&gt;3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class=&quot;item-c&quot;&gt;C&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class=&quot;item-iii&quot;&gt;III&lt;/li&gt;&lt;/ul&gt;
    &lt;script src=&quot;jquery-2.1.4.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        $( &quot;li.item-ii&quot; ).find( &quot;li&quot; ).css( &quot;background-color&quot;, &quot;red&quot; );    
        &lt;/script&gt;
        &lt;/body&gt;
        &lt;/html&gt;

로그인 후 복사

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

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.