検索メソッドは次のとおりです: 1. 現在の要素の親要素を検索できるparent()、2. 現在の要素の祖先要素を検索できるparents()、3. Children() 、現在の要素の子を検索できます。 element; 4. find()、現在の要素の子孫要素を検索できます。 5. content(); 6. sinners(); 7. next(); 8. nextAll (); 9. nextUntil(); 10. prev( ); 11. prevUntil() など。
このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。
jQuery では要素をより柔軟に操作するために、セレクター以外にも「フィルターメソッド」と「ファインドメソッド」の 2 つのメソッドを「メソッド」として提供しています。フィルタリング メソッドと検索メソッドは、実際には jQuery セレクターを補足するものです。
フィルタリング方法は、選択した要素をさらにフィルタリングすることを指します。検索方法は主に、現在選択されている要素を基点として、この要素の親要素、子要素、または兄弟要素を検索します。
jQueryでは、検索方法として以下の3つの場合に分けられます。
- #祖先要素の検索
- 子孫要素の検索
- 兄弟要素の検索
jQuery の先祖要素の検索
jQuery で、現在の要素の先祖要素 (親要素、親要素) を見つけたい場合, など)、以下の3つの方法があります。- (1)親()
- (2)親()
- (3) )parentsUntil()
1.parent()
jQuery では、parent() メソッドを使用して「親要素」を見つけることができます。 」。要素には親要素が 1 つだけあることに注意してください。 構文:$.parent(selector)説明: selector はオプションのパラメーターで、条件を満たす親要素を検索するために使用されるセレクターです。パラメータを省略した場合は親要素が条件を満たさなくてもよいことを意味し、パラメータを省略しなかった場合は親要素が条件を満たさなくてもよいことを意味する。 例: パラメータなしのparent()
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> table, tr, td{border:1px solid silver;} td { width:40px; height:40px; line-height:40px; text-align:center; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $("td").hover(function () { $(this).parent().css("background-color", "silver"); }, function () { $(this).parent().css("background-color", "white"); }) }) </script> </head> <body> <table> <tr> <td>2</td> <td>4</td> <td>8</td> </tr> <tr> <td>16</td> <td>32</td> <td>64</td> </tr> <tr> <td>128</td> <td>256</td> <td>512</td> </tr> </table> </body> </html>デフォルトでは、プレビュー効果は次のようになります。
#マウスを特定のセル上に移動すると、プレビュー効果は次のようになります。
分析:
$(this).parent() は、現在の td 要素の親要素 (tr) を選択することを意味しますが、親要素 (表)は選択されません。
例:parent() パラメータ付き
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> table, tr, td{border:1px solid silver;} td { width:40px; height:40px; line-height:40px; text-align:center; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $("td").hover(function () { $(this).parent(".select").css("background-color", "silver") }, function () { $(this).parent(".select").css("background-color", "white") }) }) </script> </head> <body> <table> <tr> <td>2</td> <td>4</td> <td>8</td> </tr> <tr class="select"> <td>16</td> <td>32</td> <td>64</td> </tr> <tr> <td>128</td> <td>256</td> <td>512</td> </tr> </table> </body> </html>
デフォルトでは、プレビュー効果は次のようになります。
の td 要素上にマウスを移動すると、プレビュー効果は次の図のようになります。
分析:
は、現在の td の親要素を選択することを意味します要素 (tr) であり、親要素にはクラス名「select」が含まれている必要があります。
jQuery では、parents() メソッドを使用して、現在の要素の「先祖要素」を見つけることができます。要素には複数の祖先要素を含めることができることに注意してください。
2 つのメソッドparent() とparents() は簡単に区別できます。このうち、parent() は単数なので、検索対象となる要素は親要素の 1 つだけです。 parents() は複数であるため、検索対象となる要素は複数あり、すべての祖先要素 (親要素、祖父要素などを含む) が含まれます。
構文:
$().parents(selector)
説明:
selector はオプションのパラメーターで、条件を満たす祖先要素を検索するために使用されるセレクターです。パラメータを省略した場合は祖先要素が条件を満たす必要がないことを意味し、パラメータを省略しなかった場合は祖先要素が条件を満たす必要があることを意味します。
例: すべての祖先要素を検索する
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var parents = $("span").parents(); var result = []; $.each(parents, function(){ var item = this.tagName.toLowerCase(); result.push(item); }); console.log(result.join(",")); }) </script> </head> <body> <div> <p> <strong> <span>绿叶学习网</span> </strong> </p> </div> </body> </html>
コンソールの出力は次のとおりです。
分析:
は jQuery オブジェクトのコレクションを返します。この例では、 .each() を使用して、span 要素のすべての祖先要素を走査します。 .each() メソッドについては、後続の章で詳しく紹介します。 「要素のタグ名を取得するには、(this).tagName を使用すべきではありませんか? なぜここで this.tagName が使用されるのですか?」 $(this) は jQuery オブジェクトです。 click()、keyup() などの jQuery メソッドまたはプロパティを呼び出します。これは DOM オブジェクトであり、this.id、this.value などの DOM オブジェクトのメソッドまたはプロパティを呼び出します。 tagName 属性は DOM オブジェクトに属しているため、ここでは this.tagName を使用します。
3、parentsUntil()
在jQuery中,parentsUntil()方法是parents()方法的一个补充,它可以查找“指定范围”的所有祖先元素,相当于在parents()方法返回的集合中截取一部分。
语法:
$().parentsUntil(selecotr)
说明:
selector是一个可选参数,它是一个选择器,用来选择符合条件的祖先元素。
举例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ var parents = $("span").parentsUntil("div"); var result = []; $.each(parents, function(){ var item = this.tagName.toLowerCase(); result.push(item); }); console.log(result.join(",")); }) </script> </head> <body> <div> <p> <strong> <span>绿叶学习网</span> </strong> </p> </div> </body> </html>
控制台输出结果如下图所示。
分析:
在实际开发中,我们一般只会用到parent()方法和parents()这两个,极少用到parentsUntil()。因此对于parentsUntil()方法,我们了解一下就行。
jQuery查找后代元素
在jQuery中,如果想要查找当前元素的后代元素(子元素、孙元素等),我们有以下3种方法:
- (1)children()
- (2)find()
- (3)contents()
1、children()
在jQuery中,我们可以使用children()方法来查找当前元素的“子元素”。注意,children()方法只能查找子元素,不能查找其他后代元素。
语法:
$().children(selector)
说明:
selector是一个可选参数,它是一个选择器,用来查找符合条件的子元素。当参数省略,表示选择所有子元素;当参数不省略时,表示选择符合条件的子元素。
举例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style lang=""> p{margin:6px 0;} </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $("#wrapper").hover(function(){ $(this).children(".select").css("color", "red"); },function(){ $(this).children(".select").css("color", "black"); }) }) </script> </head> <body> <div id="wrapper"> <p>子元素</p> <p>子元素</p> <div> <p>孙元素</p> <p>孙元素</p> </div> <p>子元素</p> <p>子元素</p> </div> </body> </html>
默认情况下,预览效果如下图所示。
当鼠标移到id="wrapper"
的div元素上面,此时预览效果如下图所示。
分析:
$(this).children(".select")
表示获取当前元素下的class="select"
的子元素。我们可以发现,class="select"
的孙元素却不会被选中。
2、find()
在jQuery中,我们可以使用find()方法来查找当前元素的“后代元素”。注意,find()方法不仅能查找子元素,还能查找其他后代元素。
语法:
$().find(selector)
说明:
selector是一个可选参数,它是一个选择器,用来查找符合条件的后代元素。当参数省略,表示选择所有后代元素;当参数不省略时,表示选择符合条件的后代元素。
举例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style lang=""> p{margin:6px 0;} </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $("#wrapper").hover(function(){ $(this).find(".select").css("color", "red"); },function(){ $(this).find(".select").css("color", "black"); }) }) </script> </head> <body> <div id="wrapper"> <p>子元素</p> <p>子元素</p> <div> <p>孙元素</p> <p>孙元素</p> </div> <p>子元素</p> <p>子元素</p> </div> </body> </html>
默认情况下,预览效果如下图所示。
当鼠标移到id="wrapper"
的div元素上面,此时预览效果如下图所示。
分析:
$(this).find(".select")
表示不仅会选取当前元素下的class="select"
的子元素,还会选取class="select"
的孙元素。
3、contents()
在jQuery中,我们可以使用contents()方法来获取子元素及其内部文本。contents()方法和children()方法相似,不同的是,contents()返回的jQuery对象中不仅包含子元素,还包含文本内容。而children()方法返回的jQuery对象中只会包含子元素,不包含文本内容。
在实际开发中,我们极少会用到contents()方法,因此小伙伴们不需要深入了解,这里简单认识一下即可。
jQuery查找兄弟元素
兄弟元素,指的是该元素在同一个父元素下的同级元素。
在jquery中,查询同级元素一般有七个方法:siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()
siblings()方法,主要用于获得指定元素的同级所有元素
next()方法,主要用于获得指定元素的下一个同级元素
nextAll()方法,主要用于获得指定元素的下一个同级的所有元素
nextUntil()方法,主要用于获得指定元素的下一个同级元素,这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素
prev()方法,主要用于获得指定元素的上一级同级元素
prevAll()方法,主要用于获得指定元素上一级所有的同级元素
prevUntil()方法,主要用于获得指定元素的上一个同级元素,这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素
siblings()方法
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <div><span>Hello</span></div> <p class="selected">Hello Again</p> <p>And Again</p> <script> $("p").siblings(".selected").css("background", "yellow"); </script> </body> </html>
next()方法
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').next().css('background-color', 'red'); </script> </body> </html>
nextAll()方法
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').nextAll().css('background-color', 'red'); </script> </body> </html>
nextUntil()方法
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script> $(document).ready(function() { $("li.start").nextUntil("li.stop").css({ "color": "red", "border": "2px solid red" }); }); </script> </head> <body> <div style="width:500px;" class="siblings"> <ul>ul (父节点) <li>li (兄弟节点)</li> <li>li (兄弟节点)</li> <li class="start">li (类名为"start"的兄弟节点)</li> <li>li (类名为"start"的li节点的下一个兄弟节点)</li> <li>li (类名为"start"的li节点的下一个兄弟节点)</li> <li>li (类名为"start"的li节点的下一个兄弟节点)</li> <li class="stop">li (类名为"stop"的兄弟节点)</li> </ul> </div> <p>在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。</p> </body> </html>
prev()方法
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script> $(document).ready(function() { $("li.start").prev().css({ "color": "red", "border": "2px solid red" }); }); </script> </head> <body> <div style="width:500px;" class="siblings"> <ul>ul (父节点) <li>li (兄弟节点)</li> <li>li (类名为"start"的li节点的上一个兄弟节点)</li> <li class="start">li (类名为"start"的li节点)</li> <li>li (兄弟节点)</li> <li>li (兄弟节点)</li> </ul> </div> </body> </html>
prevAll()方法
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script> $(document).ready(function() { $("li.start").prevAll().css({ "color": "red", "border": "2px solid red" }); }); </script> </head> <body> <div style="width:500px;" class="siblings"> <ul>ul (parent) <li>li (类名为"start"的li的上一个兄弟节点)</li> <li>li (类名为"start"的li的上一个兄弟节点)</li> <li>li (类名为"start"的li的上一个兄弟节点)</li> <li class="start">li (类名为"start"的li节点)</li> <li>li (兄弟节点)</li> <li>li (兄弟节点)</li> </ul> </div> <p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p> </body> </html>
prevUntil()方法
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script> $(document).ready(function() { $("li.start").prevUntil("li.stop").css({ "color": "red", "border": "2px solid red" }); }); </script> </head> <body> <div style="width:500px;" class="siblings"> <ul>ul (父节点) <li class="stop">li (类名为"stop"的兄弟节点)</li> <li>li (类名为"start"的li节点的上一个兄弟节点)</li> <li>li (类名为"start"的li节点的上一个兄弟节点)</li> <li>li (类名为"start"的li节点的上一个兄弟节点)</li> <li class="start">li (类名为"start"的li节点)</li> <li>li (兄弟节点)</li> <li>li (兄弟节点)</li> </ul> </div> <p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p> </body> </html>
【推荐学习:jQuery视频教程、web前端视频】
以上がjqueryの検索方法とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

HTMLにReactを統合するには、次の手順に従ってください。1。HTMLファイルにReactとReactdomを導入します。 2。反応成分を定義します。 3. ReactDomを使用してコンポーネントをHTML要素にレンダリングします。これらの手順を通じて、静的HTMLページは動的でインタラクティブな体験に変換できます。

Reactの人気には、パフォーマンスの最適化、コンポーネントの再利用、豊富なエコシステムが含まれます。 1.パフォーマンスの最適化は、仮想DOMおよび拡散メカニズムを介して効率的な更新を実現します。 2。コンポーネントの再利用は、再利用可能なコンポーネントによって重複コードを削減します。 3.リッチなエコシステムと一方向のデータフローは、開発エクスペリエンスを向上させます。

Reactは、動的でインタラクティブなユーザーインターフェイスを構築するための選択ツールです。 1)コンポーネント化とJSXは、UIを分割して簡単に再利用します。 2)国家管理は、UIの更新をトリガーするためにUseStateフックを通じて実装されます。 3)イベント処理メカニズムは、ユーザーの相互作用に応答し、ユーザーエクスペリエンスを向上させます。

Reactは、ユーザーインターフェイスを構築するためのフロントエンドフレームワークです。バックエンドフレームワークは、サーバー側のアプリケーションを構築するために使用されます。 Reactはコンポーネントで効率的なUIアップデートを提供し、バックエンドフレームワークは完全なバックエンドサービスソリューションを提供します。テクノロジースタックを選択するときは、プロジェクトの要件、チームのスキル、およびスケーラビリティを考慮する必要があります。

HTMLとReactの関係は、フロントエンド開発の中核であり、最新のWebアプリケーションのユーザーインターフェイスを共同で構築します。 1)HTMLはコンテンツ構造とセマンティクスを定義し、Reactはコンポーネントを介して動的インターフェイスを構築します。 2)ReactコンポーネントはJSX構文を使用してHTMLを埋め込み、インテリジェントなレンダリングを実現します。 3)コンポーネントライフサイクルは、状態および属性に従ってHTMLレンダリングと動的に更新を管理します。 4)コンポーネントを使用して、HTML構造を最適化し、保守性を向上させます。 5)パフォーマンスの最適化には、不必要なレンダリングの回避、重要な属性の使用、およびコンポーネントの単一の責任を維持することが含まれます。

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1)Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2)コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3)Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4)国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5)基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6)一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

Reactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1)コンポーネントと州の管理を通じてUIの開発を簡素化します。 2)作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3)基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4)不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5)パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1)JSXはHTMLを埋め込み、開発をより直感的にします。 2)仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3)保守性を向上させるコンポーネントベースの管理UI。 4)国家管理とイベント処理は、インタラクティブ性を高めます。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

ドリームウィーバー CS6
ビジュアル Web 開発ツール

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
