JQuery Selectors를 포괄적으로 살펴 봅니다

이 기사는 Matt Smith와 Tim Severien의 Peer Review의 혜택을 받았습니다. 컨텐츠 품질 향상에 대한 SitePoint의 동료 검토 자에게 감사합니다! 요소 선택은 jQuery를 사용하여 웹 페이지를 조작하는 데 필수적입니다. 컨텐츠를 수정하거나 이벤트 첨부 또는 기타 작업을 수행하든 먼저 올바른 요소를 대상으로해야합니다. 이 튜토리얼은 라이브러리의 핵심 구성 요소 인 jQuery Selectors를 탐색합니다. 주요 개념

jQuery Selectors는 컨텐츠 조작, 이벤트 첨부 및 기타의 웹 페이지 요소를 대상으로하는 데 필수적입니다. 이 선택기는 ID, 클래스, 속성 또는 그 조합과 같은 기준을 사용합니다. jQuery는 기본, 인덱스 기반, 자식, 속성, 콘텐츠, 계층 구조, 양식 및 가시성 선택기를 포함하여 광범위한 선택기를 제공합니다. 각 유형은 특정 조건 및 매개 변수를 기반으로 고유 한 선택 기능을 제공합니다. JQuery 3에서의 향상은 및 와 같은 사용자 정의 선택기의 속도를 크게 향상 시켰습니다 (경우에 따라 최대 17 배 더 빠릅니다). 가시성은 이제

에서 레이아웃 박스의 존재에 의해 결정됩니다. Caching Selected Elements는 특히 수많은 선택기에서 성능을 향상시킵니다. 변수에 선택을 저장하면 중복 DOM 스캔이 줄어 듭니다 많은 jQuery selectors는 CSS 선택기를 미러링하는 반면, JQuery는 또한 간결하고 효율적인 요소 선택을위한 자체 사용자 정의 선택기도 포함되어 있습니다.

jQuery selectors 세부 사항 jQuery selectors는 주로 ID, 클래스, 속성 또는 조합과 같은 기준에 따라 요소를 식별합니다. 많은 사람들은 CSS 선택기를 기반으로하지만 JQuery는 사용자 정의 선택기로 기능을 확장합니다. 기본 선택기 id (), 클래스 () 또는 태그 이름으로 요소를 선택하십시오 ()를 결합하거나 쉼표로 분리 된 여러 선택기를 사용하십시오 (예 : ). 추가 기본 선택기 :

: 모든 제목을 선택합니다 (). 각 제목 태그를 개별적으로 나열하는 것보다 더 간결합니다 : ID가 URL 조각 식별자와 일치하는 요소를 선택합니다 (예 : ). : 현재 애니메이션이있는 요소를 선택합니다 (jQuery 효과 모듈 필요). 인덱스 기반 선택기
• jQuery는 제로 기반 인덱스 선택기를 제공합니다
  • : index에서 요소를 선택합니다. :eq(n) : 인덱스가 n
  : 보다 큰 색인을 가진 요소를 선택합니다.
  • : 첫 번째 일치하는 요소를 선택합니다 :lt(n) : 마지막 일치하는 요소를 선택합니다 : 인덱스 (0, 2, 4 ...)가있는 요소를 선택합니다 : 홀수 지수 (1, 3, 5 ...)가있는 요소를 선택합니다 n 대화식 데모는 인덱스 기반 선택기를 보여줍니다
  아동 선택자 이 선택기는 색인 또는 유형에 따라 어린이를 대상으로합니다
  • : 각 부모의 첫 번째 자녀를 선택합니다 :gt(n) : 유형의 첫 형제를 선택합니다 n : 각 부모의 마지막 자녀를 선택합니다
  : 유형의 마지막 형제를 선택합니다 : nth Child를 선택합니다 (숫자, , , 공식과 같은 다양한 표현식을 지원합니다). :first : 와 비슷하지만 마지막 자녀와 계산됩니다.
