Summary of the usage of querySelector selector in jQuery

This article mainly introduces the relevant information about the usage guide of jQuery selector querySelector. Friends who need it can refer to it

Introduction

HTML5 is new to Web API Two methods, document.querySelector and document.querySelectorAll, are introduced to more conveniently select elements from the DOM. Their functions are similar to jQuery's selectors. This makes it much easier when writing native JavaScript code.
Usage

The two methods use similar syntax, and both receive a string parameter. This parameter needs to be a legal CSS selection syntax.

The code is as follows:

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

The parameter selectors can contain multiple CSS selectors, separated by commas.

The code is as follows:

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

Using these two methods cannot find elements with pseudo-class status, such as querySelector(':hover') Will not get expected results.

querySelector

The code is as follows:

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

querySelectorAll

This method returns all elements that meet the conditions , the result is a nodeList collection. The search rules are the same as described before.

elements = document.querySelectorAll('p.foo');//Return all p with foo class style
It should be noted that the elements in the returned nodeList collection are not real-time.

The above is the detailed content of Summary of the usage of querySelector selector in jQuery. For more information, please follow other related articles on the PHP Chinese website!