Ответы на вопросы на собеседование jQuery (часть 1).

  • Что такое jQuery?

jQuery - это быстрая, легковесная и многофункциональная JavaScript-библиотека (некоторые называют ее фреймворком), фокусирующаяся на взаимодействии JavaScript, HTML и CSS, с ее помощью легко сделать анимацию, добавить взаимодействие Ajax, манипулировать содержимим страницы, изменить стиль и обеспечить крутой UI-эффект. Это одна из самых популярных библиотек на стороне клиента. Она обеспечивает кроссбраузерную поддержку приложений (работает в Internet Explorer 6.0+, Mozilla Firefox 2+, Safari 3.0+, Opera 9.0+ и Chrome). Автор библиотеки Джон Резиг (John Resig) впервые представил свое творение в январе 2006.

  • Какие преимущества jQuery?

Вот только некоторые преимущества jQuery: 
  • Существенно уменьшается количество кода (необходимого для работы скрипта) по сравнению с JavaScript, что в свою очередь означает меньше временных затрат и более читабельный код.
  • Намного проще понять код (в отличии от JavaScript). 
  • Облегчает манипулирование моделью документа DOM
  • Множество различных эфектов
  • Использование Ajax становится намного проще.
  • Кросс-браузерная совместимость
  • Огромное количество плагинов, с помощью которых можно сделать практически все что угодно.
  • Простота использования
  • Очень удобная документация и активное комьюнити, готовое всегда оказать помощь при необходимости. 

  • Чем отличаются JavaScript от jQuery?

Javascript - это язык программирования, с помощью которого веб-страницам придается интерактивность. jQuery это библиотека, написанная на javascript. 

  • jQuery это библиотека для написания сценариев на стороне клиента или на стороне сервера?

На стороне клиента.

  • Является ли jQuery стандартом W3C?

Нет jQuery не является стандартом W3C. 

  • Как начать работать с jQuery?

Первым делом Вам необходимо посетить главную страницу официального сайта jQuery и скачать наиболее свежую версию данного фреймворка. После необходимо закачать этот файл к себе, и в шапке документа прописать ссылку на этот файл.
В качестве альтернативы, можно воспользоваться помощью Гугла и поставить ссылку на их сервер, где находятся всегда свежие версии любых фреймворков.

  • Что является отправной точкой начала выполнения кода в JQuery?

Для выполнения нашего скрипта в jQuery, нам необходимо поместить весь наш скрипт в функцию. Эта функция будет выполнена при полной готовности DOM. Отправной точкой является функция $(document).ready(). Пример:
Объясню что этот код означает.
$() - это селектор, он позволяет выбрать нужный Вам HTML тег для дальнейшей манипуляции.
Мы выбираем элемент "document" - это основной элемент документа в браузере.
ready() - это событие, оно срабатывает, в нашем случае, когда выбранный элемент "document" будет готов.
Далее мы создаем функцию и вызываем в ней любой JavaScript/JQuery код. 

  • Что означает знак доллара ($) в JQuery?

$() - это селектор, он позволяет выбрать нужный Вам HTML тег для дальнейшей манипуляции. Также ($) ето псевдоним для JQuery. Простой пример:
 
здесь знак $ можно заменить ключевое слово "JQuery".
 

  • Можем ли мы иметь несколько функций document.ready() на одной и той же странице?

Да. Мы можем иметь любое количество функций document.ready() на одной и той же странице. 

  • Можем ли мы использовать наш собственный символ вместо знака $ в JQuery?

Да. Ето вполне возможно,  с использованием jQuery.noConflict(). 

  • Можно ли на стороне клиента использовать другие библиотеки, такие как MooTools, Prototype вместе с JQuery?

Да. 

  • Что такое jQuery.noConflict?

Этот метод отключает использование $ в качестве переменной jQuery.
jQuery.noConflict( [ removeAll ] )
removeAll  - ето логическое значение, указывающее, нужно ли освобождать все  имена переменных, занятые jQuery. По умолчанию false.
Многие другие javascript библиотеки, так же как и jQuery используют $ как имя переменной или функции. Однако, в случае jQuery, $ является синонимом (алиасом) идентификатора jQuery. Поэтому, при освобождении имени $ с помощью jQuery.noConflict() мы не теряем функциональности библиотеки jQuery, посколько можем использовать вместо него jQuery.
Если необходимо использовать другую JavaScript-библиотеку наряду jQuery, мы можем отдать контроль над переменной $ другой библиотеке с помощью метода $.noConflict():
Эту технику удобно применить, если использовать сразу несколько библиотек:
создаём алиас на jQuery:

  • Какая разница между window.onload, document.ready() и $(function(){...});?

onload - это событиев DOM, срабатывает после загрузки всего содержимого, включая и изображения, и прочее. 
$(document).ready - возникает в момент готовности дерева DOM, то есть не ожидает загрузки изображений. 
$(function(){...}); - это тоже самое, что $(document).ready(function () { ... }); 

  • Какая разница между jquery.js и jquery.min.js ?

