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 필터 선택기
예:
//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;
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. 콘텐츠 필터
◦: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 요소 아래에서 직접 하위 노드를 찾습니다.
예: 양식의 모든 하위 입력 요소를 일치시킵니다.
<레이블>이름:레이블>
<입력 이름="이름" />
<필드세트>
<레이블>뉴스레터:레이블>
<입력 이름="뉴스레터" />
필드세트>
양식>
<입력 이름="없음" />
jQuery 코드:
$("양식 > 입력")
결과:
[ <입력 이름="이름" /> ]
3. $("A B")는 간접 하위 노드를 포함하여 A 요소 뒤에 있는 형제 노드를 찾습니다.
예: 라벨 다음의 모든 입력 요소 일치
HTML 코드:
<레이블>이름:레이블>
<입력 이름="이름" />
<필드세트>
<레이블>뉴스레터:레이블>
<입력 이름="뉴스레터" />
필드세트>
양식>
<입력 이름="없음" />
jQuery 코드:
$("라벨 입력")
결과:
[ , ]
4. $("A~B")는 간접 자식 노드를 제외하고 A 요소 뒤에 있는 형제 노드를 찾습니다.
예:
형식의 형제인 모든 입력 요소를 찾습니다.
<레이블>이름:레이블>
<입력 이름="이름" />
<필드세트>
<레이블>뉴스레터:레이블>
<입력 이름="뉴스레터" />
필드세트>
양식>
<입력 이름="없음" />
jQuery 코드:
$("양식 ~ 입력")
결과:
[ <입력 이름="없음" />

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 jQuery는 웹 사이트 개발에 널리 사용되는 JavaScript 라이브러리로, JavaScript 프로그래밍을 단순화하고 개발자에게 풍부한 기능을 제공합니다. 이 기사에서는 jQuery의 참조 방법을 자세히 소개하고 독자가 빠르게 시작할 수 있도록 구체적인 코드 예제를 제공합니다. jQuery 소개 먼저 HTML 파일에 jQuery 라이브러리를 도입해야 합니다. CDN 링크를 통해 소개하거나 다운로드할 수 있습니다.

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? 프런트엔드 개발에서는 요소의 높이 속성을 조작해야 하는 경우가 종종 있습니다. 때로는 요소의 높이를 동적으로 변경해야 할 수도 있고 요소의 높이 속성을 제거해야 하는 경우도 있습니다. 이 기사에서는 jQuery를 사용하여 요소의 높이 속성을 제거하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. jQuery를 사용하여 높이 속성을 연산하기 전에 먼저 CSS의 높이 속성을 이해해야 합니다. height 속성은 요소의 높이를 설정하는 데 사용됩니다.

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. <

제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.

jQuery는 웹 페이지에서 DOM 조작 및 이벤트 처리를 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에서 요소를 선택하는 데 사용됩니다. 구체적인 사용 및 적용 시나리오는 다음과 같습니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에 있는 요소를 선택합니다. 인덱스 위치는 0부터 계산되기 시작합니다. 즉, 첫 번째 요소의 인덱스는 0이고 두 번째 요소의 인덱스는 1입니다. eq() 메소드의 구문은 다음과 같습니다: $("s

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery를 사용하여 DOM 요소를 조작할 때 요소에 특정 속성이 있는지 확인해야 하는 상황이 자주 발생합니다. 이 경우 jQuery에서 제공하는 메소드를 사용하여 이 기능을 쉽게 구현할 수 있습니다. 다음은 jQuery 요소에 특정 속성이 있는지 확인하기 위해 일반적으로 사용되는 두 가지 방법을 특정 코드 예제와 함께 소개합니다. 방법 1: attr() 메서드와 typeof 연산자를 // 사용하여 요소에 특정 속성이 있는지 확인

目录1:basename()2:copy()3:dirname()4:disk_free_space()5:disk_total_space()6:file_exists()7:file_get_contents()8:file_put_contents()9:filesize()10:filetype( )11:glob()12:is_dir()13:is_writable()14:mkdir()15:move_uploaded_file()16:parse_ini_file()17:
