jQuery selectors_jquery의 종합 요약

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 코드:
$("양식 ~ 입력")

결과:
[