집 > 기사 > 웹 프론트엔드 > jquery 선택기 백과사전 jquery selector_jquery에 대한 포괄적이고 자세한 설명

jquery 선택기 백과사전 jquery selector_jquery에 대한 포괄적이고 자세한 설명

WBOY원래의: 2016-05-16 16:56:391317검색

선택기에는 고정된 정의가 없습니다. 어느 정도 jQuery의 선택기는 스타일 시트의 선택기와 매우 유사합니다. 선택자의 특징은 다음과 같습니다.
1. 코드 작성을 단순화
2. 암시적 반복
3. 객체가 존재하는지 판단할 필요가 없습니다
여기서 "$"는 선택기의 필수 부분입니다. jQuery 라이브러리에서 $는 $("#foo") 및 jQuery("와 같이 jQuery의 약어입니다. #foo") 마찬가지로 $.ajax와 jQuery.ajax는 동일합니다. 특별한 지시사항이 없다면 프로그램 내 $ 기호는 jQuery의 약어로 이해하시면 됩니다.
이제 공식적으로 jQuery 선택기 연구에 들어갑니다. 선택자는 기능적 습관에 따라 분류됩니다. 다양한 유형의 분류자가 아래에 분류되어 독자가 이를 익힐 수 있도록 각각 설명됩니다.
1. 기본 선택기
기본 선택기에는 #id, element, .class, * 및 selectorl, selector2.selectorN 5가지 유형이 아래에 예시로 소개됩니다. 선택자의 역할과 사용 방법.
1． #id 선택기
#id 선택기는 주어진 ID를 기반으로 요소와 일치합니다. 선택기에 특수 문자가 포함된 경우 두 개의 슬래시로 이스케이프할 수 있으며 반환 값은 Array입니다.
2． 요소 선택자
요소 선택자는 검색에 사용되는 요소입니다. DOM 노드를 가리키는 태그 이름입니다. 그 반환 값은 Array입니다.
3． 클래스 선택자
클래스 선택자는 해당 클래스를 기준으로 요소를 일치시켜 검색할 클래스입니다. 요소는 여러 클래스를 가질 수 있습니다. 일치하는 항목이 하나만 있으면 일치할 수 있습니다. 반환 값은 Array입니다.

예:

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

< ;input type="text" id="ID" value="ID 기준으로 선택" />
요소 이름 기준으로 선택

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

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

4. *선택기
* 선택기는 대부분 컨텍스트에서 검색하고 모든 요소를 일치시키는 데 사용됩니다. 그 반환 값은 Array입니다.
5． selector1, selector2, selectorN 선택기
각 선택기와 일치하는 요소를 결합하여 함께 반환하는 유형의 선택기입니다. 원하는 수의 선택기를 지정하고 일치하는 요소를 하나의 결과로 병합할 수 있습니다. 반환 값은 Array입니다. 다음 예에서는 선택한 항목에 대해 CSS 작업을 수행함으로써 독자가 selector1, selector2, selectorN의 기능을 명확하게 이해할 수 있습니다.
2. 레벨 선택기
레벨 선택기에는 상위, 하위, 상위 > 하위, 이전 ~ 형제 등 5가지 형식이 있습니다. 다음에서는 예제를 사용하여 각 선택기의 역할과 사용법을 자세히 소개합니다.
1． 조상 자손 선택자
는 주어진 조상 요소 아래의 모든 자손 요소를 일치시키는 것을 의미하며 매개 변수로서의 조상은 유효한 선택자를 나타내고, 자손은 요소를 일치시키는 데 사용되는 선택자이며 첫 번째 선택자의 자손입니다. . 반환 값은 Array입니다.
2． parent>child 선택기
parent>child 선택기는 지정된 상위 요소 아래의 모든 하위 요소를 일치시키는 것을 의미합니다. 두 매개변수의 의미는 다음과 같습니다. 부모는 유효한 선택기를 나타내며, 자식은 요소를 일치시키는 데 사용되는 선택기이며 첫 번째 선택기의 자식 요소입니다. 그 반환 값은 Array입니다.
3． prev next 선택기
이 유형의 선택기는 prev 요소 바로 다음에 오는 모든 다음 요소를 일치시키는 데 사용됩니다. 두 매개변수의 의미는 다음과 같습니다. prev는 유효한 선택기를 나타내고, next는 첫 번째 선택기 바로 다음에 오는 유효한 선택기를 나타냅니다. 그 반환 값은 Array입니다.
4. prev ~ siblings 선택기
prev ~ siblings 선택기는 prev 요소를 일치시킨 후 모든 siblings 요소를 나타냅니다. 두 매개변수의 의미는 다음과 같습니다. prev는 유효한 선택기를 나타내며, siblings는 선택기를 나타내며 첫 번째 선택기의 형제 역할을 합니다. 그 반환 값은 Array입니다.

