JQ面接の質問

1. $。と$（）の違いは何ですか？また、それぞれの意味は何ですか

$はjQueryの別名です

そして、jQueryはjQueryライブラリによって提供される関数です（jQuery.ajax（options）と同等の$ .ajax（options）のような用途もあるため、単なる関数ではないようです）

この関数の関数は、（）のパラメーターに従ってhtmlドキュメント内の要素を検索して選択することです。この関数の関数の1つは、GetElementByIDを置き換えることですが、（）はIDだけでなく、さまざまなセレクターにすることもできます。

といった：

$（document）は、ドキュメントオブジェクト全体を選択するためのものです

$だけで置き換えることはできますか？名前の競合を防ぐために、jQueryライブラリはjQuery関数に他のエイリアスを与える別のメカニズムを提供します。

$はJQueryオブジェクト、$（）はJQuery（）であり、パラメーターを渡してDOM要素を取得できます。 

例えば：

$(".div")表示获取类名为div1的元素，例如获取<div class="div1"></div>
$(".div1").onclick表示类名为div1的div点击事件
jquery中$.，例如$.post()，$.get()，$.ajax()等这些都是jquery这个对象的方法

2. JQのIDとクラスセレクターの違いは何ですか？

IDには「＃」を使用し、クラスには「。」を使用します 

3. JQを使用して、ボタンをクリックしたときに画像を非表示にするにはどうすればよいですか？ 

$("button").click(function(){
    $("#ImageToHide").hide();
})

 4. $（document）.ready（）とはどの関数ですか

ready（）関数は、ドキュメントが準備完了状態になったときにコードを実行するために使用されます。DOMが完全にロードされると、JQコードを実行できます。

利点：すべてのブラウザーで機能します

5. window.loadイベントとJQready関数の違いは何ですか？

前者との主な違いは、DOMが作成されるのを待つことと、写真、ビデオ、オーディオなどが家の外で完了するまで待つことです。window.loadイベントでコードを実行すると、遅延が発生します。実行中。

ready（）関数は、画像や外部リソースが読み込まれるのを待たずに、DOMツリーを待つだけで済み、実行速度が速くなります。

6.すべてのHTML選択タグでオプションを見つける方法は？-わからない

 

　これは、インタビューでのトリッキーなjQueryの質問の1つです。これは基本的な質問ですが、すべてのjQuery初心者がそれを知っているとは限りません。次のjQueryセレクターを使用して、multiple = true <select>タグを持つすべての選択されたアイテムを取得できます。

$('[name=NameOfSelectedTag] :selected')

　　このコードは、属性セレクターと：selectedセレクターの組み合わせを使用し、結果として選択されたオプションのみが返されます。必要に応じて変更できます。たとえば、name属性の代わりにid属性を使用して、<select>タグを取得します。

 8. JQのeach（）はどの関数ですか？どんなふうに使うの？

9. HTML要素をDOMツリーにどのように追加しますか？ 

JQメソッドappendTo（）を使用して、HTML要素をDOMツリーに追加できます。

10. JQの$（this）とthisキーワードの違いは何ですか？

$（this）はJQオブジェクトを返します。テキストを取得するためのtext（）、値を取得するためのval（）など、複数のJQメソッドを呼び出すことができます。これは現在の要素を表し、jsキーワードの1つであり、コンテキスト内の現在のDOM要素を識別します。$（this）などの$（）関数でラップされるまで、JQメソッドを呼び出すことはできません。

11.たとえば、JQを使用してHTMLタグの属性を抽出するにはどうすればよいですか。hrefを接続しますか？

attr（）メソッドは、任意のHTML要素の属性の値を抽出するために使用されます。

$('a').each(function(){
    alter($(this).attr('href'))
})

12. JQを使用して属性値を設定するにはどうすればよいですか？

attr（）メソッドは、JQの他のメソッドattr（name、value）と同じです。ここで、nameは属性の名前であり、valueは属性の新しい値です。

13. JQのdetach（）メソッドとremove（）メソッドの違いは何ですか？ 

DOM要素を削除するために使用されます

異なる：detach（）は、過去に削除された要素を追跡します

