>웹 프론트엔드 >JS 튜토리얼 >jQuery selectors_jquery의 종합 요약

jQuery selectors_jquery의 종합 요약

WBOY
WBOY원래의
2016-05-16 17:05:22916검색

jQuery의 선택기는 매우 강력합니다. 다음은 일반적으로 사용되는 요소 검색 방법에 대한 간략한 요약입니다.

jQuery 선택기를 사용하면 페이지 요소를 더 쉽고 유연하게 얻을 수 있어 개발자의 스트레스가 크게 줄어듭니다. 건물을 짓는 것과 마찬가지로 벽돌과 타일이 없으면 건물을 지을 수 없습니다. 요소를 얻을 수 없다면 어떻게 다른 작업에 대해 이야기할 수 있나요? jQuery 선택자의 중요성을 알 수 있습니다. 물론 모든 선택자를 한꺼번에 익히는 것은 매우 어렵습니다. 이를 위해서는 연습과 축적이 필요합니다.

이제 공식적으로 jQuery 선택기 연구에 들어갑니다. jQuery 선택자를 분류하고 학습하며 jQuery 선택자를 다음과 같은 유형으로 나눕니다.

1. 기본 선택기

◦ id 요소 ID를 기준으로
을 선택합니다. ◦elementname 요소 이름을 기준으로
선택 ◦ classname 요소 CSS 클래스 이름을 기반으로

을 선택합니다.

예:

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

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

jQuery("#ID").val();
jQuery("a").text();
jQuery(".classname").val();

각 요소의 값을 얻을 수 있습니다. 위의 3개는 가장 일반적인 선택자이며, 그 중 ID 선택자가 가장 효율적이므로 가능할 때마다 사용해야 합니다.

2. 레벨 선택기

◦조상 후손 조상 및 후손 선택자
◦ parent > child 상위-하위 노드 선택기
◦ prev next 동일 레벨 선택기
◦ prev ~ siblings 필터 선택기

예:

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






1
2

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

//div에서 a 태그의 내용을 가져옵니다. 결과는 12
입니다. jQuery("#divTest a").text();
//div의 직계 자식 노드를 출력하고 결과는 투자입니다
jQuery("#divTest>input").val();
//next id를 가진 같은 레벨의 다음 요소를 출력하고 그 결과가 책임진다
jQuery("#다음 입력").val();
//위와 같고, 제목이 있는 요소입니다.
jQuery("#next~[제목]").val();

3. 기본 필터 선택기

◦:first 첫 번째 요소 찾기
◦:last 마지막 요소 찾기
◦:not(selector) 주어진 선택기와 일치하는 요소를 제거합니다
◦:even 0부터 계산하여 짝수 인덱스 값을 갖는 요소와 일치합니다
◦:odd 0부터 계산하여 홀수 인덱스 값을 갖는 요소와 일치
◦:eq(index) 0부터 시작하는 주어진 인덱스를 가진 요소와 일치
◦:gt(index) 주어진 인덱스 값보다 큰
요소와 일치합니다. ◦:lt(index) 주어진 인덱스 값보다 작은
요소와 일치합니다. ◦:header h1, h2, h3 등의 태그 선택(아직 사용되지 않음)
◦:animated 애니메이션 효과를 수행하는 요소와 일치합니다(아직 사용되지 않음)

예:

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



                                                                                                                                                                                                                                                           > > >            
    & Lt; 입력 유형 = "라디오" 값 = "학습하지 않음" /& gt;







코드 복사

코드는 다음과 같습니다. //첫 번째 li 콘텐츠는 투자로 이어집니다 jQuery("li:first").text(); //마지막 li 내용에는 책임이 따릅니다
jQuery("li:last").text();
//선택되지 않은 값을 입력했는데 결과가 학습되지 않습니다
jQuery("li 입력:not(:checked)").val();
//짝수인 li의 결과는 투자 성숙
jQuery("li:even").text();
//인덱스가 홀수인 li의 결과는 재무관리 책임입니다
jQuery("li:odd").text();
//지수가 2보다 큰 li의 내용은 책임이 됩니다
jQuery("li:gt(2)").text();
//지수가 1보다 작은 li의 내용은 투자로 이어집니다
jQuery("li:lt(1)").text();




4. 콘텐츠 필터
◦:contains(text) 주어진 텍스트를 포함하는 요소와 일치

◦:empty 하위 요소나 텍스트를 포함하지 않는 모든 빈 요소와 일치 ◦:has(selector) 선택기와 일치하는 요소와 일치

예:



코드 복사

