JavaScript 프레임워크: jQuery 선택기 숙달 튜토리얼

jQuery는 다른 라이브러리에 비해 시작하기 쉽고 배우기 쉽지만 완전히 익히기는 쉽지 않습니다. 여기에는 웹 개발의 모든 측면이 포함되므로 수천 가지 방법과 내부 변형이 제공됩니다. 초보자들은 시작하기는 쉽지만 개선하기는 어렵다고 느끼는 경우가 많습니다. 이 글의 목적은 jQuery 선택기를 체계적으로 정리하고, jQuery의 디자인 아이디어를 명확히 하고, 학습 맥락을 찾아 독자들이 입문에서 숙련으로 이동할 수 있도록 하는 것입니다.
　jQuery란

간단히 말해서 jQuery는 JavaScript 프레임워크입니다. 그 목적은 코드를 덜 작성하고 더 많은 작업을 수행하는 것입니다. 웹 개발자에게 jQuery는 AJAX 상호 작용, JavaScript 애니메이션 효과 등과 같은 관련 애플리케이션을 보다 빠르게 개발할 수 있는 강력한 JavaScript 라이브러리입니다. 웹 디자이너의 경우 jQuery는 Javascript 소스 코드 세부 정보를 캡슐화하고 HTML 태그와 효과적으로 분리하여 디자이너가 웹 페이지 디자인 효과에 더 집중할 수 있도록 합니다. 이를 기반으로 웹페이지의 상호작용성, 시각적 효과 등을 포함하여 웹페이지의 사용자 경험이 크게 향상됩니다.

jQuery의 핵심 디자인 아이디어는 웹 페이지 요소를 선택한 다음 이에 대해 몇 가지 작업을 수행하는 것입니다. 그렇다면 특정 웹 페이지 요소를 선택하고 위치를 지정하는 방법은 JavaScript 개발자의 일반적인 방법은 document.getElementById()입니다. jQuery 구문에서는 달러 기호 "$"를 사용하며 이에 상응하는 선택 표현식은 다음과 같이 작성됩니다.

var someElement = $("#myId");
jQuery를 "jQuery"라고 부르는 이유 "는 주로 Javascript 쿼리를 의미하는 강력한 선택기 때문입니다. 아래에서는 jQuery 선택자와 관련된 디자인 아이디어를 자세히 소개합니다.

1. 기본 jQuery 선택자

앞서 언급했듯이 선택자는 jQuery의 기능입니다. jQuery의 기본 선택자는 크게 다섯 가지 유형으로 나뉜다.

