웹 애플리케이션에서 대부분의 클라이언트 측 작업은 객체 작업을 기반으로 합니다. 객체를 작동하려면 먼저 객체를 가져와야 합니다. jQuery는 객체를 얻을 수 있는 강력한 선택기를 제공합니다. jQuery 선택기는 선택 개체와 필터 조건의 두 부분으로 나뉩니다. 객체를 선택한다는 것은 어떤 객체를 획득할지를 의미하며, 필터링 조건은 획득한 객체를 필터링하여 최종적으로 특정 특성을 만족하는 객체를 남기는 것입니다.
1. 객체 선택
1).Basic
·#id는 주어진 ID를 기준으로 요소와 일치합니다. 예: $("#id")
·element는 주어진 요소 이름을 기반으로 모든 요소와 일치합니다. 예: $("p")
·.class는 지정된 클래스를 기반으로 요소와 일치합니다. 예: $(".style1");
·*은 모든 요소와 일치합니다. 예: $("*")
·selector1,selector2,selectorN은 각 선택기와 일치하는 요소를 결합하여 함께 반환합니다. 예: $("#id,p,.style1")
2).Form
·:button은 모든 버튼과 일치합니다. 예: $(":button")
·:checkbox는 모든 checkboxes와 일치합니다. 예: $(":checkbox")
·:file은 모든 파일 필드와 일치합니다. 예: $(":file")
·:hidden은 모든 보이지 않는 요소 또는 숨겨진 유형의 요소와 일치합니다. 예: $("input:hidden")
·:image는 모든 이미지 필드와 일치합니다. 예: $(":image")
·:input은 모든 입력, 텍스트 영역, 선택 및 버튼 요소와 일치합니다. 예: $(":input")
·:password는 모든 password 상자와 일치합니다. 예: $(":password")
·:radio는 모든 라디오 버튼과 일치합니다. 예: $(":radio")
·:reset은 모든 재설정 버튼과 일치합니다. 예: $(":reset")
·:submit은 모든 제출 버튼과 일치합니다. 예: $(":submit")
·:text는 모든 한 줄 텍스트 상자와 일치합니다. 예: $(":text")
·:header는 h1, h2, h3과 같은 헤더 요소와 일치합니다. 예: $(":header").css("Background", "#EEE");
2.Filter Conditions
1).AttributeFilter
·[attribute*=value] 일치 주어진 속성은 특정 값을 포함하는 요소입니다. 예: $("input[name*='man'")
·[attribute!=value]는 지정된 속성을 포함하는 모든 요소와 일치하지만 속성은 특정 값과 동일하지 않습니다. 예: $(input[name!='man');
·[attribute$=value]는 지정된 속성이 특정 값으로 끝나는 요소와 일치합니다. 예: $("input[name$='man']")
·[attribute=value]는 지정된 속성이 특정 값인 요소와 일치합니다. 예: $("input[name='man']");
·[attribute]는 지정된 속성을 포함하는 요소와 일치합니다. 예: $("p[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는 선택한 모든 옵션 요소와 일치합니다. 예: $("select option:selected")
2) 콘텐츠 필터링
·:contains(text)는 지정된 텍스트를 포함하는 요소와 일치합니다. 예: $("p:contains('John')")
·:empty는 하위 요소나 텍스트를 포함하지 않는 모든 빈 요소와 일치합니다. 예: $("td:empty")
·:has(selector)는 선택기와 일치하는 요소를 포함하는 요소와 일치합니다. 예: $("p:has(p)");
·:parent는 하위 요소나 텍스트를 포함하는 요소와 일치합니다. 예: $("td:parent")
3) 계층적 필터링
·ancestor 자손은 해당 조상 요소 아래의 모든 자손 요소와 일치합니다. 예: $("form input")
·parent > child는 지정된 상위 요소 아래의 모든 하위 요소와 일치합니다. 예: $("form > input")
·prev + next는 이전 요소 바로 다음의 모든 다음 요소와 일치합니다. 예: $("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는 애니메이션 효과를 수행하는 모든 요소와 일치합니다. 예: $("p: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")
jQuery
1.add()
에서 필터링하는 방법 요약은 각각 두 표현식과 일치하는 요소의 결과 집합을 연결하는 데 사용됩니다.
[JavaScript] view plaincopy
1. $("p").add("div");
p와 div를 일치시킵니다. 즉, p와 div를 모두 찾아 일치하는 요소에 넣습니다.
[javascript] view plaincopy
1.$("p div")
는 동일한 기능을 수행합니다.
2.andself()
필터링되거나 검색된 요소의 경우 이전에 선택한 요소를 추가합니다.
[javascript] view plaincopy
1.$("div").find("span").andself().addClass("test")
3.end()
최신 항목으로 돌아가기 one "파괴적" 작업 전에 일치하는 요소 목록이 이전 일치 상태로 변경됩니다.
소위 "파괴적" 작업은 find, add, children, not, prev 등과 같이 획득된 jQuery 요소에 대한 추가 일치를 의미합니다.
4.filter()
매개변수가 하나 이상의 표현식인 경우 필터링에 사용됩니다.
매개변수가 함수인 경우 false로 반환된 요소는 삭제되고, 그렇지 않으면 유지됩니다.
[javascript] view plaincopy
1. $("p").filter(function(){
2. return $("ol",this).length==0;
3. });
얻어진 것은
에 ol을 포함하지 않는 요소입니다.
5.map()
요소 집합을 다른 배열로 변환합니다.
1. $("p").append($("input").map(function(){
2. return $(this).value();
3. }).get() .join(","));
은 모든 입력 태그의 값을 ","로 연결된 문자열으로 구성하고 이를
요소에 추가합니다.
6.children()
하위 요소의 하위 요소에 관계없이 일치하는 요소 집합에 있는 각 요소의 모든 하위 요소를 포함하는 요소 집합을 가져옵니다.
7.closest() 및 부모님()
요소 일치 시작 현재 요소가 일치하기 시작합니다. > 먼저, 일치하는 요소가 포함된 컬렉션을 가져옵니다. 형제 요소 바로 뒤에 옵니다. 둘째, 현재 일치하는 요소 뒤에 있는 모든 형제 요소를 가져옵니다. 세 번째는 전달된 매개변수를 만날 때까지 현재 요소 뒤의 모든 형제 요소를 검색하는 것입니다. 9.parent()일치하는 모든 요소의 고유한 상위 요소를 포함하는 요소 집합을 가져옵니다.
10.prev(), prevAll() 및 prevUntil()은 next와 동일하지만 이전 요소만 가져옵니다. 11.siblings()자신을 제외하고 선택한 요소의 모든 형제 요소 집합을 가져옵니다. 그러나 andself() 메소드를 추가하면 자신과 동료를 얻을 수 있습니다.
위 내용은 Jquery 필터 인스턴스 사용량 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