코드는 다음과 같습니다.
    > > > > >

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

    //hyip이 포함된 li의 내용은 hyip 투자 hyip이 됩니다
    jQuery("li:contains('hyip')").text();
    //빈 li의 다음 li 내용이 재무관리 결과
    jQuery("li:empty li").text();
    //a 태그가 포함된 li의 내용이 투자로 이어집니다
    jQuery("li:has(a)").text();

    5. 가시성 필터

    ◦:hidden 보이지 않는 요소와 일치
    ◦:visible 보이는 요소와 일치

    예:

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


    • 표시

    • 보이지 않음


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

    //보이지 않는 li의 내용은 보이지 않음
    jQuery("li:hidden").text();
    //표시되는 li의 내용이 표시됩니다
    jQuery("li:visible").text();

    6. 속성 필터

    ◦[attribute=value] 속성이 주어진 값인 요소와 일치
    ◦[attribute^=value] 일치하는 속성은 주어진 값
    으로 시작하는 요소입니다. ◦[attribute$=value] 일치하는 속성은 주어진 값
    으로 끝나는 요소입니다. ◦[attribute*=value] 속성에 지정된 값이 포함된 요소와 일치합니다.

    예:

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




    //name은 hyipinvest의 값이고 결과는 hyipinvest입니다
    Alert(jQuery("input[name='hyipinvest']").val());
    //hyip으로 시작하는 이름의 값이 hyip 투자로 이어집니다
    Alert(jQuery("input[name^='hyip']").val());
    //이름이 hyip으로 끝나는 값은 투자 hyip이 됩니다
    Alert(jQuery("input[name$='hyip']").val());
    //name에는 oo 값이 포함되어 있습니다. 결과는 HYIP
    입니다. Alert(jQuery("input[name*='oo']").val());

    JQuery Selector는 기본적으로 학습 과정에서 접하게 되는데, 아직 요약하지 못한 부분이 몇 가지 있습니다. 어느 정도 연습을 하고 나면 누구나 jQuery 선택기를 능숙하게 사용할 수 있을 것이라고 믿습니다.

    $("#myELement") id 값이 myElement와 동일한 요소를 선택합니다. id 값은 반복될 수 없습니다. 문서에는 id 값 myElement가 하나만 있을 수 있으므로 얻는 것은
    뿐입니다. $("div") 모든 div 태그 요소를 선택하고 div 요소의 배열을 반환합니다.
    $(".myClass") myClass 클래스의 CSS를 사용하여 모든 요소 선택
    $("*") 문서의 모든 요소를 ​​선택합니다. 공동 선택을 위해 다양한 선택 방법을 사용할 수 있습니다. 예: $("#myELement,div,.myclass")

    계단식 선택기:
    $("form input") 양식 요소의 모든 입력 요소 선택
    $("#main > *") ID 값이 main인 모든 하위 요소를 선택합니다
    $("label input") 모든 레이블 요소 중 다음 입력 요소 노드를 선택합니다. 테스트 후 선택기는 모든 입력 레이블 요소 바로 뒤에 입력 레이블
    을 반환합니다. $("#prev ~ div") 형제 선택자, 이 선택자는 ID가 prev
    인 태그 요소의 동일한 상위 요소에 속하는 모든 div 태그를 반환합니다.
    기본 필터 선택기:
    $("tr:first") 모든 tr 요소 중 첫 번째 요소 선택
    $("tr:last") 모든 tr 요소 중 마지막 요소 선택
    $("input:not(:checked) 범위")

    필터링: 선택된 선택기의 모든 입력 요소

    $ ("TR: EVEN") 모든 TR 요소 중 0, 2, 4 ... ... Personal 요소를 선택합니다. (참고: 선택한 여러 요소는 선택 시 배열이므로 일련 번호는 0부터 시작합니다.) $("tr:odd") 모든 tr 요소 중 첫 번째, 세 번째, 다섯 번째... 요소 선택
    $("td:eq(2)") 모든 td 요소 중 일련번호 2를 갖는 td 요소를 선택합니다
    $("td:gt(4)") td 요소에서 4보다 큰 시퀀스 번호를 가진 모든 td 요소를 선택합니다
    $("td:ll(4)") td 요소에서 시퀀스 번호가 4보다 작은 모든 td 요소를 선택합니다.
    $(":헤더")
    $("div:애니메이션")

    콘텐츠 필터 선택기:


    $("div:contains('John')")은 div에서 John 텍스트를 포함하는 모든 요소를 ​​선택합니다
    $("td:empty") 비어 있는 모든 td 요소의 배열을 선택합니다(텍스트 노드 제외)
    $("div:has(p)") p 태그가 포함된 모든 div 요소 선택
    $("td:parent") td를 상위 노드로 사용하는 모든 요소 배열을 선택합니다.

    시각적 필터 선택기:


    $("div:hidden") 모든 숨겨진 div 요소 선택
    $("div:visible") 보이는 모든 div 요소 선택

    속성 필터 선택기:

    $("div[id]") id 속성을 포함하는 모든 div 요소 선택
    $("input[name='newsletter']") 이름 속성이 'newsletter'와 동일한 모든 입력 요소를 선택합니다.

    $("input[name!='newsletter']")는 이름 속성이 'newsletter'와 같지 않은 모든 입력 요소를 선택합니다.

    $("input[name^='news']") 이름 속성이 'news'로 시작하는 모든 입력 요소를 선택합니다.
    $("input[name$='news']") 이름 속성이 'news'로 끝나는 모든 입력 요소를 선택합니다.
    $("input[name*='man']") 이름 속성에 'news'가 포함된 모든 입력 요소를 선택하세요.

    $("input[id][name$='man']") 공동 선택을 위해 여러 속성을 사용할 수 있습니다. 이 선택기는 id 속성을 포함하는 모든 요소를 ​​가져오고 속성은 man
    으로 끝납니다.
    하위 요소 필터 선택기:

    $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n 1)")

    $("divspan:first-child") 모든 div 요소의 첫 번째 하위 노드 배열을 반환합니다.
    $("divspan:last-child") 모든 div 요소의 마지막 노드 배열을 반환합니다.
    $("div 버튼:only-child") 모든 div에 하위 노드가 하나만 있는 모든 하위 노드의 배열을 반환합니다.

    양식 요소 선택기:

    $(":input") 입력, 텍스트 영역, 선택 및 버튼을 포함한 모든 양식 입력 요소를 선택합니다

    $(":text") 모든 텍스트 입력 요소 선택
    $(":password") 모든 비밀번호 입력 요소 선택
    $(":radio") 모든 라디오 입력 요소 선택
    $(":checkbox") 모든 체크박스 입력 요소 선택
    $(":submit") 모든 제출 입력 요소 선택
    $(":image") 모든 이미지 입력 ​​요소 선택
    $(":reset") 모든 재설정 입력 요소 선택
    $(":button") 모든 버튼 입력 요소 선택
    $(":file") 모든 파일 입력 요소 선택
    $(":hidden") 숨겨진 유형인 양식의 모든 입력 요소 또는 숨겨진 필드를 선택합니다

    양식 요소 필터 선택기:

    $(":enabled") 작동 가능한 모든 양식 요소 선택
    $(":disabled") 작동할 수 없는 모든 양식 요소 선택
    $(":checked") 체크된 양식 요소 모두 선택
    $("select option:selected")는 select
    의 하위 요소 중에서 선택된 모든 요소를 ​​선택합니다.

    "S_03_22"라는 입력 텍스트 상자의 이전 td의 텍스트 값을 선택하세요.
    $("입력[@ 이름 =S_03_22]").parent().prev().text()

    이름은 "S_"로 시작하고 "_R"로 끝나지 않습니다.
    $("input[@ name ^='S_']").not("[@ name $='_R']")

    radio_01이라는 라디오가 선택한 값
    $("input[@ name =radio_01][@checked]").val()


    $("A B")는 간접 하위 노드를 포함하여 A 요소 아래의 모든 하위 노드를 찾습니다.
    $("A>B")는 A 요소 아래에서 직접 하위 노드를 찾습니다.
    $("A B")는 간접 하위 노드를 포함하여 A 요소 뒤에 있는 형제 노드를 찾습니다.
    $("A~B")는 간접 자식 노드를 제외하고 A 요소 뒤에 있는 형제 노드를 찾습니다.

    1. $("A B")는 간접 하위 노드를 포함하여 A 요소 아래의 모든 하위 노드를 찾습니다.

    예:
    형식의 모든 입력 요소를 찾습니다.
    HTML 코드:

    <레이블>이름: <입력 이름="이름" /> <필드세트> <레이블>뉴스레터: <입력 이름="뉴스레터" /> <입력 이름="없음" />
    jQuery 코드:
    $("양식 입력")

    결과:
    [ , ]

    2. $("A>B")는 A 요소 아래에서 직접 하위 노드를 찾습니다.

    예: 양식의 모든 하위 입력 요소를 일치시킵니다.

    HTML 코드:


    <레이블>이름: <입력 이름="이름" /> <필드세트> <레이블>뉴스레터: <입력 이름="뉴스레터" /> <입력 이름="없음" />
    jQuery 코드:
    $("양식 > 입력")

    결과:
    [ <입력 이름="이름" /> ]

    3. $("A B")는 간접 하위 노드를 포함하여 A 요소 뒤에 있는 형제 노드를 찾습니다.

    예: 라벨 다음의 모든 입력 요소 일치

    HTML 코드:

    <레이블>이름: <입력 이름="이름" /> <필드세트> <레이블>뉴스레터: <입력 이름="뉴스레터" /> <입력 이름="없음" />
    jQuery 코드:
    $("라벨 입력")

    결과:
    [ , ]

    4. $("A~B")는 간접 자식 노드를 제외하고 A 요소 뒤에 있는 형제 노드를 찾습니다.

    예:
    형식의 형제인 모든 입력 요소를 찾습니다.

    HTML 코드:


    <레이블>이름: <입력 이름="이름" /> <필드세트> <레이블>뉴스레터: <입력 이름="뉴스레터" /> <입력 이름="없음" />
    jQuery 코드:
    $("양식 ~ 입력")

    결과:
    [ <입력 이름="없음" />

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.