ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery での querySelector セレクターの使用法の概要

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

巴扎黑
リリース: 2017-06-21 09:49:44
オリジナル
2715 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート