jQuery 클래스 선택기 querySelector의 사용 예에 ​​대한 자세한 설명

Web API에는 DOM에서 요소를 보다 편리하게 선택할 수 있도록 document.querySelector 및 document.querySelectorAll이라는 두 가지 방법이 새로 도입되었습니다. 해당 기능은 jQuery의 선택기와 유사합니다. 이렇게 하면 기본 JavaScript 코드 작성이 훨씬 쉬워집니다.

두 메소드는 비슷한 구문을 사용하며 둘 다 string 매개변수를 받습니다. 이 매개변수는 적합한 CSS 선택 구문이어야 합니다.

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

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

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

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

querySelector

이 메서드는 조건을 충족하는 단일 요소를 반환합니다. 매개변수에서 제공하는 CSS 선택자를 사용하여 깊이 우선 및 선순서 순회 원칙에 따라 DOM을 검색하고 조건을 충족하는 첫 번째 요소를 반환합니다.

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

querySelectorAll

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

elements = document.querySelectorAll('p.foo');//返回所有带foo类样式的p

그러나 반환된 nodeList 컬렉션의 요소는 실시간이 아닌 결과라는 점에 유의해야 합니다. 실시간 반환 결과와 비실시간 반환 결과를 구별하려면 다음 예를 참조하세요.

<p id="container">
    <p></p>
    <p></p></p>

//首先选取页面中id为container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)
//结果为2//然后通过代码为其添加一个子元素
container.appendChild(document.createElement('p'));
//这个元素不但添加到页面了，这里的变量container也自动更新了
console.log(container.childNodes.length)//结果为3

입니다. 위의 예를 사용하면 실시간으로 업데이트되는 요소가 무엇인지 잘 이해할 수 있습니다. document.getElementById는 하위 요소를 추가한 후 원래 2에서 3으로 업데이트된 모든 하위 요소의 수를 다시 가져오며 실시간 결과를 반환합니다. Chrome과 같은 일부 브라우저는 공백도 하위 노드로 구문 분석합니다.

백슬래시가 이스케이프에 사용된다는 것을 알고 있습니다. 예를 들어 문자열에서 null 문자를 표현하려면 'b'와 줄 바꿈 'n'을 사용합니다. querySelector 및 querySelectorAll에 제공된 매개변수에서 이스케이프가 지원된다는 점을 이해하는 것도 중요합니다.

먼저 예를 살펴보겠습니다. 예를 들어 스타일 클래스가 'foo:bar'인 p가 있습니다. 물론 일반적으로 이렇게 쓰지는 않는다는 것을 알고 있습니다. 선택해야 할 경우 콜론을 이스케이프 처리해야 합니다. 그렇지 않으면 오류가 발생합니다.

<p class="foo:bar"></p>

브라우저는 이것이 합법적인 선택문이 아니라고 불평했습니다.

동시에 흥미로운 사실이 다가오고 있습니다. 아마도 콜론을 직접 탈출하면 문제가 해결될 것이라고 생각했을 것입니다.

마찬가지로 불법이라는 뜻도 있습니다. 그 이유는 백슬래시 자체가 문자열에서 탈출을 의미하기 때문입니다. 탈출을 위해 콜론과 결합할 수 없으므로 오류가 발생합니다.

따라서 올바른 방법은 백슬래시 '.foo\:bar'를 이스케이프 처리한 다음 이를 querySelector에 전달하는 것입니다. 후자가 매개변수 '.foo\:bar'를 받은 후 문자열은 두 개의 백슬래시를 이스케이프합니다. 하나로 만든 다음 querySelector에서 얻은 하나의 백슬래시와 콜론을 결합하여 올바른 결과를 얻습니다.

즉, 문자열에서 한 번, querySelector가 매개변수를 구문 분석할 때 한 번, 총 두 번 이스케이프되었습니다.

이를 이해한 후에는 더 흥미로운 예를 볼 수 있습니다. 예를 들어 클래스 이름에 백슬래시가 있는 요소를 선택하려고 합니다. 예, 총 4개의 백슬래시를 사용해야 합니다! 제대로 작동하려면.

<p class="foo\bar"></p>

jquery 작업 select(값 가져오기, 선택 설정)에 대해 이야기해 보겠습니다.

예를 들어

1 값이 있는 항목을 pxx로 설정합니다. 선택

$(".selector").val("pxx");

2. 텍스트를 pxx로 설정하고 항목을 선택합니다

$(".selector").find("option[text='pxx ']") .attr("selected",true);

대괄호 사용법이 있습니다. 대괄호 안의 등호 앞에는 따옴표 없이 속성 이름이 옵니다. 대괄호를 사용하면 논리가 매우 단순해지는 경우가 많습니다.

3. 현재 선택한 항목의 값을 가져옵니다

$(".selector").val();

4. 현재 선택한 항목의 텍스트 가져오기

$(".selector").find("option:selected").text();

여기서는 콜론을 사용하여 사용법을 숙지하고 추론도 수행합니다. 코드를 간결하게 변경하세요.

위 내용은 jQuery 클래스 선택기 querySelector의 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!