jQuery의 querySelector 선택기 사용법 요약

이 글에서는 jQuery 선택기 querySelector의 사용 가이드에 대한 관련 정보를 주로 소개합니다. 필요한 친구가 참고할 수 있습니다.

Introduction

HTML5에서는 Web API에 document.querySelector와 document라는 두 가지 새로운 메소드를 도입했습니다. .querySelectorAll DOM에서 요소를 보다 편리하게 선택하는 데 사용되며 이 기능은 jQuery의 선택기와 유사합니다. 이렇게 하면 기본 JavaScript 코드 작성이 훨씬 쉬워집니다.
Usage

두 메소드는 모두 string 매개변수를 받습니다. 이 매개변수는 유효한 CSS 선택 구문이어야 합니다.

코드는 다음과 같습니다:

element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');

매개변수 선택기에는 쉼표로 구분된 여러 개의 CSS 선택기가 포함될 수 있습니다.

코드는 다음과 같습니다.

element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');

이 두 가지 방법을 사용하면 pseudo-class 상태의 요소를 찾을 수 없습니다. 예를 들어 querySelector(':hover')는 예상한 결과를 얻지 못합니다.

querySelector

코드는 다음과 같습니다.

element = document.querySelector('p#container');//返回id为container的首个p
element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素

querySelectorAll

이 메소드는 조건에 맞는 모든 요소를 ​​반환하며, 그 결과는 nodeList 컬렉션입니다. 검색 규칙은 앞서 설명한 것과 동일합니다.

elements = document.querySelectorAll('p.foo');//foo 클래스 스타일로 모든 p를 반환합니다.
반환된 nodeList 컬렉션의 요소는 실시간이 아니라는 점에 유의해야 합니다.

위 내용은 jQuery의 querySelector 선택기 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!