jQuery 선택기 자세히 살펴보기

선택자는 jQuery 라이브러리의 기초입니다. jQuery를 사용하여 DOM을 조작할 때 항상 사용됩니다. 선택자는 일치하는 요소를 반환하는 함수로 작동합니다. jQuery 라이브러리와 함께 제공되며 즉시 사용할 수 있습니다.

선택기 기능은 독특한 모양을 가지고 있습니다. 달러 기호($)로 시작하고 괄호가 뒤따릅니다.

$()

괄호 안에 허용되는 것은 선택할 요소의 이름, ID 또는 클래스입니다. 요소를 선택한 후 점 표기법을 사용하여 해당 요소를 변경하는 메서드를 선택기 함수에 연결할 수 있습니다.

$('p').html("Some new content rendered from jQuery")

이렇게 하면 페이지의 모든 단락 요소가 선택되고 그 안의 HTML이 문자열로 바뀝니다. jQuery는 모든 요소에 빠르게 액세스하고 메서드를 사용하여 원하는 변경을 수행하도록 구축되었습니다. 이 기능을 사용하면 동적 웹 응용 프로그램을 만들 때 추측할 필요가 없습니다.

jQuery 선택기란 무엇입니까?

jQuery 선택기는 jQuery 라이브러리와 함께 제공되는 함수입니다. jQuery를 사용해야 합니다. 이름, 클래스 및/또는 ID를 매개변수에 대한 문자열로 받아들입니다. 여기에서 jQuery 메서드를 연결하여 DOM 조작을 수행할 수 있습니다.

이것이 왜 유용한가요? jQuery는 document.querySelector() 를 호출하는 대신 요소를 직접 참조하기 위해 선택기를 사용하여 일반 JavaScript에서 장황할 수 있는 메서드에 내장된 속기를 도입합니다. 또는 document.querySelectorAll() .

jQuery 선택기는 JavaScript querySelector()를 줄입니다. $()로 . 명시적으로가 아니라 문서에서 암시적으로 호출되므로 필요한 코드도 줄어듭니다.

jQuery 선택기 구문

지금까지 jQuery 선택기 기능에 대해 추상적으로 이야기했습니다. 이제 지정된 DOM 요소를 직접 참조하는 함수라는 것을 알고 있습니다. 필요한 것은 요소 이름, 클래스 또는 ID뿐입니다. HTML 구성 방식에 따라 이름을 클래스 또는 ID와 결합할 수도 있습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

선택기는 페이지의 모든 요소를 ​​선택하는 것처럼 일반적일 수 있습니다.

$('*')

이와 같이 jQuery를 사용하는 것은 일반적으로 권장되지 않습니다. 더 일반적인 방법은 동일한 요소의 그룹을 선택하는 것입니다. 예를 들어 모든 단락 요소를 변경하려면 직접 선택할 수 있습니다.

$('p')

이제 현재 페이지에서 모든

태그를 선택했습니다. 여기에서 jQuery 메서드를 연결하여 변경합니다.

$('p').html('Replace original paragraph HTML with this.')

html() 메소드는 선택된 모든

태그의 HTML 속성을 대체합니다.

특정 단락 요소만 원하면 어떻게 될까요? 여러 개의

태그가 있다고 가정합니다. 그 중 하나는 'new-content'라는 id를 가지고 있습니다. 직접 선택할 수 있습니다.

$('p#new-content')

jQuery 선택기는 요소(# =id, . =클래스)에 대한 CSS 참조를 사용합니다. 이제 id가 'new-content'인 단락 요소만 선택되어 변경할 준비가 되었습니다.

마지막으로 클래스가 할당된 요소를 선택합니다. 우리 앱에는 여러

$('div.main-content')