50以上の最も一般的なjQueryインタビューの質問と回答(2021年更新)

上記のメソッド呼び出しの結果は、次の画像に示すように、アイテムA、B、1、2、3、およびCの背景が黄色になります。

.find（）メソッドは、トラバースされるDOM要素のすべての子要素を選択します。

要素を見つけるためのjQuery.children（）APIの構文

クラス「レベル2」のタグ。

c ++マージソートアルゴリズム

$( 'ul.level-2' ).children().css( 'background-color', 'yellow' );

上記のメソッド呼び出しの結果は、次の画像に示すように、アイテムA、B、およびCの背景が黄色になります。



.children（）メソッドは、トラバースされるDOM要素の単一レベルの要素を選択します。

Q＃14）jQueryのさまざまなタイプのセレクターとその機能について説明してください。

回答： jQueryセレクターは、以下に示す属性に基づいてDOM階層からHTML要素を検索/選択するために使用されます。

• 名前
• id
• クラス
• タイプ
• 値

基本的なセレクタータイプは次のとおりです。

• 名前
• ID
• クラス名
• DOM内のすべての要素を選択する*などのユニバーサルセレクター。
• 複数の要素。 例：
• 、

  、。

• 属性セレクター、 例： 色、フォントスタイル、背景色などの属性に基づいて要素を識別/選択します。

jQueryの複数の要素と属性セレクターの例を以下に説明します。



上記のjQueryコードでは、class属性がセレクターであり、HTMLタグ要素内のテキストのフォントの色が緑色に変更されています。このコードは、クラス属性を持つすべての要素内のテキストのフォントの色に影響を与える/変更します。

Q＃15）jQueryのIDセレクターとクラスセレクターを区別します。

回答： 各HTML要素は1つのIDのみを持つことができます。つまり、要素は一意のIDで識別できますが、複数の要素で同じクラスを使用できます。

IDを属性として持つDOM要素を非表示にするためのjQueryのIDセレクターの例（IDが「gold_coin」の要素など）

$('#gold_coin').hide();

非表示にする場合は、クラスが「生」であるすべてのリンクを言います。

$('a.raw').hide();

Q＃16）jQueryAjaxメソッドの利点を説明してください。

回答： Ajaxは、DOMとJavaScriptを使用して、ページをリロードせずにサーバーからデータを要求および受信できます。

jQueryでAjaxメソッドを使用する利点を以下に示します。

• これにより、ページのリロード全体を取り出すことができ、ページの一部のみをロードする柔軟性が得られます。
• シンプルなAPI。
• クロスブラウザのサポート。
• GETとPOSTがサポートされています。
• JSON、XML、HTML、またはスクリプトドキュメントをアップロードします。

Q＃17）onload（）メソッドとdocument.ready（）jQueryメソッドを区別します。

回答： onload（）メソッドとdocument.ready（）メソッドの違いは、JavaScriptのonload（）メソッドは、Webドキュメント内のすべてのオブジェクトが完全に表示/ロードされた後にのみ呼び出されることです。

一方、document.ready（）メソッドは、DOM構造がドキュメントに読み込まれるときに呼び出されます。 document.ready（）メソッドは、onload（）メソッドと比較すると非常に高速に呼び出されます。これは、後で画像が完全に表示されるまで待機するためです。

Q＃18）jQueryのconnect（）メソッドの機能について説明してください。

回答： jQuery connect（）は、ハンドラーを割り当てることによって関数を別の関数に接続/バインドするために使用されるプラグインです。この関数を使用して、DOM要素のイベントを使用できます。

Q＃19）ブートストラップとJavaScriptプラグインについて簡単に説明してください。

回答： Bootstrapは、WebページまたはWebアプリケーションを構築するためのHTML、CSS、およびJavaScriptを含むフレームワークまたはツールセットです。 Bootstrapコンポーネントの多くは、機能するためにJavascriptプラグインを必要とします。

Q＃20）jQueryMobileのアプリケーションについて説明してください。

