jQuery での querySelector セレクターの使用法の概要

この記事では、jQuery セレクター querySelector の使用ガイドに関する関連情報を主に紹介します。

はじめに

HTML5 では、Web API に 2 つの新しいメソッドが導入されました:

document.querySelector と document。 .querySelectorAll DOM から要素をより便利に選択するために使用され、この関数は jQuery のセレクターに似ています。これにより、ネイティブ JavaScript コードの記述がはるかに簡単になります。 使用法

2 つのメソッドは同様の構文を使用します。どちらも

string パラメーターを受け取ります。このパラメーターは有効な CSS 選択構文である必要があります。

コードは次のとおりです:

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

パラメータセレクターには、カンマで区切られた複数の

CSSセレクターを含めることができます。

コードは次のとおりです:

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

これらの 2 つのメソッドを使用すると、

疑似クラス ステータスを持つ要素を見つけることができません。たとえば、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 を返します

返されたノードリスト コレクション内の要素はリアルタイムではないことに注意してください。

以上がjQuery での querySelector セレクターの使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。