예:

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

" />
<1
> ;

//div에서 a 태그 콘텐츠를 가져온 결과는 12
jQuery(" #divTest a").text();
//출력 div 직접 하위 노드 결과는 투자
jQuery("#divTest>input").val();
//출력 ID는 다음입니다. 동일한 수준의 후자 요소의 결과는 Responsibility
jQuery(" #next input").val();
//위와 같고, title이 있는 요소의 결과는 Study
jQuery("#next~[ title]").val();

3. 필터 선택기

필터 선택기는 주로 특정 필터링 규칙과 CSS를 통해 필요한 DOM 요소를 필터링합니다. 의 의사 클래스 선택기 구문은 동일합니다. 선택자는 모두 콜론으로 시작합니다. 필터 선택기는 총 6가지 종류로 많은 내용을 담고 있지만 분류가 가능합니다. 아래에서는 다양한 유형의 선택기에 대해 자세히 설명합니다.
1． 기본 필터 선택기

기본 필터 선택기는 가장 일반적으로 사용되는 필터 선택기 유형으로 주로 다음과 같은 형식을 포함하며 여기에 자세히 설명되어 있습니다. (1): 첫 번째/: 마지막 선택기.
(2):선택자가 아닙니다. (3):짝수 및 :홀수 선택기.
(4):eq:gt, :lt, 선택기.
(5): 헤더 선택기.
(6):애니메이션 선택기.
예:

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

& lt; li & gt;

 & lt; /li> 
 & li gt; 성숙함 & lt;/lt;/lt;/lt;/lt;/lt; < " 학습하지 않음" />
  🎜>

