jQuery : first 대 .first ()
이 .first()
메소드는 jQuery 1.4에서 추가되었습니다.
:first
선택 1.0 이후 주변왔다.
문서에서 :
:first
의사 클래스에 해당합니다:eq(0)
. 또한:lt(1)
. 단일 요소 만 일치하지만:first-child
둘 이상의 일치 할 수 있습니다. 각 상위에 대해 하나씩.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
'program story' 카테고리의 다른 글
C ++에서 func ()와 (* this) .func ()의 차이점 (0) | 2020.12.08 |
---|---|
파이썬에 대한 간단한 프로세스 기반 병렬 맵이 있습니까? (0) | 2020.12.08 |
명령 줄에서 PHP 코드 문자열 실행 (0) | 2020.12.08 |
Haskell 기능 적용 및 커링 (0) | 2020.12.08 |
한 요소의 모든 속성을 복사하여 다른 요소에 적용하는 방법은 무엇입니까? (0) | 2020.12.08 |