回答： jQuery Mobileは、すべてのスマートフォン、タブレット、デスクトップデバイスでアクセス可能なモバイルアプリケーションを構築するために設計された、オープンソースのクロスブラウザー互換フレームワークです。

jQuery Mobileは、jQueryとjQueryのユーザーインターフェイス上に作成され、さまざまな特殊効果をレンダリングし、Ajaxリクエスト/レスポンス、タッチイベント、およびさまざまなウィジェットを処理します。

Q＃21）jquery.min.jsとjquery.jsを区別する

回答： jquery.min.jsとjquery.jsの機能は同じですが、jquery.min.jsでは、ファイルのサイズを小さくし、読み込みを高速化してスクリプトを実行するために、すべての空のスペースが削除されています。

JSファイルを本番環境で縮小すると、読み込みが速くなり、ページのパフォーマンスがすばやく向上します。

Q＃22）HTMLおよびXMLドキュメントのjQueryHTMLメソッドの可能性について説明してください。

回答： jQuery HTMLメソッドはXMLドキュメントでは使用できず、HTMLドキュメントでのみ機能します。

Q＃23）jQuery UI（ユーザーインターフェイス）の機能について説明してください。

回答： jQuery UIはjQueryライブラリであり、ユーザーが特定のDOM要素を選択、並べ替え、ドラッグ、ドロップ、およびサイズ変更できる複数のレコードリストなどのさまざまなユーザーインターフェイスオブジェクトの構築を提供します。

UIライブラリは、オートコンプリート、チェックボックス、ラジオボタン、日付ピッカー、メニューなどの組み込みウィジェットを作成するだけでなく、効果の非表示、表示、切り替え、およびその他のアニメーションを追加します。

Q＃24）jQuery用のデータテーブルプラグインの機能について説明してください。

回答： データテーブルは、レコードに適用されると表形式で表示されるjQueryプラグインです。

データを単一列と複数列に並べ替えたり、特定のレコードを検索したり、ページ付けを追加したり、ページごとにレコードを追加したり、テーブル内のレコードをナビゲートしたりできます。データテーブルは、静的データ、配列、JSONのデータ、およびAJAX応答に適用できます。

Q＃25）CDNからjQueryをホストすることの利点について説明してください。

回答： コンテンツ配信ネットワーク（CDN）からjQueryをホストすると、低コストと低ネットワーク負荷で高可用性と高性能を実現し、レイテンシーを改善し（サーバーとのデータパケットの送受信にかかる時間を短縮）、デバイス固有のバージョンを提供します内容の。

例： モバイル画面サイズへの応答性、および機密データやファイルの安全なストレージ容量。

Q＃26）jQueryの.detach（）と.remove（）の違いを特定します。

回答： jQueryのdetach（）メソッドは選択された要素を削除しますが、データとイベントは保持します。 jQueryの.remove（）メソッドは、イベントだけでなく要素、データも削除します。

Q＃27）サーバースクリプトにjQueryライブラリを使用できますか？

回答： jQueryは、クライアント側のスクリプトJavascriptライブラリです。サーバーサイドスクリプトには使用できません。

Q＃28）jQueryを使用するためのいくつかの状況またはシナリオを教えてください。

回答：

jQueryは、次の状況/シナリオで使用できます。

• CSSの静的または動的プロパティを変更できるjQuery関数を適用できます。
• jQueryを使用して、フォームイベント、キーボードイベント、マウスイベント、ブラウザイベントなどのイベントで関数を呼び出すことができます。
• jQueryを使用してDOM要素を操作（追加、編集、または削除）できます。
• jQueryは、静的位置を徐々に別の位置に変更することで、HTML要素のアニメーション効果に使用できます。

Q＃29）jQueryAjaxメソッドに使用される4つのパラメーターをリストしてください。

回答： リクエストが送信されるURLアドレス、リクエストのタイプ（GETまたはPOST）、サーバーに送信されるデータ/コンテンツ、およびリクエストされたページをキャッシュするかどうかをブラウザが許可する条件は、jQueryAjaxメソッドに使用される4つのパラメータです。

Q＃30）jQueryフィルターの機能について説明してください。

