jQuery での querySelector セレクターの使用法の概要-jsチュートリアル-php.cn

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

巴扎黑

リリース： 2017-06-21 09:49:44

オリジナル

2734 人が閲覧しました

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

はじめに

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

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

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

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

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

element = document.querySelector(&#39;selectors&#39;);
elementList = document.querySelectorAll(&#39;selectors&#39;);

ログイン後にコピー

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

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

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

element = document.querySelector(&#39;selector1,selector2,...&#39;);
elementList = document.querySelectorAll(&#39;selector1,selector2,...&#39;);

ログイン後にコピー

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

疑似クラスステータスを持つ要素を見つけることができません。たとえば、querySelector(':hover') は期待した結果を取得しません。

querySelector

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

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

ログイン後にコピー

querySelectorAll

このメソッドは、条件を満たすすべての要素を返し、結果はnodeListコレクションです。検索ルールは前に説明したものと同じです。

elements = document.querySelectorAll('p.foo');// foo クラススタイルですべての p を返します

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

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