JQuery filter_jquery 전체 시리즈 소개

1. 개체를 선택합니다

1).기본

·#id 주어진 ID를 기준으로 요소를 일치시킵니다. 예: $("#id")
·element는 주어진 요소 이름을 기반으로 모든 요소와 일치합니다. 예: $("div")
·.class 지정된 클래스를 기반으로 요소를 일치시킵니다. 예: $(".style1");
·*는 모든 요소와 일치합니다. 예: $("*")
·selector1,selector2,selectorN은 각 선택기와 일치하는 요소를 결합하여 함께 반환합니다. 예: $("#id,div,.style1")

2).양식

·:button은 모든 버튼과 일치합니다. 예: $(":button")
·:checkbox는 모든 체크박스와 일치합니다. 예: $(":checkbox")
·:file은 모든 파일 필드와 일치합니다. 예: $(":File")
·:hidden은 모든 보이지 않는 요소 또는 숨겨진 유형의 요소와 일치합니다. 예: $("input:hidden")
·:image는 모든 이미지 필드와 일치합니다. 예: $(":image")
·:input은 모든 입력, 텍스트 영역, 선택 및 버튼 요소와 일치합니다. 예: $(":input")
·:password는 모든 비밀번호 상자와 일치합니다. 예: $(":password")
·:radio는 모든 라디오 버튼과 일치합니다. 예: $(":radio")
·:reset은 모든 재설정 버튼과 일치합니다. 예: $(":reset")
·:submit은 모든 제출 버튼과 일치합니다. 예: $(":submit")
·:text는 모든 한 줄 텍스트 상자와 일치합니다. 예: $(":text")
·:header는 h1, h2, h3과 같은 헤더 요소와 일치합니다. 예: $(":header").css("배경", "#EEE");

2. 필터 조건

1).속성 필터링

·[속성*=값] 주어진 속성을 특정 값을 포함하는 요소와 일치시킵니다. 예: $("input[name*='man'")
·[attribute!=value]는 지정된 속성을 포함하는 모든 요소와 일치하지만 속성은 특정 값과 동일하지 않습니다. 예: $(input[name!='man');
·[attribute$=value]는 지정된 속성이 특정 값으로 끝나는 요소와 일치합니다. 예: $("input[name$='man']")
·[attribute=value]는 지정된 속성이 특정 값인 요소와 일치합니다. 예: $("input[name='man']");
·[attribute]는 지정된 속성을 포함하는 요소와 일치합니다. 예: $("div[id]")
·[attribute^=value]는 지정된 속성이 특정 값으로 시작하는 요소와 일치합니다. 예: $("input[name^='man']")
·[selector1][selector2][selectorN]은 동시에 여러 조건을 충족합니다. 예: $("input[id][name$='man']")
·:hidden은 모든 보이지 않는 요소와 일치합니다. 예: $("tr:hidden")
·:visible은 보이는 모든 요소와 일치합니다. 예: $("tr:visible")
·:checked는 선택한 모든 요소(체크 상자, 라디오 버튼 등, 선택 옵션 제외)와 일치합니다. 예: $("input:checked")
·:disabled는 비활성화된 모든 요소와 일치합니다. 예: $("input:disabled")
·:enabled는 사용 가능한 모든 요소와 일치합니다. 예: $("input:enabled")
·:selected는 선택한 모든 옵션 요소와 일치합니다. 예: $("선택 옵션:선택됨")

2) 콘텐츠 필터링

·:contains(text) 주어진 텍스트를 포함하는 요소와 일치합니다. 예: $("div:contains('John')")
·:empty는 하위 요소나 텍스트를 포함하지 않는 모든 빈 요소와 일치합니다. 예: $("td:empty")
·:has(selector)는 선택기와 일치하는 요소를 포함하는 요소와 일치합니다. 예: $("div:has(p)");
·:parent는 하위 요소 또는 텍스트를 포함하는 요소와 일치합니다. 예: $("td:parent")

3) 레벨 필터링

·ancestor 자손은 주어진 조상 요소 아래의 모든 자손 요소와 일치합니다. 예: $("form input")
·parent > child는 지정된 상위 요소 아래의 모든 하위 요소와 일치합니다. 예: $("form > input")
·prev next는 prev 요소 바로 다음의 모든 다음 요소와 일치합니다. 예: $("label input")
·prev ~ siblings는 prev 요소 뒤의 모든 siblings 요소와 일치합니다. 예: $("form ~ input")
·:first-child는 첫 번째 하위 요소와 일치합니다. 예: $("ul li:first-child")
·:last-child는 마지막 하위 요소와 일치합니다. 예: $("ul li:last-child")
·:nth-child(index/even/odd/equation)는 상위 요소 아래의 N번째 하위 요소 또는 홀수-짝수 요소와 일치합니다. 예: $("ul li:nth-child(2)")
·:only-child 요소가 상위 요소의 유일한 하위 요소인 경우 일치됩니다. 예: $("ul li:only-child")

4).방법심사

·:animated는 애니메이션 효과를 수행하는 모든 요소와 일치합니다. 예: $("div:animated");
·:eq(index)는 지정된 인덱스 값을 가진 요소와 일치합니다. 예: $("tr:eq(1)")
·:even은 0부터 계산하여 인덱스 값이 짝수인 모든 요소와 일치합니다. 예: $("tr:even")
·:first는 발견된 첫 번째 요소와 일치합니다. 예: $("tr:first")
·:gt(index)는 0부터 계산하여 지정된 인덱스 값보다 큰 모든 요소와 일치합니다. 예: $("tr:gt(0)")
·:last는 발견된 마지막 요소와 일치합니다. 예: $("tr:last")
·:lt(index)는 지정된 인덱스 값보다 작은 모든 요소와 일치합니다. 예: $("tr:lt(2)")
·:not(selector) 지정된 선택기와 일치하는 모든 요소를 ​​제거합니다. 예: $("input:not(:checked)")
·:odd는 0부터 계산하여 홀수 인덱스 값을 가진 모든 요소와 일치합니다. 예: $("tr:odd")