: 유형의 n 번째 형제를 선택합니다
• : :last와 비슷하지만 마지막 형제로부터 계산됩니다.
• : 부모의 유일한 자녀 인 요소를 선택합니다. : 동일한 유형의 형제 자매가없는 요소를 선택합니다. :even 대화식 데모를 보여주는 어린이 선택기를 보여줍니다
속성 셀렉터 속성 값에 따라 요소를 선택하십시오
• :odd : 정확한 속성 값을 가진 요소를 선택합니다 : 속성 값이 "value"로 시작하는 요소를 선택합니다
: 속성 값이 "value"로 끝나는 요소를 선택합니다

: 속성 값에 "값"이 포함 된 요소를 선택합니다 : 속성 값이 "값"과 하이픈으로 시작하는 요소를 선택합니다.

: 속성 값이 "값"을 공간 분리 단어로 포함하는 요소를 선택합니다. : 속성이 없거나 다른 값이없는 요소를 선택합니다. : 값에 관계없이 지정된 속성으로 요소를 선택합니다. 컨텐츠 선택기 이 선택기는 컨텐츠에 따라 요소를 대상으로합니다

: 지정된 텍스트 (Case-insensitive)가 포함 된 요소를 선택합니다
• : 제공된 선택기와 일치하는 하나 이상의 요소가 포함 된 요소를 선택합니다. :contains(text) : 자녀가없는 요소를 선택합니다
: 적어도 하나의 자녀가있는 요소를 선택합니다
• 계층 선택기 이 선택기는 DOM 계층을 사용합니다 : :has(selector)
: 조상 요소의 모든 후손을 선택합니다
• : 부모 요소의 직접 자녀를 선택합니다 : :empty 요소의 다음 형제를 선택합니다
:
• 요소의 모든 후속 형제를 선택합니다 :parent 형식 선택기 양식 요소에 대한 단순화 된 선택기 :

: 버튼 요소를 선택합니다

: CheckBox 요소를 선택합니다

: 라디오 버튼 요소를 선택합니다

: 텍스트 입력 요소를 선택합니다

: 비밀번호 입력 요소를 선택합니다

: 제출 버튼 요소를 선택합니다
• : 재설정 버튼 요소를 선택합니다 ancestor descendant : 이미지 버튼 요소를 선택합니다
: 파일 입력 요소를 선택합니다
• : 숨겨진 양식 요소를 선택합니다 parent > child : 활성화 된 양식 요소를 선택합니다
: 비활성화 된 양식 요소를 선택합니다 : 확인 된 확인란 및 라디오 버튼 및 선택한 옵션을 선택하십시오. :
• 요소에서 선택한 옵션을 선택합니다 prev next 가시성 선택기 prev
• : 가시 요소를 선택합니다 : 숨겨진 요소를 선택합니다 prev ~ siblings prev jQuery 3은
변경됩니다 jQuery 3은

및

에 대한 성능 향상을 도입하고 가시성의 정의를 개선했습니다. 유효하지 않은 선택기에 대한 오류 처리도 향상되었습니다 성능을위한 캐싱

Caching Selected Elements는 반복 된 DOM 스캔을 피함으로써 성능을 향상시킵니다. 재사용을 위해 변수에 선택을 저장하십시오 결론

이 튜토리얼은 JQuery Selectors를 포괄적으로 다룹니다. 최적의 성능을 위해 캐싱을 사용해야합니다. 이러한 선택기를 이해하는 것은 효과적인 jQuery 개발에 중요합니다
• 자주 묻는 질문 (faqs) :button 원래 입력의 FAQ 섹션은 이미 잘 구조화되고 포괄적입니다. 개선 된 흐름과 선명도에 대한 작은 문구 조정으로 그대로 유지하는 것이 좋습니다.

위 내용은 JQuery Selectors를 포괄적으로 살펴 봅니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!