program story

jQuery : first 대 .first ()

inputbox 2020. 12. 8. 08:02
반응형

jQuery : first 대 .first ()


.first()메소드는 jQuery 1.4에서 추가되었습니다.

:first선택 1.0 이후 주변왔다.

문서에서 :

:first

:first의사 클래스에 해당합니다 :eq(0). 또한 :lt(1). 단일 요소 만 일치하지만 :first-child둘 이상의 일치 할 수 있습니다. 각 상위에 대해 하나씩.

.first()

DOM 요소 집합을 나타내는 jQuery 객체가 주어지면 .first()메서드는 첫 번째 일치 요소에서 새 jQuery 객체를 생성합니다.


.first()다른 jQuery 객체를 반환하는 필터 인 것 같지만 :first선택 기일뿐입니다.

그러나 둘 다 동일한 작업을 수행하는 데 사용할 수 있습니다.

그렇다면 다른 하나 대신 언제 하나를 사용해야합니까? 공연? 예를 들어주세요.


.first() jQuery 컬렉션의 첫 번째 요소를 선택하는 데 사용할 수 있습니다.

기본적으로 컬렉션에 대해 작업 한 다음 독점적으로 첫 번째 요소에 대해 작업해야하는 상황에서 새 쿼리를 수행하거나 체인을 끊을 필요가 없습니다.

실제로 jQuery에서 수행 할 수있는 가장 비용이 많이 드는 작업 중 하나는 쿼리입니다. 덜할수록 더 좋습니다 ...

지금 생각할 수있는 한 가지 예는 첫 번째 이미지가 항상 기본 활성 이미지 인 이미지 갤러리 스크립트이지만 각 이미지에 이벤트 핸들러를 첨부해야합니다.

$('#gallery img').click(myFunc).first().addClass('active');

// Instead of
$('#gallery img').click(myFunc);
$('#gallery img:first').addClass('active');

.first()1.1.2 이후 존재하는 무언가에 대한 통사론 적 설탕이기도합니다 ... .eq(0):

$('#gallery img').click(myFunc).eq(0).addClass('active');

사실, 이것이 jQuery 자체에서 구현되는 방법입니다.

first: function() {
  return this.eq( 0 );
}

동일한 정보 를 얻기 위해 동일한 컨텍스트 에서 .first():first이 사용되는 경우 예 : Html :

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

스크립트:

console.log("1", $('ul li').first().text());
console.log("2", $('ul li:first').text());

.first() 더 성능이 좋다

** 여기에 이미지 설명 입력

Andrew Moore가 언급했듯이 .first().eq(0).
에 따르면 jsperf.com , .eq(0)최선을 수 있지만 아무 큰 차이가 없을 것입니다 .first().

여기에서 내 소스를 볼 수 있습니다. http://jsperf.com/first-vs-first-vs-eq-0


$('li').css('color', 'red').first().css('color', 'green'); 컬렉션이 이미 사용 된 후에 필터를 적용합니다.

대부분의 경우 선택기를 사용하는 :first이유 는 하나의 스윕에서 다른 많은 멋진 선택기 와 결합 할 수 있기 때문 입니다.


: 최초의 의사 선택하고 첫 번째는 () 같은 일을 할 수 있습니다.

성능에 관해서 는 jQuery first () ,: first, eq (0) 및 : nth (0)의 성능 차이에 대한 실제 예가 있습니다.

http://jsperf.com/jquery-first-vs-first-selector , 꼭 확인하세요!

이것이 도움이되기를 바랍니다.

참고 URL : https://stackoverflow.com/questions/2312761/jquery-first-vs-first

반응형