jquery에서 필터링 기능을 구현하는 방법

필터링 기능은 필터 선택기를 통해 jquery에서 구현됩니다. 다양한 필터링 규칙에 따라 필터 선택기는 다음과 같이 나눌 수 있습니다. 1. 요소의 텍스트 내용이나 포함된 하위 요소의 특성을 기반으로 요소를 얻을 수 있는 콘텐츠 필터 선택기, 텍스트 내용은 완전히 모호할 수 있습니다. 또는 요소 위치 지정에 대해 절대적으로 일치합니다. 2. 요소가 표시되는지 여부에 따라 요소를 얻을 수 있는 가시성 필터 3. 요소의 특정 속성에 따라 요소를 얻을 수 있는 속성 필터; 활성화된 속성과 같은 요소 형태의 개체의 속성 특성을 통해 얻을 수 있습니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.0 버전, Dell G3 컴퓨터.

Jquery는 다양한 필터 선택기를 통해 필터링 기능을 구현합니다.

필터? 반드시 필터 조건을 추가해야 합니다. "$("div:first")"와 같이 ":"를 통해 필터 조건을 추가하여 div 요소 컬렉션의 첫 번째 div 요소를 반환하고 첫 번째는 필터 조건입니다.
다양한 필터링 규칙에 따라 필터 선택기는 단순 필터 선택기, 콘텐츠 필터 선택기, 가시성 필터 선택기, 속성 필터 선택기, 하위 요소 필터 선택기, 양식 개체 속성 필터 선택기 등으로 나눌 수 있습니다.

1) 단순 필터 선택기

필터 선택기는 특정 필터링 규칙에 따라 요소를 일치시킵니다. 작성 시 콜론(:)으로 시작합니다. 단순 필터 선택기는 필터 선택기 중 가장 널리 사용되는 필터 선택입니다.

selectorfirst() 또는:firstlast() 또는:last:not( 선택기 ):even:odd:eq(index):gt(index):lt(index):header:animated

함수 설명
첫 번째 요소 가져오기
마지막 요소 가져오기
주어진 선택자를 제외한 모든 요소를 ​​가져옵니다.
인덱스 값이 짝수인 모든 요소를 ​​가져옵니다. 인덱스 번호는 0
인덱스 값이 홀수인 모든 요소를 ​​가져옵니다. , 인덱스 번호는 0
지정된 인덱스 값을 가진 요소를 가져옵니다. 인덱스 번호는 0
Get all에서 시작합니다. 주어진 인덱스 값, 인덱스 번호는 0
지정된 인덱스 값보다 작은 모든 요소를 ​​가져옵니다. 인덱스 번호는 0
모든 헤더를 가져옵니다. h1, h2... 요소 컬렉션
애니메이션 효과를 수행하는 요소 가져오기

2) 콘텐츠 필터 선택기

텍스트를 기반으로 한 콘텐츠 필터 선택기 요소 콘텐츠 또는 포함된 하위 요소 특성은 요소를 가져오고 해당 텍스트 콘텐츠는 요소 위치 지정에 대해 완전히 모호하거나 절대적으로 일치할 수 있습니다

selector:contains(text):empty:has(selector): parent

Function Description
고정된 텍스트가 있는 요소에 포함 가져오기
하위 요소 또는 텍스트를 포함하지 않는 모든 빈 요소 가져오기
선택기와 일치하는 요소 가져오기
하위 요소 또는 텍스트가 포함된 요소 가져오기

3) 가시성 필터

가시성 필터 선택기 요소 표시 여부의 특성을 기반으로 요소 가져오기

Selector:hidden:visble

함수 설명
모든 보이지 않는 요소 또는 숨겨진 유형의 요소 가져오기
보이는 모든 요소 가져오기

4) 속성 필터

요소 가져오기를 기반으로 하는 속성 필터 ID 번호 또는 일치하는 속성 값의 내용과 같은 요소의 속성에서 "["로 시작하고 "]"

Selector [속성][속성=값][속성!=값][attribute^=value][attribute$ =value][attribute*=value][selector1 ][selector2][selectorN]

5) 하위 요소 필터

페이지 개발 과정에서 특정 행을 강조 표시해야 할 수도 있습니다. 기본 필터 선택기 ":eq(index)"를 사용하면 단일 테이블을 표시할 수 있지만 대량의 데이터와 여러 테이블의 선택 요구 사항을 충족할 수는 없습니다. 이러한 기능을 구현하기 위해 jQuery는 하위 요소 필터 선택기를 통해 모든 상위 요소의 요소를 쉽게 얻을 수 있습니다.

Function Description
주어진 속성을 포함하는 요소를 가져옵니다
특정 값인 주어진 속성과 동일한 요소를 가져옵니다
다음과 같지 않은 요소 가져오기 주어진 속성은 특정 값을 가진 요소입니다
주어진 속성이 특정 값으로 시작하는 요소를 가져옵니다
Gets 주어진 속성은 특정 값으로 끝나는 요소
주어진 속성을 가져오는 것은 특정 값으로 끝나는 요소
여러 조건을 충족하는 속성을 가진 요소 가져오기

부터 시작합니다.

Selector	함수 설명
:nth-child(eq/even/odd/index)	각 상위 요소 아래에 특정 위치 요소를 가져오세요. 인덱스 번호는 1
:first-child	각 상위 요소 아래의 첫 번째 하위 요소 가져오기
:last-child	각 상위 요소 아래의 마지막 하위 요소 가져오기
:only-child	하나의 하위 요소만 가져오기 각 상위 요소 아래

6) 양식 객체 속성 필터

양식 객체 속성 필터 선택기는 활성화, 비활성화, 확인, 선택 속성과 같은 양식에 있는 객체의 속성 특성을 통해 요소를 얻습니다. ㅋㅋㅋ

: selected양식에서 선택한 모든 요소 가져오기:selected양식에서 선택한 옵션이 있는 모든 요소 가져오기7) jQuery 선택기의 양식 필터 Selector함수 설명:input모든 입력 가져오기, 텍스트 영역, select

양식 선택기는 , 이는 양식용으로 특별히 설계되었으며 페이지에서 양식 개체를 빠르게 찾는 데 사용할 수 있습니다.

:text모든 한 줄 텍스트 상자 가져오기

:비밀번호 모든 비밀번호 상자 가져오기 :radio모든 라디오 버튼 가져오기:checkboxget checkbox:submit모든 제출 버튼 가져오기:image모든 이미지 가져오기 도메인 :reset모든 재설정 버튼 가져오기:button모든 버튼 가져오기:file모든 파일 도메인 가져오기 jQuery 비디오 튜토리얼 , 웹 프론트엔드 영상

	[권장 학습:
】

위 내용은 jquery에서 필터링 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!