Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

jQueryセレクターの詳細

セレクターはjQueryライブラリーの基盤です。これらは、jQueryを使用してDOMを操作するときに常に使用されます。セレクターは、一致する要素を返す関数として機能します。これらはjQueryライブラリに付属しており、すぐに使用できます。

セレクター機能は独特の外観をしています。ドル記号($)で始まり、括弧が続きます。

$()

括弧内で受け入れられるのは、選択する要素の名前、ID、またはクラスです。要素を選択した後、その要素を変更するメソッドは、ドット表記を使用してセレクター関数にチェーンできます。

$('p').html("Some new content rendered from jQuery")

これにより、ページ上のすべての段落要素が選択され、その中のHTMLが文字列に置き換えられます。 jQueryは、1つまたは複数の要素にすばやくアクセスし、メソッドを使用して必要な変更を加えるために構築されました。この機能により、動的なWebアプリケーションを作成する際の当て推量がなくなります。

jQueryセレクターとは何ですか?

jQueryセレクターは、jQueryライブラリに付属している関数です。 jQueryを使用する必要があります。名前、クラス、ID、あるいはその両方をパラメータの文字列として受け入れます。ここから、jQueryメソッドをチェーンしてDOMの操作を実行できます。

なぜこれが便利なのですか? jQueryは、プレーンJavaScriptで冗長化できるメソッドに組み込まれた省略形を導入し、 document.querySelector()を呼び出すのではなく、セレクターを使用して要素を直接参照します。 またはdocument.querySelectorAll()

jQueryセレクターはJavaScriptのquerySelector()を削減します $()へ 。明示的にではなく暗黙的に呼び出されるため、必要なコードも削減されます。

jQueryセレクター構文

これまで、jQueryセレクター関数について抽象的に説明してきました。これで、指定されたDOM要素を直接参照する関数であることがわかりました。必要なのは、要素名、クラス、またはIDだけです。 HTMLの編成方法に応じて、名前をクラスまたはIDと組み合わせることもできます。

参加者の81%は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

セレクターは、ページ上のすべての要素を選択するのと同じくらい一般的です。

$('*')

このようにjQueryを使用することは一般的に推奨されていません。より一般的な方法は、同じ要素のグループを選択することです。たとえば、すべての段落要素を変更したい場合は、それらを直接選択できます。

$('p')

これで、現在のページのすべての

タグが選択されました。ここから、jQueryメソッドをチェーンして変更を加えます。

$('p').html('Replace original paragraph HTML with this.')

html() メソッドは、選択されたすべての

タグのHTML属性を置き換えます。

特定の段落要素のみが必要な場合はどうなりますか?複数の

タグがあるとします。そのうちの1つは「new-content」のIDを持っています。直接選択できます。

$('p#new-content')

jQueryセレクターは、要素へのCSS参照を使用します(#=id、。=class)。これで、IDが「new-content」の段落要素のみが選択され、変更できるようになりました。

最後に、クラスが割り当てられた要素を選択しましょう。私たちのアプリにはいくつかの

要素があります。いくつかは、「main-content」のクラスで
内にラップされています。動的に変更するメインコンテンツを選択する場合は、名前とクラスをセレクターに渡します。

$('div.main-content')

これで、選択した

にラップされたすべてのコンテンツを操作する準備が整いました。

結論

jQueryセレクター関数は、ライブラリを駆動するものです。 jQueryの全機能を実現するには、セレクター関数の操作方法と、それにjQueryメソッドをチェーンする方法を理解することが不可欠です。 jQueryセレクターとは何か、要素の選択に関連する構文について学びました。

これで、jQueryセレクターとは何かとその使用方法を明確に理解できたはずです。ここから、セレクターを使用してjQueryメソッドをチェーンする練習をしてください。ハッピーコーディング!


  1. CSSでセレクターをグループ化する

    CSSグループ化セレクターは、複数の要素を選択し、それらを一緒にスタイル設定するために使用されます。これにより、各要素に共通のスタイルを宣言するためのコードと余分な労力が削減されます。セレクターをグループ化するには、各セレクターをスペースで区切ります。 構文 CSSグループ化セレクターの構文は次のとおりです- element, element {    /*declarations*/ } 次の例は、CSSグループ化セレクター-を示しています。 例 <!DOCTYPE html> <html> <head> <style>

  2. CSSの高度なセレクター

    CSSのAdvancedSelectorsには、隣接兄弟セレクター、属性セレクター、直接子セレクター、n番目のタイプセレクターなどが含まれます。また、GeneralSiblingSelectorも含まれます。例を以下に示します。 h1 ~ h3 直接子セレクターの例- div > span 以下は、CSSの高度なセレクターを示すコードです- 例 <html> <head> <style> #red {    color: red; } .green {    background: green; } ul:n