remove（）は、過去に削除されたオブジェクトへの参照を保持します 

14. JQのメソッドチェーンとは何ですか？メソッドチェーンを使用する利点は何ですか？ 

メソッドチェーンは、1つのメソッドから返された結果に対して別のメソッドを呼び出すことです。これにより、コードが簡潔で明確になります。同時に、DOMで1ラウンドしか検索されないため、パフォーマンスが向上します。

15. JQイベントハンドラーでfalseを返した場合はどうなりますか？ 

イベントが上向きに泡立つのを防ぎます。

16. JQにはどのような種類のセレクターがありますか？

基本セレクター：id、cssタイプ、要素名は一致したDOM要素を返します 

レベルセレクター：パスセレクターとも呼ばれ、パスレベルに応じて対応するDOM要素を選択できます

フィルタセレクタ：前の条件に基づいて関連する条件をフィルタリングし、一致したDOM要素を取得します

17. JQを使用して、ページ上のすべての要素の境界線を2px幅の破線に設定しますか？

<script language="javascript" type="text/javascript">
        $("*").css("border","2px dotted red")
</script>

 18.ボタンをクリックしたときにJQを使用してダイアログボックスをポップアップするにはどうすればよいですか？

HTML
<input id="inputField" type="text" size="12" />
JQ
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        alert($("#inputFiled").attr("value"))
    })
})
</script>

  19. JQを使用して、ブラウザの進むボタンと戻るボタンを無効にするにはどうすればよいですか？

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        window.history.forward(1);
        window.history.forward(-1);
    })
</script>

 20.なぜJQを使用するのですか？メリットは何ですか？

1. jQueryは軽量フレームワークであるため、サイズは30kb未満です。2
。強力なセレクターと優れたDOM操作カプセル化を備えています。3 。
信頼性の高いイベント処理メカニズムを備えています（jQueryはイベントバインディングを処理する際に非常に信頼性があります）
4。完璧なajax （そのajaxパッケージは非常に優れており、複雑なブラウザーの互換性やXMLHttpRequestオブジェクトの作成と使用を考慮する必要はありません。）
5。優れたブラウザー互換性
6.サポートチェーン操作、暗黙の反復
7、動作レイヤーと構造レイヤーの分離、豊富なプラグインもサポートされており、jqueryドキュメントも非常に豊富です

21. jQueryのセレクターと、セレクターとは何か知っていますか？

大まかに：基本セレクター、レベルセレクター、フォームセレクター

• 基本的なセレクター：IDセレクター、タグセレクター、クラスセレクターなど。
• 階層セレクター：例：$（ "form input"）はフォーム要素内のすべての入力要素を選択します$（ "＃main> *"）はidがmainであるすべての子要素を選択します
• フィルタセレクタ：例：$（ "tr：first"）はすべてのtr要素の最初を選択します$（ "tr：last"）はすべてのtr要素の最後を選択します
• フォームセレクター：例：$（ "：input"）はすべてのフォーム入力要素を選択します$（ "：text"）はすべてのテキスト入力要素を選択します 

22.JQオブジェクトとDOMオブジェクトはどのように変換されますか 

jQueryオブジェクトはdomオブジェクトを含む配列です。domオブジェクトはjQueryオブジェクト[添え字]から取得できます
。domオブジェクトを$（ ""）に入れて、jQueryオブジェクトに変換します。

 23.jQueryでアニメーションを使用する方法

• 非表示：hide（）
• 表示：show（）
• フェードインとフェードアウト：fadeIn（）==フェードイン（表示）fadeOut（）==フェードアウト（消える）
• スライド：slideUp（）==スライドアップslideDown（）==スライドダウン 

24. jQueryで使用されているノードの挿入方法と、それらの違いは何ですか 

要素内に追加を
追加：一致した各要素内にコンテンツを追加 
        <p>言いたい：</ p>
        $（ "p"）。append（ "<b>こんにちは</ b>"） 
        <p>したい言う：<b>こんにちは</ b> </ p>