//첫 번째 li 콘텐츠 결과는 투자
jQuery("li:first").text() ;
//마지막 li 콘텐츠의 결과는 책임
jQuery("li:last").text();
//선택되지 않은 값을 입력한 결과가 학습되지 않습니다
jQuery(" li input: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();

2. 콘텐츠 필터링 선택기

콘텐츠 필터링 선택기에는 주로 contain, :empty, :has, :parent 등 4가지 유형의 필터가 포함되어 있습니다. 필터의 이 부분은 기본 필터링을 보완합니다. 위에서 소개한 선택자는 또한 페이지 선택, 요소 표시 설정 등에 중요한 역할을 합니다. 각 선택기에 대해서는 아래에서 자세히 소개하겠습니다.
(1):선택기가 포함되어 있습니다.
(2):선택자가 비어 있습니다.
(3):선택기가 있습니다.

(4): 상위 선택자.
예:

코드 복사

코드는 다음과 같습니다.

" > 🎜>//hyip이 포함된 li 내용의 결과는 hyip 투자입니다j Query("li:contains('hyip')").text(); //내용은 빈 li의 다음 li입니다. 내용 결과는 재무 관리입니다.jQuery("li:empty li").text();//다음 내용을 포함하는 li의 내용 결과입니다. 태그는 투자입니다

jQuery("li:has(a)") .text();

3． 가시성 필터 선택기
가시성 필터 선택기는 비교적 간단합니다. 여기에는 주로 모든 보이는 요소와 보이지 않는 요소를 일치시키는 데 사용되는 두 개의 선택기가 포함되어 있습니다. 이 두 선택기에 대해서는 아래에서 자세히 소개하겠습니다.
(1):숨겨진 선택자.
(2):표시되는 선택기.

예:

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

Visible

Invisible


//Invisible li 내용 결과가 보이지 않음
jQuery("li:hidden").text();
//표시된 li의 내용 결과가 표시됨
jQuery("li:visible").text() ;

4. 속성 필터 선택기
속성 필터 선택기는 주어진 속성을 포함하는 요소를 일치시키는 데 사용됩니다. 물론 이 속성을 포함하지 않는 요소도 일치시킬 수 있습니다. 속성 필터 선택기에는 다음 7개의 선택기가 포함되어 있습니다.
(1) [속성] 선택자.
(2) [속성=값], [속성!=값] 선택기(여기에는 두 가지 유형이 포함됩니다).
(3) [속성^=값], [속성$=값], [속성*=값] 선택기(여기에는 세 가지 유형이 포함되어 있습니다).
(4)[선택기][선택기2] 선택기.
예:

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

<입력 유형 ="text " name="hyipinvest" value="hyip 투자" />

<입력 유형 ="text " name="google" value="HYIP" />
//name의 값은 hyipinvest이고 결과는 hyip 투자입니다
alert(jQuery("input[name='hyipinvest'] ").val() );
//hyip으로 시작하는 name 값은 hyip 투자로 이어집니다
alert(jQuery("input[name^='hyip']").val());
//hyip으로 시작하는 이름 최종 값 결과는 투자 hyip
alert(jQuery("input[name$='hyip']").val());
//다음을 포함하는 이름의 값 oo는 HYIP
alert( jQuery("input[name*='oo']").val());

5입니다. 하위 요소 필터 선택기
html은 레이어별로 중첩된 태그로 구성됩니다. 일부 태그는 별도로 처리해야 하므로 하나 또는 일부 특정 중첩 태그를 선택하는 방법이 프로그램에서 문제가 됩니다. jQuery는 이 문제를 해결하기 위해 하위 요소 필터 선택기를 제공합니다. 여기에는 4개의 선택기가 포함되어 있으며, 구체적인 내용은 아래에서 자세히 설명합니다.
(1):n번째 하위 선택자.
(2):first-child, :last-child 선택자(두 가지 유형).
(3): 외동 선택자.
6． 양식 객체 속성 필터 선택기
이 부분은 매우 간단하며 4가지 유형의 선택기만 포함되어 있습니다. 이러한 선택기는 사용 가능한 요소 또는 사용할 수 없는 요소, 선택한 요소 등을 일치시키는 데 사용됩니다. 이 부분의 내용은 아래에서 예시를 들어 설명하겠습니다.
(1):활성화, :비활성화 선택기.
(2):선택기를 선택했습니다.
(3):선택된 선택기.
양식 필터 선택기는 HTML에서 양식을 처리하는 데 사용되는 선택기입니다. 자주 사용하는 버튼, 텍스트 필드, 라디오 버튼, 확인란 등을 포함할 뿐만 아니라 거의 사용하지 않는 이미지, 도메인 숨기기, 파일 업로드 등도 포함합니다. 등 태그. 이러한 선택기에 대해서는 아래에서 자세히 소개하겠습니다.
(1): 입력 선택기.
(2):텍스트, :비밀번호 선택기.
(3):라디오, :체크박스 선택기.
(4):제출, :이미지, :재설정, :버튼, :파일 선택기.
(5):숨겨진 선택자.

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

성명：

이전 기사：동일한 name_javascript 기술을 사용하는 js 함수 이름과 양식 요소 간의 충돌 문제다음 기사：동일한 name_javascript 기술을 사용하는 js 함수 이름과 양식 요소 간의 충돌 문제

jquery 선택기 백과사전 jquery selector_jquery에 대한 포괄적이고 자세한 설명

관련 기사