1. $(“#myId”) // ID가 myId인 웹 요소 선택

2. $(“태그 이름 ") // 예를 들어 $("div")는 HTML 문서에 있는 모든 div 요소의 jQuery 개체 컬렉션을 가져옵니다.

　3. $(".myClass") // 모든 div 요소의 jQuery 개체 컬렉션을 가져옵니다. HTML 문서의 div 요소 클래스 “myClass”

　4.$(“*”) // HTML 문서의 모든 요소를 ​​가져옵니다

　5.$ (“selector1, selector2,selector3…selectorN “) // 이런 종류의 선택기를 그룹 선택기라고 합니다. 예: $(“span,#two”)

　 // 모든 범위 태그 요소와 id=two인 요소를 선택합니다.

2. jQuery 계층적 선택기

언제든지 jQuery 선택기를 통해 얻은 jQuery 객체는 언제든지 요소의 집합입니다. jQuery의 계층적 선택자는 크게 다음 두 가지 유형으로 나뉜다.

1. $("ancestorDescendant"): 상위 요소 뒤의 모든 하위 요소를 선택한다. Ancestor는 중국어로 '조상'을 의미하고, 자손은 중국어로 '후손'을 의미합니다. 예:

　$("body div")는 body 요소 아래의 모든 div 요소를 선택합니다.

　$(“div#test div”) ID가 “test”인 div에 포함된 모든 div 하위 요소를 선택합니다

　2. $(“parent > child”): 다음을 선택합니다. 상위 요소 다음의 첫 번째 하위 요소입니다. 예:

　$(“body > div”)는 body 요소 아래의 모든 첫 번째 수준 div 요소를 선택합니다.

　$(“div#test > div”) ID가 “test”인 div에 포함된 모든 첫 번째 수준 div 하위 요소를 선택합니다
3. jQuery 필터 선택기

jQuery의 가장 기본적인 필터 선택기는 다음과 같습니다.

1. :first // 첫 번째 요소를 선택합니다. $(“div:first”) 모든 div 요소 중 첫 번째 div 요소를 선택합니다

　2. :last // 마지막 요소를 선택합니다. $("div:last") 모든 div 요소 중 마지막 div 요소를 선택합니다

　3. :even // 인덱스가 짝수인 요소를 모두 선택합니다. $("input:even") 은 인덱스가 짝수인 입력 요소를 선택합니다.

　4. :odd // 인덱스가 홀수인 요소를 모두 선택합니다. $("input:odd") 는 인덱스가 홀수인 입력 요소를 선택합니다.

　5. :eq(index) // index와 index가 같은 요소를 선택합니다. $("input:eq(1)") 은 인덱스가 1인 입력 요소를 선택합니다.

　6. :gt(index) // index보다 큰 index를 가진 요소를 선택합니다. $("input:gt(1)") 은 인덱스가 1보다 큰 입력 요소를 선택합니다.

　7. :lt(index) // index보다 작은 index를 가진 요소를 선택합니다. $("input:lt(3)") 은 인덱스가 3보다 작은 입력 요소를 선택합니다.

jQuery 콘텐츠 필터 선택기는 DOM 문서의 텍스트 콘텐츠를 쉽게 필터링하여 필요한 요소를 정확하게 선택할 수 있습니다.

1. :contains(text) // 텍스트 내용이 포함된 "text" 요소를 선택합니다. $("div:contains('you')") 는 "you"라는 텍스트가 포함된 div 요소를 선택합니다.

　2. :empty // 하위 요소와 텍스트를 포함하지 않는 빈 요소를 선택합니다. $("div:empty")는 하위 요소(텍스트 요소 포함)를 포함하지 않는 빈 div 요소를 선택합니다.

　3. :parent // 하위 요소나 텍스트가 포함된 요소를 선택합니다. $("div:parent")는 하위 요소(텍스트 요소 포함)가 있는 div 요소를 선택합니다.

보시다시피 jQuery 콘텐츠 필터링 선택기의 필터링 규칙은 주로 여기에 포함된 하위 요소나 텍스트 콘텐츠에 반영됩니다.

jQuery 가시성 필터 선택기의 사용법은 다음과 같습니다.

　1. :hidden // 보이지 않는 요소를 모두 선택합니다. $(“:hidden”)은 웹 페이지에서 보이지 않는 모든 요소를 ​​선택합니다.

　2. :visible // 보이는 요소를 모두 선택합니다. $("div:visible")은 보이는 모든 div 요소를 선택합니다.

jQuery 속성 필터 선택기의 필터링 규칙은 요소의 속성을 통해 해당 요소를 얻는 것입니다.

　1.[속성] // 이 속성을 가진 요소를 선택합니다. $("div[id]") 속성 ID가 있는 요소를 선택합니다.

　2.[attribute=value] // 속성값이 value인 요소를 선택합니다. $("div[name=test]")는 속성 이름 값이 "test"인 div 요소를 선택합니다.

　3.[속성!값] // 속성값이 값과 같지 않은 요소를 선택합니다.

　4.[attribute^=value] //속성값이 value로 시작하는 요소를 선택합니다.

　5.[attribute$=value] // 속성값이 value로 끝나는 요소를 선택합니다.

　6.[attribute*=value] // 속성값에 value가 포함된 요소를 선택합니다.

　7. [selector1] [selector2] [selectorN] //복합 속성 선택자. $("div[id][name*=test]")는 속성 id가 있고 속성 이름 값에 "test"가 포함된 div 요소를 선택합니다.

jQuery 하위 요소의 필터링 규칙 필터 선택기는 다른 선택기와 비교됩니다. 선택기는 약간 더 복잡합니다.

　1. :nth-child(index/even/odd/equation) // 각 상위 요소 아래에 인덱스 하위 요소 또는 홀수 요소를 선택합니다.

　2. :first-child // 각 상위 요소의 첫 번째 하위 요소 선택

　 3. :last-child // 각 상위 요소의 마지막 하위 요소 선택

jQuery 양식 개체 속성 필터 선택기는 주로 사용할 수 없는 양식 요소, 선택한 드롭다운 상자, 다중 선택 상자 등과 같은 선택한 양식 요소를 필터링하는 데 사용됩니다.

　1. :enabled // 사용 가능한 모든 양식 요소를 선택합니다. $("#form1 :enabled")는 ID가 "form1"인 양식에서 사용 가능한 모든 요소를 ​​선택합니다.

　2. :disabled // 비활성화된 양식 요소를 모두 선택합니다.

　3. :checked // 선택한 요소를 모두 선택합니다. $("input:checked") 선택한 모든 요소를 ​​선택합니다.

　4. :selected // 선택된 옵션 요소를 모두 선택합니다. $("select :selected")는 선택된 모든 옵션 요소(옵션)를 선택합니다.

jQuery에는 양식 선택기가 도입되어 양식에서 특정 요소나 요소 유형을 쉽게 얻을 수 있습니다.