jquery.js (без приставки min в названии) - этот файл используется для разработки веб-сайтов и скриптов. Он представляет собой несжатый и легко читаемый Javascript код.
jquery.min.js  (добавлена приставка min в название файла) - отличие этого файла от предыдущего в том, что этот файл  является более компактным, т.к. в нем удалены: 
  • отступы
  • переносы строк
  • укорачиваются имена переменных
Преимущества, объем очень значительно уменьшается.
Что касается функциональности обоих файлов, то она одинакова. Функции одни и те же. 

  • Что такое селектор  в JQuery, какие типы селекторов вы знаете?

Для работы с элементами на странице, сначала нам нужно их найти. Для того, чтобы найти HTML элемент в JQuery мы используем селекторы. Есть много типов селектор, основные из них селекторы:
  • #ID - Соответствует единственному элементу с заданным атрибутом ID.
  • element - Соответствует всем элементам с заданным именем.
  • .class - Соответствует всем элементам данного класса.
  • .class.class - Соответствует всем элементам данных классов.
  • * - Соответствует всему.
  • selector1, selector2, selectorN - Выводит результат в зависимости от комбинации указанных селекторов. 

  • Какие селекторы в JQuery самые быстрые?

Самыми быстрыми селекторами в JQuery являются ID и element селекторы.

  • Как выбрать все элементы с id = idname

$( '#idname ');

  • Как выбрать все элементы div с id = idname 

$( 'div#idname ');

  • Как выбрать все элементы с class = classname 

$( '.classname ');

  • Как выбрать все элементы div с class = classname 

$( 'div.classname ');

  • Как выбрать все span элементы в элементах div

$( 'div span ');
или так:
$( 'div ').find('span ');

  • Как выбрать все div и span элементы 

$( 'div, span ');

  • Как выбрать предыдущий элемент от найденного

$( '#banner ').prev();

  • Как выбрать следующий элемент от найденного 

$( '#banner ').next();

  • Как выбрать все span элементы в элементах div, где span является прямым потомком div’a 

$( 'div > span ');

  • Как выбрать все span после первого элемента div?

$( 'div ~ span ');

  • Как выбрать первый li в ul?

$( 'ul li:first-child ');

  • Как выбрать div`ы у которых нет класса cls?

$( 'div:not(.cls) ');

  • Как выбрать элементы с активной анимацией?

$( 'div:animated ');

  • Как выбрать div-ы которые содержат класс firstclass и класс secondclass?

$( 'div.firstclass ').filter('.secondclass ');

  • Как выбрать все div-ы с атрибутом title = test?

$( "div[title= 'test '] ");

  • Как выбрать все отмеченные чекбоксы?

$( 'input:checked ');

  • Как выбрать все input с type = radio?

$( 'input:radio ');

  • Как выбрать видимый div с именем red, который содержит тег span?

$( "div[name=red]:visible:has(span) ");

  • Что выберет этот фільтр $("a[rel~= 'external ']"); ?

Все <а> с атрибутом rel содержащим external в списке значений разделенных пробелом.

  • Что выберет этот фільтр $("div[name=apple]:visible:has(p)"); ?

Выберет видимый div с именем apple, который содержит тег p.

  • Найти все элементы div с классом one, а также все элементы p с классом two, затем добавить им всем класс three и визуально плавно спустить вниз?

$("div.one").add("p.two").addClass("three").slideDown("slow");

  • Сделать так, чтобы при нажатии на элемент <а> алертом выводилось "Hello world!". 


  • Что быстрее document.getElementByID('txtName') или $('#txtName')?

JavaScript запрос всегда быстрее, так как для выбора txtName метод JQuery "$('#txtName')" делает вызов document.getElementById ('txtName').  

  • Какая разница между $(this) и 'this' в jQuery?

$(this), когда Вы собираетесь работать с объектом jQuery. Если же Вы хотите обратиться напрямую к объекту DOM, тогда Вам нужен именно this.
Стоит учитывать, что jQuery всегда возвращает массив, даже в том случае, если найден всего один элемент (тогда он будет первым, а точнее - нулевым элементом массива). Поэтому справедливым будет выражение $(this)[0] == this. Здесь важно понимать, что обращение к элементу jQuery по индексу в квадратных скобках вернёт не объект типа jQuery, а соответствующий ему объект DOM. Если же вы хотите из массива jQuery получить первый объект в виде jQuery-сущности, используйте для этого функцию eq().

jQuery (часть 2).

Рассказать друзьям:

2 коментарі :

  1. Круто! Спасибо большое за jQuery для новичков!

    ОтветитьУдалить
  2. Очень даже не плохо , особенно для понимая об общей сущности JQuery , советую к прочтению

    ОтветитьУдалить