回答： jQueryの.filter（）は一致した要素をチェックし、属性を一致した要素に追加できます。

たとえば、.filter（）の場合、次のようになります。



リスト要素を検索/除外するためのjQuery.filter（）APIのコード行は次のとおりです。

$( 'li' ).filter( ':even' ).css( 'background-color', 'yellow' );

上記のメソッド呼び出しの結果は、インデックス0、2、4などにあるテキストPhysics、Mathematics、History、Frenchなどの黄色の背景になります（インデックスは0から始まるため、0は偶数です）。下の画像に示されています。



Q＃31）jQueryのショートカットとして使用される特殊文字は何ですか？

回答： $はjQueryの代わりに使用されます。

例： jQuery（document）.ready（function（）; $（document）.ready（function（）として使用できます

Q＃32）jQueryをデバッグするさまざまな方法を説明してください。

回答： jQueryコードをデバッグする方法はいくつかあります。

Google Chrome、Mozilla Firefox、Opera、Safariなどの最新のブラウザには、Javascriptデバッガが組み込まれています。 jQueryコードをデバッグするには、キーボードからF12キーを押すと、デバッガーが組み込まれているブラウザーでUIが開き、(コンソール)メニューが選択されます。エラーがある場合は、コンソールメニューに表示されます。

console.log（）をコードに書き込んでエラーテキストを取得できます。また、デバッガーを作成することもできます。コード行の間に、デバッガーのためにスクリプトがデバッグモードで起動し、ブラウザーでF12を押すとコンソールが開き、コードがデバッグされます。F10を押すと、jQueryオブジェクトの値が読み取られます。これが、jQueryコードをデバッグする方法です。 。

Q＃33）ページにjQueryを含めることができる可能な方法を説明してください。

回答： 圧縮された製品版jquery-3.4.1.min.jsをhttps://jquery.com/download/サイトからダウンロードして、プロジェクトフォルダーの下のlibフォルダーに保存できます。

Android用の最高のスパイ電話アプリ

私） 以下のように、project / lib / Scriptsのローカルフォルダーからjqueryを参照できます。

ii） MicrosoftCDNなどのコンテンツ配信ネットワークサイトから以下のように参照できます。

Q＃34）jQueryの.each（）メソッドの機能を説明してください。

回答： jQuery .each（）は、jQueryオブジェクトに存在するDOM要素を反復/一覧表示するために使用されます。

例

var veg_list = { Onion, Capsicum, Sweet Potato, Cauliflower, Bitter Gourd, Brinjal }; $.each(veg_list, function (index, value) { console.log(value); }); // displays output as Onion Capsicum Sweet Potato, Cauliflower Bitter Gourd Brinjal

Q＃35）jQueryの.prop（）メソッドと.attr（）メソッドを区別します。

回答： 以下は、.prop（）と.attr（）の違いです。

例：



.airファイルを開く方法

jQueryコードには、以下に示すように、画像の属性値を変更するattr（）メソッドが含まれています。



jQueryの.attr（）メソッドは、画像の幅や境界線などの属性を変更します。

$（selector）.attr（要素の属性、属性が変更される値）。

jQueryの.prop（）メソッドは、チェック状態、選択状態、無効状態などのDOMプロパティを返したり変更したりするために使用されます。

Pink


チェックボックスとしての入力タイプの場合、値はピンク色で、DOMプロパティがチェックされています。



jQueryコードには、要素の表示プロパティを変更するprop（）メソッドが含まれています。



.attr（）メソッドは、ここで「ピンク」の値を選択するのに役立ちますが、.prop（）メソッドは、ここで「チェック」されているプロパティを選択します。

Q＃36）jQuery.noConflictの機能について説明してください。

回答： jQuery以外のフレームワークを使用する必要がある場合に競合を解決するためにjQueryのnoConflict（）メソッドが適用されます。

例えば、 Mootools、prototype、zeptoなどの多くのJavaScriptライブラリは、jQueryコードのテキストjQueryの代わりに使用される関数または変数名である$を使用します。そのような場合、.noConflict（）メソッドで$を使用できます。他のスクリプトが使用できるようにすることによるショートカット識別子。

Q＃37）jQueryでwidth（）とcss（ ‘width’）を区別します。

回答： jQueryには、要素の幅を変更するための2つの異なるメソッドがあります。最初の方法は.css（property）を使用することであり、もう1つの方法は.property（）を使用することです。

例：

$(selector).css(property,value_change); $(selector).property(value_change);

この場合はwidthである.css（property）で、value_changeにpx、たとえば300pxを追加する必要があります。

.property（value_change）を使用できます。この場合はwidthであり、pxを追加する必要はありませんが、直接値を追加する必要があります。

Q＃38）jQueryのparam（）メソッドはどこに適用できますか？

回答： 配列、プレーンオブジェクト、またはjqueryオブジェクトをバイトストリームの形式で表示して、jQueryのparam（）メソッドを使用してメモリ、ファイル、またはデータベースに格納できるようにすることができます。

Q＃39）jQueryで$（this）とthisを区別します。

回答： $（this）はjQueryオブジェクトですが、これはJavaScriptのグローバルオブジェクト参照であり、これを使用してHTMLドキュメントのDOM要素を参照できます。

$（this）は親オブジェクトを参照しますが、これはDOM要素を参照します。これは、配列の場合、現在の反復を表示する.each（）メソッドを持つオブジェクトを表します。

Q＃40）jQueryでのCookieの読み取り、Cookieの書き込み、Cookieの削除の機能について説明してください。

回答： Webサイトにアクセスすると、Cookieは、コ​​ンピューター上の小さなテキストファイルに保存されるユーザーの名前などのデータ値です。 Cookieは、Webサイトに再度アクセスするときに、ユーザーの名前を覚えておくのに役立ちます。 JavaScriptとjQueryは、document.cookieプロパティを使用して、Cookieを作成、読み取り、削除します。

Q＃41）jQueryでのserialize（）メソッドの使用法は何ですか？

回答： フォームの値をシリアル化して、シリアル化された値をAJAXリクエストの作成中にURLクエリ文字列で使用できるようにします。

jQueryの.serialize（）メソッドは、HTMLフォームの入力値を文字列の形式で返します。

Q＃42）jQueryでのval（）メソッドの使用法は何ですか？

回答： .val（）メソッドは、HTML要素の属性の値を見つけるのに役立ちます。 例えば、 input、select、textareaなどのフォーム要素。 Val（）は、チェックボックスとラジオボタン、およびドロップダウンリストから一致するすべての要素の値を検索するためにも適用されます。

構文で説明された例

// form elements such as dropdown with select tag and id mylst, the value of the selected option will have syntax as below $( 'select#mylst option:checked' ).val(); // form element such as a set of radio buttons with input type as radio and name rdobtn, the value can be retrieved $( 'input(type=radio)(name=rdobtn):checked' ).val();

Q＃43）jQueryのメソッドチェーンとは何ですか？それはどのような利点を提供しますか？

回答： jQueryメソッドチェーンを使用すると、すべてのメソッドが別のメソッドを呼び出すために利用できるjQueryオブジェクトを返すため、1行のコードに複数のアクションを適用できます。

チェーンを使用しない場合、jQueryメソッドは別の行で次々に呼び出されますが、チェーンを使用する場合、jQueryメソッドはドットで区切られた1行のコードで記述されます。

記述する必要のある複数行のコードを連鎖させずに、jQueryでDOM全体を検索して一致する要素を探し、コードの各行に単一のメソッドを適用します。チェーンは、パフォーマンスを向上させることにより、DOMから一致する要素を1回だけ選択する必要があります。

Q＃44）jQuery.get（）とjQuery.ajax（）の違いは何ですか？

回答： jQuery.ajax（）メソッドはHTTP Ajaxリクエストを送信するために使用されますが、jQuery.get（）メソッドはサーバーからデータをロードするためのHTTPGETリクエストを送信するために使用されます。

Q＃45）QUnitとは何ですか？

