JQuery 선택기 및 필터 organization_jquery

밤새 검색하고 정렬한 끝에 마침내 가장 포괄적인 JQuery 필터 선택 방법 세트로 간주되어야 하는 것을 생각해냈습니다. 모든 코드가 테스트되었습니다.

첫 번째 HTML 코드

코드 복사 코드는 다음과 같습니다.

HTML 코드

머리>

        
        
        

        
        
        

       
        



        
        
        
        

        
        
​ ​
        

        
        



        

옵션1
옵션2
옵션3
선택>

        
        

테이블>
양식>

안녕하세요!

본문>

JS 코드

1.DOM 객체와 JQuery 패키징 세트

1. document.getElementById(), document.getElementsByName() 등을 통해 얻는 것은 DOM 객체 또는 DOM 객체 세트입니다. 전자는 객체를 가져오고 후자는 DOM 객체 세트를 가져옵니다

코드 복사 코드는 다음과 같습니다.

var text11_dom=document.getElementById("text11");
var text11_dom=document.getElementsByName("text11")[0];
var text11_dom=document.all.text11;//여기서 text11은 이름 값 또는 ID 값일 수 있습니다
var text11_dom=document.all[10];

2. JQuery에서 제공하는 기능을 사용하려면 먼저 JQuery 패키징 세트를 구성해야 합니다. $()를 통해 반환되는 것은 JQuery 패키징 세트입니다.

코드 복사 코드는 다음과 같습니다.

var text11_jquery=$("#text11");

2. JQuery 패키징 세트와 DOM 개체를 서로 변환합니다.

1. DOM 객체는 JQuery 속성 메서드를 사용할 수 없지만 $()를 통해 DOM 객체를 JQuery 래퍼 세트로 변환할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var text11_dom=document.getElementById("text11");
var text11_jquery=$(text11_dom);

2. JQuery 래퍼 세트는 .length와 같은 일부 DOM 개체의 속성 메서드를 사용할 수 있지만 .value와 같이 사용할 수 없는 일부 속성 메서드도 대괄호와 인덱스를 추가하여 얻을 수 있습니다. JQuery 래퍼 세트 이후의 값

코드 복사 코드는 다음과 같습니다.

var text11_dom=$("#text11")[0];

3. 이는 각 루프 동안이나 이벤트가 트리거될 때 DOM 객체이기도 합니다

코드 복사 코드는 다음과 같습니다.

$("#text11").click(function(){
var text11_dom_value=this.value;
경고(text11_dom_value);
});

3. $ 기호는 JQuery의 JQuery 객체에 대한 참조를 나타냅니다.

1.jQuery(html[,ownerDocument]): HTML 원본 문자열을 기반으로 Dom 요소를 동적으로 생성

코드 복사 코드는 다음과 같습니다.

