JQUERY¶

Вопросы¶

1. Что такое jQuery?
2. Какие преимущества jQuery?
3. Чем отличаются JavaScript от jQuery?
4. jQuery это библиотека для написания сценариев на стороне клиента или на стороне сервера?
5. Является ли jQuery стандартом W3C?
6. Как начать работать с jQuery?
7. Что является отправной точкой начала выполнения кода в JQuery?
8. Что означает знак доллара ($) в JQuery?
9. Можем ли мы иметь несколько функций document.ready() на одной и той же странице?
10. Можем ли мы использовать наш собственный символ вместо знака $ в JQuery?
11. Можно ли на стороне клиента использовать другие библиотеки, такие как MooTools, Prototype вместе с JQuery?
12. Что такое jQuery.noConflict?
13. Какая разница между window.onload, document.ready() и $(function(){...});?
14. Какая разница между jquery.js и jquery.min.js ?
15. Что такое селектор в JQuery, какие типы селекторов вы знаете?
16. Какие селекторы в JQuery самые быстрые?
17. Как выбрать все элементы с id = idname
18. Как выбрать все элементы div с id = idname
19. Как выбрать все элементы с class = classname
20. Как выбрать все элементы div с class = classname
21. Как выбрать все span элементы в элементах div
22. Как выбрать все div и span элементы
23. Как выбрать предыдущий элемент от найденного
24. Как выбрать следующий элемент от найденного
25. Как выбрать все span элементы в элементах div, где span является прямым потомком div’a
26. Как выбрать все span после первого элемента div?
27. Как выбрать первый li в ul?
28. Как выбрать DIVы у которых нет класса CLS?
29. Как выбрать элементы с активной анимацией?
30. Как выбрать div-ы которые содержат класс firstclass и класс secondclass?
31. Как выбрать все div-ы с атрибутом title = test?
32. Как выбрать все отмеченные чекбоксы?
33. Как выбрать все input с type = radio?
34. Как выбрать видимый div с именем red, который содержит тег span?
35. Что выберет этот фільтр $("a[rel~= 'external ']"); ?
36. Что выберет этот фільтр $("div[name=apple]:visible:has(p)"); ?
37. Найти все элементы div с классом one, а также все элементы p с классом two, затем добавить им всем класс three и визуально плавно спустить вниз?
38. Сделать так, чтобы при нажатии на элемент <а> алертом выводилось "Hello world!".
39. Что быстрее document.getElementByID('txtName') или $('#txtName')?
40. Какая разница между $(this) и 'this' в jQuery?
41. Как проверить, что элемент пустой?
42. Как проверить существует ли элемент в JQuery?
43. Для чего используется функция jQuery ".each()"?
44. Какая разница между $('div') и $('<div/>') в jQuery?
45. Какая разница между parent(), parents(), closest() в jQuery?
46. Какая разница между get() и eq() методами в jQuery?
47. Как добавить анимацию в jQuery?
48. Как отключить JQuery анимацию?
49. Как остановить текущую запущенную анимацию в JQuery?
50. В чем разница между методами .empty () .remove () и .detach () в JQuery?
51. Какая разница между .bind() .live() .delegate() и .on()?
52. Как создать клон объекта в JQuery?
53. В чем разница между prop и attr?
54. Что такое event.preventDefault?
55. В чем разница между event.PreventDefault и event.stopPropagation?
56. Как проверить есть переменная числом, используя JQuery 1.7+?
57. Как проверить тип данных переменной в JQuery?
58. Как привязать обработчик события к выбранному элементу, которое должно быть выполнено только один раз?
59. Можно ли удерживать или задержать выполнение document.ready на некоторое время?
60. Что такое цепочка методов в jQuery?
61. Можем ли мы использовать JQuery, чтобы сделать AJAX запрос?
62. Какими методами можно сделать AJAX запрос в JQuery?
63. Что такое отсроченные(Deferred) объекты в jQuery?
64. Что делает метод finish()?
65. Можно ли не указывать протокол в URL когда jQuery ссылается на CDNs?
66. Что такое jQuery плагины и какие преимущества их использования?

Ответы¶

Что такое 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).
• Множество различных эфектов
• Использование Ajax становится намного проще.
• Кросс-браузерная совместимость
• Огромное количество плагинов, с помощью которых можно сделать практически все что угодно.
• Простота использования
• Очень удобная документация и активное комьюнити, готовое всегда оказать помощь при необходимости.

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

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

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

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

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

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

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

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

<script type="text/javascript" scr="/jquery.js"></script>

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

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

Для выполнения нашего скрипта в jQuery, нам необходимо поместить весь наш скрипт в функцию. Эта функция будет выполнена при полной готовности DOM. Отправной точкой является функция $(document).ready(). Пример:

$(document).ready(function(){
    // Code here
});

Объясню что этот код означает.

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

Мы выбираем элемент "document" - это основной элемент документа в браузере. ready() - это событие, оно срабатывает, в нашем случае, когда выбранный элемент "document" будет готов. Далее мы создаем функцию и вызываем в ней любой JavaScript/JQuery код.

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

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

$(document).ready(function(){
});

здесь знак $ можно заменить ключевое слово "JQuery".

jQuery(document).ready(function(){
});

Можем ли мы иметь несколько функций 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.
Мы можем отдать контроль над переменной $ другой библиотеке с помощью метода $.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!".¶

jQuery(function($) {
    $("a").click(function() {
        alert("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().

$("#mydiv")[0] == document.getElementById("mydiv")

Как проверить, что элемент пустой?¶

Как проверить существует ли элемент в JQuery?¶

Для чего используется функция jQuery ".each()"?¶

Какая разница между $('div') и $('<div/>') в jQuery?¶

Какая разница между parent(), parents(), closest() в jQuery?¶

Какая разница между get() и eq() методами в jQuery?¶

Как добавить анимацию в jQuery?¶

Как отключить JQuery анимацию?¶

Как остановить текущую запущенную анимацию в JQuery?¶

В чем разница между методами .empty () .remove () и .detach () в JQuery?¶

Какая разница между .bind() .live() .delegate() и .on()?¶

Как создать клон объекта в JQuery?¶

В чем разница между prop и attr?¶

Что такое event.preventDefault?¶

В чем разница между event.PreventDefault и event.stopPropagation?¶

Как проверить есть переменная числом, используя JQuery 1.7+?¶

Как проверить тип данных переменной в JQuery?¶

Как привязать обработчик события к выбранному элементу, которое должно быть выполнено только один раз?¶

Можно ли удерживать или задержать выполнение document.ready на некоторое время?¶

Что такое цепочка методов в jQuery?¶

Можем ли мы использовать JQuery, чтобы сделать AJAX запрос?¶

Какими методами можно сделать AJAX запрос в JQuery?¶

Что такое отсроченные(Deferred) объекты в jQuery?¶

Что делает метод finish()?¶

Можно ли не указывать протокол в URL когда jQuery ссылается на CDNs?¶

Что такое jQuery плагины и какие преимущества их использования?¶