50 개 이상의 가장 일반적인 jQuery 인터뷰 질문 및 답변 (2021 년 업데이트)

위의 메서드 호출의 결과는 아래 이미지와 같이 항목 A, B, 1, 2, 3 및 C에 노란색 배경이됩니다.

.find () 메소드는 순회되는 DOM 요소의 모든 하위 요소를 선택합니다.

요소를 찾을 jQuery .children () API의 구문

클래스 'level-2'로 태그하십시오.
$( 'ul.level-2' ).children().css( 'background-color', 'yellow' );

위의 메서드 호출의 결과는 아래 이미지와 같이 항목 A, B, C에 노란색 배경이됩니다.



.children () 메소드는 순회중인 DOM 요소의 단일 레벨 요소를 선택합니다.

Q # 14) jQuery에서 다양한 유형의 선택기와 그 기능을 설명하십시오.

대답: jQuery 선택기는 아래 나열된 속성을 기반으로 DOM 계층 구조에서 HTML 요소를 찾고 선택하는 데 사용됩니다.

• 이름
• 신분증
• 수업
• 유형
• 가치

기본 선택기 유형은 다음과 같습니다.

• 이름
• 신분증
• 클래스 이름
• *와 같은 범용 선택기는 DOM의 모든 요소를 ​​선택합니다.
• 여러 요소. 예:
• ,

  ,.

• 속성 선택기, 예: 색상, 글꼴 스타일 또는 배경색과 같은 속성에 따라 요소를 식별 / 선택합니다.

jQuery의 다중 요소 및 속성 선택기의 예는 아래에 설명되어 있습니다.



위의 jQuery 코드에서 class 속성은 선택자이고 HTML 태그 요소 내부의 텍스트 글꼴 색상이 녹색으로 변경됩니다. 이 코드는 클래스 속성이있는 모든 요소 내의 텍스트 글꼴 색상에 영향을 미치거나 변경합니다.

Q # 15) jQuery에서 ID와 클래스 선택기를 구분하세요.

대답: 각 HTML 요소는 하나의 ID 만 가질 수 있습니다. 즉, 요소는 고유 한 ID로 식별 될 수 있지만 여러 요소에 동일한 클래스를 사용할 수 있습니다.

ID가 속성 인 DOM 요소 (예 : ID가 'gold_coin'인 요소)를 숨기기위한 jQuery의 ID 선택기의 예

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

숨기려면 클래스가 '원시'인 모든 링크를 말하십시오.

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

Q # 16) jQuery Ajax 메소드의 장점을 설명하십시오.

대답: Ajax는 DOM 및 JavaScript를 사용하여 페이지를 다시로드하지 않고도 서버에서 데이터를 요청하고받을 수 있습니다.

jQuery에서 Ajax 메서드를 사용할 때의 이점은 다음과 같습니다.

• 전체 페이지 새로 고침을 제거하고 페이지의 일부만로드 할 수있는 유연성을 제공합니다.
• 간단한 API.
• 크로스 브라우저 지원.
• GET 및 POST가 지원됩니다.
• JSON, XML, HTML 또는 스크립트 문서를 업로드합니다.

Q # 17) onload ()와 document.ready () jQuery 메소드를 구별하십시오.

대답: onload () 메서드와 document.ready () 메서드의 차이점은 JavaScript의 onload () 메서드는 웹 문서의 모든 객체가 완전히 표시 /로드 된 후에 만 ​​호출된다는 것입니다.

반면 DOM 구조가 문서에로드되면 document.ready () 메서드가 호출됩니다. document.ready () 메서드는 onload () 메서드와 비교할 때 매우 빠르게 호출됩니다. 나중에 이미지가 완전히 표시 될 때까지 기다리기 때문입니다.

Q # 18) jQuery의 connect () 메서드의 기능을 설명합니다.

대답: jQuery connect ()는 핸들러를 할당하여 함수를 다른 함수에 연결 / 바인딩하는 데 사용되는 플러그인입니다. 이 함수를 사용하여 DOM 요소의 이벤트를 사용할 수 있습니다.

Q # 19) 부트 스트랩과 자바 스크립트 플러그인에 대해 간단히 설명해주세요.

대답: Bootstrap은 웹 페이지 또는 웹 애플리케이션을 구축하기위한 HTML, CSS 및 JavaScript를 포함하는 프레임 워크 또는 도구 세트입니다. 많은 부트 스트랩 구성 요소가 작동하려면 Javascript 플러그인이 필요합니다.

Q # 20) jQuery Mobile 용 애플리케이션을 설명하십시오.

대답: jQuery Mobile은 모든 스마트 폰, 태블릿 및 데스크톱 장치에서 액세스 할 수있는 모바일 애플리케이션을 구축하도록 설계된 오픈 소스 크로스 브라우저 호환 프레임 워크입니다.

jQuery Mobile은 다양한 특수 효과를 렌더링하고 Ajax 요청 / 응답, 터치 이벤트 및 다양한 위젯을 처리하기 위해 jQuery의 jQuery 및 사용자 인터페이스에 생성됩니다.

Q # 21) jquery.min.js와 jquery.js 구분

대답: jquery.min.js와 jquery.js는 동일한 기능을 가지고 있으며, jquery.min.js는 파일 크기를 줄이고로드 속도를 높이기 위해 모든 빈 공간을 제거하여 스크립트를 실행합니다.

프로덕션 환경에서 JS 파일을 축소하면 파일이 더 빨리로드되고 더 빠르고 더 나은 페이지 성능을 제공합니다.

Q # 22) HTML 및 XML 문서에 대한 jQuery HTML 메서드의 가능성을 설명하십시오.

대답: jQuery HTML 메서드는 XML 문서에서 사용할 수 없으며 HTML 문서에서만 작동합니다.

Q # 23) jQuery UI (사용자 인터페이스)의 기능을 설명하십시오.

대답: jQuery UI는 사용자가 특정 DOM 요소를 선택, 정렬, 드래그, 드롭하고 크기를 조정할 수있는 여러 레코드 목록과 같은 다양한 사용자 인터페이스 개체를 구축 할 수있는 jQuery 라이브러리입니다.

UI 라이브러리는 또한 자동 완성, 확인란, 라디오 버튼, 날짜 선택기, 메뉴 등과 같은 내장 위젯을 생성하고 효과 숨기기, 표시 또는 토글 및 기타 애니메이션을 추가합니다.

Q # 24) jQuery 용 데이터 테이블 플러그인의 기능을 설명하십시오.

대답: 데이터 테이블은 레코드에 적용될 때 테이블 형식으로 표시되는 jQuery 플러그인입니다.

단일 및 다중 열에서 데이터를 정렬하고, 특정 레코드를 검색하고, 페이지 매김, 페이지 당 레코드를 추가하고, 테이블의 레코드를 탐색 할 수 있습니다. 데이터 테이블은 AJAX 응답뿐만 아니라 정적 데이터, 배열, JSON 데이터에 적용 할 수 있습니다.

Q # 25) CDN에서 jQuery를 호스팅 할 때의 장점을 설명하십시오.

대답: CDN (Content Delivery Network)에서 jQuery를 호스팅하면 낮은 비용과 낮은 네트워크 부하로 고 가용성 및 고성능을 지원하고, 지연 시간을 개선하고 (서버에서 데이터 패킷을주고받는 데 걸리는 시간 단축), 장치 별 버전을 제공합니다. 내용의.

예: 모바일 화면 크기에 대한 대응 성 및 민감한 데이터 또는 파일을위한 안전한 저장 용량.

Q # 26) jQuery의 .detach ()와 .remove ()의 차이점을 확인하십시오.

대답: jQuery의 detach () 메서드는 선택한 요소를 제거하지만 데이터와 이벤트는 유지합니다. jQuery의 .remove () 메소드는 요소, 데이터 및 이벤트를 제거합니다.

Q # 27) 서버 스크립팅에 jQuery 라이브러리를 사용할 수 있습니까?

대답: jQuery는 클라이언트 측 스크립팅 Javascript 라이브러리입니다. 서버 측 스크립팅에는 사용할 수 없습니다.

Q # 28) jQuery 사용에 대한 몇 가지 상황이나 시나리오를 제공 할 수 있습니까?

대답:

다음 상황 / 시나리오에서 jQuery를 사용할 수 있습니다.

• CSS 정적 또는 동적 속성을 변경할 수있는 jQuery 함수를 적용 할 수 있습니다.
• jQuery의 도움으로 Form 이벤트, 키보드 이벤트, 마우스 이벤트, 브라우저 이벤트와 같은 이벤트에 대한 함수를 호출 할 수 있습니다.
• jQuery를 사용하여 DOM 요소를 조작 (추가, 편집 또는 삭제) 할 수 있습니다.
• jQuery는 정적 위치를 다른 위치로 점진적으로 변경하여 HTML 요소의 애니메이션 효과에 사용할 수 있습니다.

Q # 29) jQuery Ajax 메소드에 사용되는 네 가지 매개 변수를 나열하십시오.

대답: 요청이 전송되는 URL 주소, 요청 유형, 즉 GET 또는 POST, 서버로 전송 될 데이터 / 콘텐츠 및 브라우저가 요청 된 페이지를 허용하거나 캐시하지 않는 조건은 jQuery Ajax 메소드에 사용되는 네 가지 매개 변수입니다.

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를 포함 할 수있는 가능한 방법을 설명하십시오.

대답: https://jquery.com/download/ 사이트에서 압축 된 프로덕션 버전 jquery-3.4.1.min.js를 다운로드하여 프로젝트 폴더 아래의 lib 폴더에 저장할 수 있습니다.

안드로이드를위한 좋은 무료 mp3 다운로더

나는) 아래와 같이 project / lib / Scripts의 로컬 폴더에서 jquery를 참조 할 수 있습니다.

ii) 아래와 같이 Microsoft CDN과 같은 콘텐츠 전송 네트워크 사이트에서 참조 할 수 있습니다.

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 ()의 차이점입니다.

예:



빅 데이터 서비스 기업

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에는 요소의 너비를 변경하는 두 가지 방법이 있습니다. 첫 번째 방법은 .css (property)를 사용하는 것이고 다른 방법은 .property ()를 사용하는 것입니다.

예:

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

이 경우 너비 인 .css (property)에서 value_change에 px를 추가해야합니다 (예 : 300px).

이 경우 너비 인 .property (value_change)를 사용할 수 있으며 px를 추가 할 필요없이 직접 값을 추가 할 필요가 없습니다.

Q # 38) jQuery에서 param () 메서드를 어디에 적용 할 수 있습니까?

대답: 배열, 일반 객체 또는 jquery 객체를 바이트 스트림 형태로 표시하여 jQuery에서 param () 메서드를 사용하여 메모리, 파일 또는 데이터베이스에 저장할 수 있습니다.

Q # 39) jQuery에서 $ (this)와 this를 구분하세요.

대답: $ (this)는 jQuery 객체 인 반면 이것은 JavaScript의 전역 객체 참조이므로이를 사용하여 HTML 문서에서 DOM 요소를 참조 할 수 있습니다.

$ (this)는 부모 객체를 참조하는 반면, 이것은 배열의 경우 현재 반복을 표시하는 .each () 메서드가있는 객체를 나타내는 DOM 요소를 참조합니다.

Q # 40) jQuery에서 쿠키 읽기, 쿠키 쓰기 및 쿠키 삭제 기능을 설명하십시오.

대답: 웹 사이트를 방문 할 때 쿠키는 컴퓨터의 작은 텍스트 파일에 저장되는 사용자 이름과 같은 데이터 값입니다. 웹 사이트를 다시 방문하는 동안 쿠키는 사용자 이름을 기억하는 데 도움이됩니다. JavaScript 및 jQuery는 document.cookie 속성을 사용하여 쿠키를 만들고 읽고 삭제합니다.

Q # 41) jQuery에서 serialize () 메서드를 사용하는 것은 무엇입니까?

대답: AJAX 요청을 만드는 동안 URL 쿼리 문자열에서 직렬화 된 값을 사용할 수 있도록 양식 값을 직렬화합니다.

jQuery의 .serialize () 메서드는 HTML 형식의 입력 값을 문자열 형식으로 반환합니다.

Q # 42) jQuery에서 val () 메서드를 사용하는 것은 무엇입니까?

대답: .val () 메서드는 HTML 요소의 속성 값을 찾는 데 도움이됩니다. 예를 들면 입력, 선택 및 텍스트 영역과 같은 양식 요소. 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에서 Method Chaining이란 무엇입니까? 어떤 이점이 있습니까?

대답: jQuery 메서드 체인을 사용하면 모든 메서드가 다른 메서드를 호출하는 데 사용할 수있는 jQuery 개체를 반환하므로 한 줄의 코드에 여러 작업을 적용 할 수 있습니다.

체이닝이 없으면 jQuery 메서드가 별도의 줄에서 차례로 호출되는 반면 체이닝에서는 jQuery 메서드가 점으로 구분 된 단일 코드 줄로 작성됩니다.

작성해야하는 여러 줄의 코드를 연결하지 않고 jQuery가 일치하는 요소에 대해 전체 DOM을 검색하도록 만들면 각 코드 줄에 단일 메서드가 적용됩니다. 체이닝은 성능을 향상시켜 DOM에서 일치하는 요소를 한 번만 선택하면됩니다.

Q # 44) jQuery.get ()과 jQuery.ajax ()의 차이점은 무엇입니까?

대답: jQuery.ajax () 메서드는 HTTP Ajax 요청을 보내는 데 사용되는 반면 jQuery.get () 메서드는 HTTP GET 요청을 보내 서버에서 데이터를로드하는 데 사용됩니다.

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) 정규식으로 쿼리 문자열을 추출하는 다양한 절차를 설명해 주시겠습니까?

대답: 다음 두 가지 방법으로 정규 표현식으로 쿼리 문자열을 추출 할 수 있습니다.

1. 문자열 기반 접근 방식 : 이 메서드는 .replace () 메서드를 사용하여 동등한 정규식을 비교하여 String을 파생하는 데 도움이됩니다.
2. 정규식 접근 방식 : JavaScript의 문자열과 비교되는 쿼리 문자열 및 패턴을 추출하는 가장 강력한 방법을 사용해야합니다. .exec () 및 .test () 메서드를 사용하여 패턴과 비교합니다. match (), matchAll (), replace (), search () 및 split ()은 String에 대한 다른 몇 가지 메서드입니다.

Q # 48) jQuery에서 finish 메소드의 개념을 설명하십시오.

대답: 대기중인 모든 애니메이션을 중지하고 최종 상태에 배치하는 데 도움이되도록 .finish () 메서드가 사용됩니다.

Q # 49) 호출 중지 (참, 참)와 종료 방법을 구분합니다.

대답: .finish () 메서드는 큐를 지우는 데 도움이되며 애니메이션이 종료 상태로 들어가는 데 도움이되는 반면, .stop () 메서드는 현재 실행중인 애니메이션을 즉시 중지하도록하여 요소에서 호출됩니다.

Q # 50) jQuery를 사용하여 브라우저 별 코드를 작성하려면 어떻게해야합니까?

대답: 아래에 작성된 코드와 같이 Internet Explorer, Chrome, Firefox, Safari 및 Opera의 브라우저를 식별하기 위해 navigator.userAgent를 사용하여 jQuery에서 브라우저 별 코드를 작성할 수 있습니다.

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는 DOM 및 Ajax 애니메이션을 생성하여 브라우저 이벤트를 관리하는 HTML 문서 탐색 및 브라우저 간 JavaScript 개발에 주로 사용되는 문서 객체 모델 조작 JavaScript 라이브러리입니다.

'jQuery'에서 가장 자주 묻는 인터뷰 질문에 대한 답변이 큰 도움이 되었기를 바랍니다. 가능한 한 많은 질문을 연습하고 자신감을 가지십시오.

인터뷰에 최선을 다하겠습니다!

추천 도서

• 인터뷰 질문 및 답변
• ETL 테스트 인터뷰 질문 및 답변
• 50 가지 주요 Salesforce 인터뷰 질문 및 답변 (2021 년 업데이트 됨)
• 까다로운 수동 테스트 질문 및 답변
• 가장 인기있는 50 가지 CCNA 인터뷰 질문 및 답변
• Top 51 Bootstrap 인터뷰 질문 및 답변
• 상위 50 개 이상의 데이터베이스 인터뷰 질문 및 답변
• 25 Best Agile Testing 인터뷰 질문 및 답변