$("

안녕하세요!

").appendTo("body");

2.jQuery ( 요소 ): 하나 이상의 Dom 객체를 jQuery 패키징 세트로 캡슐화합니다. 이는 위의 DOM 객체와 JQuery 패키징 세트 간의 변환입니다.

3.jQuery( 콜백 ): $(document).ready()의 약어

코드 복사 코드는 다음과 같습니다.

$(함수(){
Alert("안녕하세요!");
});

4.JQuery(selector[,context]): 지정된 범위 내에서 조건을 만족하는 JQuery 패키징 세트를 검색합니다. Context는 검색 범위입니다. Context는 DOM 객체 세트 또는 JQuery 패키징 세트일 수 있습니다
모든 tr 태그에서 ID가 text11인 요소에 대한 JQuery 래퍼 세트
를 찾습니다.

코드 복사 코드는 다음과 같습니다.

var text11_query=$("#text11","tr");

==================jQuery 선택기===================

1. 기본 선택기 기본

1. 태그 이름을 기준으로 선택

코드 복사 코드는 다음과 같습니다.

var input_query=$("입력");

2. ID 값을 기준으로
선택

코드 복사 코드는 다음과 같습니다.

var text11_query=$("#text11");

3. 수업 가치에 따라 선택

코드 복사 코드는 다음과 같습니다.

var text11_query=$(".text11");

4. 조건을 만족하는 여러 JQuery 패키징 세트를 동시에 선택하세요.

코드 복사 코드는 다음과 같습니다.

var text_query=$("#text11,.text12");

5. 모든 DOM 요소 선택

코드 복사 코드는 다음과 같습니다.

var all_query=$("*");

2. 계층

1. 모든 tr 태그에서 아래에 ID 값이 text11인 모든 요소를 ​​가져옵니다.

코드 복사 코드는 다음과 같습니다.

var text11_query=$("tr #text11");

2. 모든 td 태그 아래의 모든 직접 입력 하위 요소
를 가져옵니다.

코드 복사 코드는 다음과 같습니다.

var input_query=$("td>input");

3. ID가 text11인 요소 뒤에 있는 버튼11 클래스 요소를 가져오고 조건을 충족하는 요소 하나만 가져옵니다. text11과 버튼11은 같은 레벨에 있습니다

코드 복사 코드는 다음과 같습니다.

var 버튼11_query=$("#text11 .button11");

4. ID가 text11
인 요소 뒤에 있는 버튼11 클래스를 가진 모든 요소를 ​​가져옵니다.

코드 복사 코드는 다음과 같습니다.

var 버튼11_query=$("#text11~.button11");

3. 기본 필터

1. 첫 번째 입력 요소 가져오기

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:first");

2. 마지막 입력 요소 가져오기

코드 복사 코드는 다음과 같습니다.

var input_query=$("입력:마지막");

3. 선택되지 않은 모든 입력 요소 가져오기

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:not(:checked)");

4. 첫 번째 입력 요소를 1로 세고 홀수 번째 입력 요소를 모두 찾습니다

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:even");

5. 두 번째 입력부터 짝수 입력 요소를 모두 찾습니다

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:odd");

6. 인덱스가 1인 입력 요소를 찾고, 인덱스 값은 0부터 시작합니다

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:eq(1)");

7. 인덱스가 0보다 큰 모든 입력 요소를 찾습니다

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:gt(0)");

8. 인덱스가 2보다 작은 입력 요소를 모두 찾습니다

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:lt(2)");

9. 페이지의 모든제목 요소
를 가져옵니다.

코드 복사 코드는 다음과 같습니다.

var h_query=$(":header");

10. 애니메이션 효과를 실행하는 모든 요소를 ​​가져옵니다

코드 복사 코드는 다음과 같습니다.

var animation_query=$(":animated");

4. 콘텐츠 필터

1. 모든 HTML 콘텐츠에서 "Hello World!"를 포함하는 모든 h1 요소를 찾습니다.

코드 복사 코드는 다음과 같습니다.

var h1_query=$("h1:contains('Hello world!')");

2. 하위 태그가 없거나 빈 HTML 콘텐츠가 있는 모든 td 요소
를 가져옵니다.

코드 복사 코드는 다음과 같습니다.

var td_query=$("td:empty");

3. 입력 하위 요소가 포함된 모든 td 요소를 찾습니다.

코드 복사 코드는 다음과 같습니다.

var td_query=$("td:has(입력)");

4. 하위 태그를 포함하거나 HTML 콘텐츠를 포함하는 모든 td 요소를 찾습니다.

코드 복사 코드는 다음과 같습니다.

var td_query=$("td:parent");

5. 가시성 필터 가시성 필터

1. 숨겨진 입력 요소를 모두 찾습니다

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:hidden");

2. 표시되는 모든 입력 요소 찾기

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:visible");

6. 속성 필터
1. id 속성이 포함된 모든 입력 요소를 찾습니다

코드 복사 코드는 다음과 같습니다.

var input_query=$("입력[id]");

2. 이름 값이 text11
인 입력 요소를 찾습니다.

코드 복사 코드는 다음과 같습니다.

var input_query=$("input[name='text11']");

3. 이름 값이 text11
과 같지 않은 모든 입력 요소를 찾습니다.

코드 복사 코드는 다음과 같습니다.

var input_query=$("input[name!='text11']");

4. 이름 값이 텍스트
로 시작하는 입력 요소를 찾습니다.

코드 복사 코드는 다음과 같습니다.

var input_query=$("input[name^='text']");

5. 이름 값이 11
으로 끝나는 모든 입력 요소를 찾습니다.

코드 복사 코드는 다음과 같습니다.

var input_query=$("input[name$='11']");

6. 이름 값에 ext
가 포함된 모든 입력 요소를 찾습니다.

코드 복사 코드는 다음과 같습니다.

var input_query=$("input[name*='ext']");

7. id 속성을 포함하고 name 값에 ext
가 포함된 모든 입력 요소를 찾습니다.

코드 복사 코드는 다음과 같습니다.

var input_query=$("input[id][name*='ext']");

7. 어린이 필터

1. 상위 요소의 모든 하위 요소 중 두 번째 입력 요소를 모두 찾습니다
nth-child()의 매개변수는 선택사항입니다. 여기서 짝수는 짝수로 계산되고, 홀수는 홀수로 계산됩니다. n의 숫자는 상위 요소가 있는 모든 입력 요소가 입력 요소를 직접 선택함을 의미합니다. 입력 요소가 1위로 계산됩니다

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:nth-child(2)");

2. 상위 요소의 모든 하위 요소 중 순위가 가장 높은 모든 입력 요소를 찾습니다

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:first-child");

3. 상위 요소의 모든 하위 요소 중 마지막 입력 요소를 모두 찾습니다

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:last-child");

4. 상위 요소에서 유일한 하위 요소인 입력 요소를 모두 찾습니다

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:only-child");

8. 양식 선택기 양식

1. 모든 입력 요소 찾기

코드 복사 코드는 다음과 같습니다.

var input_query=$(":input");

2. 모든 텍스트 상자 요소 찾기

코드 복사 코드는 다음과 같습니다.

var text_query=$(":text");

3. 모든 비밀번호 상자 요소 찾기

코드 복사 코드는 다음과 같습니다.

var 비밀번호_쿼리=$(":password");

4. 모든 체크박스 찾기

코드 복사 코드는 다음과 같습니다.

var checkbox_query=$(":checkbox");

5. 모든 제출 버튼 요소 찾기

코드 복사 코드는 다음과 같습니다.

var submit_query=$(":submit");

6. 모든 이미지 도메인 요소 찾기

코드 복사 코드는 다음과 같습니다.

var image_query=$(":image");

7. 모든 재설정 버튼 요소 찾기

코드 복사 코드는 다음과 같습니다.

var Reset_query=$(":reset");

8. 모든 버튼 요소 찾기

코드 복사 코드는 다음과 같습니다.

var 버튼_쿼리=$(":버튼");

9. 모든 파일 필드 요소 찾기

코드 복사 코드는 다음과 같습니다.

var file_query=$(":file");

9. 양식 필터

1. 사용 가능한 모든 입력 요소를 찾습니다

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:enabled");

2. 사용할 수 없는 모든 입력 요소 찾기

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:disabled");

3. 선택한 라디오 체크박스 모두 찾기

코드 복사 코드는 다음과 같습니다.

var input_query=$("input:checked");

4. 선택한 모든 드롭다운 상자 찾기

코드 복사 코드는 다음과 같습니다.

var option_query=$("옵션:선택됨");