回答： QUnitは、jQuery、jQuery UI、およびjQuery Mobile用に記述されたJavaScriptコードをテストするフレームワークであり、期待される結果を検証するためにアサーションとテストフィクスチャを使用します。

Q＃46）jQueryは要素に関連するデータをどのように保存しますか？

回答： jQuery.data（）メソッドは、メモリリークのない、あらゆるタイプのデータをDOM要素にアタッチするのに役立ちます。 jQueryは、jQueryメソッドを介して削除されたDOM要素とともにデータが削除されていることを確認します。

要素に関連するデータを保存および取得するためのコード。

$('#myDiv').data('keyName', { foo : 'bar'}); $('#myDiv').data('keyName'); // { foo : 'bar'}

Q＃47）正規表現でクエリ文字列を抽出するさまざまな手順を説明できますか？

回答： 次の2つの方法で、正規表現を使用してクエリ文字列を抽出できます。

1. 文字列ベースのアプローチ： このメソッドは、.replace（）メソッドを使用して、同等の正規表現を比較することにより、文字列を導出するのに役立ちます。
2. 正規表現アプローチ： JavaScriptの文字列と比較して、クエリ文字列とパターンを抽出するための最も強力な方法を使用する必要があります。パターンと比較するための.exec（）および.test（）メソッドの使用。 match（）、matchAll（）、replace（）、search（）、split（）は、Stringの他のいくつかのメソッドです。

Q＃48）jQueryのfinishメソッドの概念を説明してください。

回答： キューに入れられたすべてのアニメーションを停止し、それらを最終状態にするために、.finish（）メソッドが使用されます。

Q＃49）stop（true、true）メソッドとfinishメソッドの呼び出しを区別します。

回答： .finish（）メソッドは、キューをクリアしてアニメーションを終了状態にするのに役立ちますが、.stop（）メソッドは、現在実行中のアニメーションを即座に停止することにより、要素で呼び出されます。

Q＃50）jQueryを使用してブラウザ固有のコードを作成するにはどうすればよいですか？

回答： 以下に示すコードとして、navigator.userAgentを使用してjQueryでブラウザー固有のコードを記述し、Internet Explorer、Chrome、Firefox、Safari、およびOperaのブラウザーを識別できます。

if (navigator.userAgent.search('MSIE') >= 0) { // JQuery Code once navigator.userAgent identifies Microsoft Internet Explorer browser. } else if (navigator.userAgent.search('Chrome') >= 0) { // JQuery Code once navigator.userAgent identifies Google Chrome browser. } else if (navigator.userAgent.search('Firefox') >= 0) { // JQuery Code once navigator.userAgent identifies Mozilla Firefox browser. } else if (navigator.userAgent.search('Safari') >= 0 && navigator.userAgent.search('Chrome') <0) { // JQuery Code once navigator.userAgent identifies either Safari or Chrome browser type. } else if (navigator.userAgent.search('Opera')>= 0) { // JQuery Code once navigator.userAgent identifies Opera browser. }

Q＃51）jQueryで変数のデータ型をチェックする手順は何ですか？

回答： jQuery関数type（）は、配列、文​​字列、数値、関数、オブジェクトのデータ型など、変数のデータ型を識別するために使用されます。

結論

jQueryは、ドキュメントオブジェクトモデル操作JavaScriptライブラリであり、主にHTMLドキュメントトラバースおよびブラウザイベントを管理するためのDOMおよびAjaxアニメーションを作成するクロスブラウザJavaScript開発で使用されます。

「jQuery」で最もよく聞かれる面接の質問への回答が非常に役立つことを願っています。できるだけ多くの質問を練習し、自信を持ってください。

面接に最適です!!

推奨読書

• 面接の質問と回答
• ETLテストの面接の質問と回答
• Salesforceインタビューの上位50の質問と回答(2021年更新)
• いくつかのトリッキーな手動テストの質問と回答
• トップ50の最も人気のあるCCNAインタビューの質問と回答
• トップ51ブートストラップインタビューの質問と回答
• トップ50以上のデータベースインタビューの質問と回答
• 25のベストアジャイルテストインタビューの質問と回答