appendTo：一致したすべての要素を指定された要素に追加します 
        <p>言いたい：</ p> 
        $（ "<b>こんにちは</ b>"）。appendTo（ "p"） 
        <p>言いたい：< b>こんにちは</ b> </ p>

prepend：一致した各要素の内部にコンテンツを追加します 
        <p>言いたいこと：</ p> 
        $（ "p"）。prepend（ "<b> Hello </ b>"） 
        <p> <b> Hello </ b>言いたいこと：</ p>

prependTo：一致したすべての要素を指定された要素の前に追加します 
        <p>言いたいこと：</ p> 
        $（ "<b>こんにちは</ b>"）。prependTo（ "p"） 
        <p> <b>こんにちは< / b>言いたいこと：</ p>

要素の外側の
後に追加：一致した各要素の後にコンテンツを挿入 
        <p>言いたい：</ p> 
        $（ "p"）。after（ "<b> Hello </ b>"） 
        <p>欲しい言う：</ p> <b>こんにちは</ b>

insertAfter：一致したすべての要素を指定された要素の後ろに挿入します 
        <p>言いたいこと：</ p> 
        $（ "<b>こんにちは</ b>"）。insertAfter（ "p"） 
        <p> I言いたい：</ p> <b>こんにちは</ b>

before：一致する各要素の前にコンテンツを挿入します 
        <p>言いたいこと：</ p> 
        $（ "p"）。before（ "<b> Hello </ b>"） 
        <b> Hello </ b> b> <p>言いたいこと：</ p>

insertBefore：指定された要素の前に一致するすべての要素を挿入します 
        <p>言いたいこと：</ p> 
        $（ "<b> Hello </ b>"）。insertBefore（ "p"） 
        <b> You Ok < / b> <p>言いたいこと：</ p> 

 25.jQueryで属性を取得および設定する方法

• attr（）を使用して、要素属性を取得および設定できます
• 要素属性を削除するremoveAttr（）メソッド       

26. HTMLとテキストの値を設定して取得するにはどうすればよいですか？ 

• HTMlを取得：$（ "Selector"）。html（）
• テキストの値を取得します：$（ "selector"）。text（）         

 27. jQueryでノードをトラバースできるメソッドは何ですか？

• children（）：子孫要素に関係なく、一致した要素の子要素のセットを取得します$（function（）{$（ "div"）。children（）}）
• next（）一致した要素の直後に兄弟要素を取得します
• prev（）一致した要素の直前の兄弟要素を取得します
• siblings（）一致した要素の前後のすべての兄弟要素を取得します 

28.無線単一選択グループの2番目の要素は、現在選択されている値、その取得方法です。

 $（ 'input [type = radio]'）[1] .checked = true

29. jQueryを最適化するにはどうすればよいですか？ 

• キャッシュは頻繁にDOMオブジェクトを操作します
• クラスセレクターの代わりにIDセレクターを使用してみてください
• 常に#idセレクターから継承
• チェーン操作を使用してみてください
• バインディングイベントで時間デリゲートを使用する
• jQueryの内部関数data（）を使用してデータを保存する
• 最新バージョンのjQueryを使用する 

30. jQuery 1つのオブジェクトが同時に複数のイベントをバインドできますが、これはどのように実現されますか？ 

$("#btn").on("mouseover mouseout", func);
  $("#btn").on({
      mouseover: func1,
      mouseout: func2,
      click: func3
  });

31. jQueryのbind（）、live（）、delegate（）、on（）の違いは何ですか？ 

• ターゲット要素に直接バインドします
• ライブはバブリングを通じてイベントをブロードキャストし、デフォルトのドキュメントで動的データをサポートします
• 委任イベントプロキシのより正確で小規模な使用、パフォーマンスはライブよりも優れています
• onは、前の3つのメソッドを最新バージョン1.9に統合する新しいイベントバインディングメカニズムです。

 32. jQuery.fnのinitメソッドによって返されるこれはどのオブジェクトを参照しますか？なぜこれを返すのですか？

jQuery.fnのinitメソッドによって返されるこれはjQueryオブジェクトです。
ユーザーはjQuery（）または$（）を使用してjQueryオブジェクトを初期化できます。initメソッドを動的に呼び出す必要はありません。