Что такое jQuery (беглый взгляд)

9.05.13 25.01.15 Нет 4248

Что такое jQuery?

jQuery представляет собой быструю, маленькую и с богатыми возможностями библиотеку JavaScript. Она позволяет обрабатывать и манипулировать элементами DOM, обрабатывать события, анимацию и Ajax гораздо проще, с использованием API, которая без проблем работает на множестве браузеров. Сочетание универсальности и расширяемости библиотеки jQuery обеспечивает иной уровень и подход к написанию JS скриптов.

Характеристики:

Легкость	CSS3 совместимость	Кроссбраузерность
Всего 32kB в формате min и gzip. Может быть включена в качестве AMD модуля	Поддерживает селекторы CSS3, равно как и действия со стилевыми параметрами	IE, Firefox, Safari, Opera, Chrome, и др.

Некоторые направления использования библиотеки jQuery с примерами:

Обработка и манипулирование элементами DOM:

Получить элемент <button> с классом 'continue' и изменить надпись на 'Следующий шаг...'

$( "button.continue" ).html( "Следующий шаг…" )

Обработка событий:

Показать элемент #banner-message, который скрыт с помощью display:none в CSS, когда нажата любая кнопка в #button-container.

var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
hiddenBox.show();
});

Ajax:

Вызвать локальный скрипт на сервере /api/getWeather с параметром запроса страны (zipcode=97201) и заменить содержимое элемента #weather-temp полученным текстом.

$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201
},
success: function( data ) {
$( "#weather-temp" ).html( "" + data + " градусов" );
}
});

Как работает jQuery

jQuery: Основы

Это базовая информация в помощь начинающим пользоваться jQuery.
Создайте тестовую страницу с HTML кодом:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Демо</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
// Ваш код здесь
</script>
</body>
</html>

Атрибут src в элементе <script> должен указывать на копию jQuery. Скачайте копию библиотеки jQuery со Страницы загрузки и сохраните ее как файл jquery.js в той же директории, где находится ваш тестовый HTML-файл

Запуск кода по окончании загрузки документа/страницы:

Для уверенности в том, что их код запустится после того, как браузер загрузит документ, многие програмисты на JavaScript оборачивают (помещают) свой код в функцию onload:

window.onload = function() {
alert( "Здравствуйте!" );
}

К сожалению, код в этом случае не запускается до полной загрузки изображений, включая баннеры. Чтобы запустить код как можно быстрее по загрузке документа, jQuery содержит инструкцию, известную как "событие готовности (ready event)":

$( document ).ready(function() {
// Ваш код здесь
});

Например, внутрь этой инструкции вы можете добавить ссылке обработчик клика:

$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "Спасибо за визит!" );
});
});

Сохраните ваш HTML – файл и перезагрузите браузер с этой тестовой страницей. При клике на ссылку сначала покажется alert сообщение во всплывающем окне, а затем продолжится обычный переход по ссылке http://jquery.com.

Для обработки клика и большинства других событий (events), вы можете предотвратить действия по умолчанию, вызвав функцию event.preventDefault() в обработчике:

$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "Как вы можете видеть, ссылка больше не ведет на jquery.com" );
event.preventDefault();
});
});

Пример полностью

Следующий пример иллюстрирует обработчик клика, описанный выше, встроенный непосредственно в HTML элемент <body>. Обратите внимание, в реальности обычно лучше поместить ваш код в отдельный файл js и загрузить его в страницу в атрибуте src элемента <script>.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Демо</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "Ссылка больше не ведет на jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>

Добавление и удаление класса HTML

Важно: вы должны поместить нижеприведенные примеры внутрь инструкции ready event, так что ваш код сработает при ее выполнении.

Другая частая задача – это добавление или удаление класса.

Во-первых, добавьте некоторую информацию в секцию <head> документа, примерно так:

Потом, добавьте вызов addClass() в скрипт:

$( "a" ).addClass( "test" );

Все элементы станут жирными.

Для удаление существующего класса, используйте функцию removeClass():

$( "a" ).removeClass( "test" );

Специальные эффекты

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

$( "a" ).click(function( event ){
event.preventDefault();
$( this ).hide( "slow" );
});

то ссылка медленно исчезнет после клика по ней.

Обратные вызовы и функции

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

Для использования обратных вызовов, важно знать способ вставки их в родительскую функцию.

Обратный вызов без аргументов

Если обратный вызов не содержит аргументов, то эту функцию можно встроить таким образом:

$.get( "myhtmlpage.html", myCallBack );

Когда $.get закончит загрузку myhtmlpage.html, она отработает функцию обратного вызова. Обратите внимание, что вторым параметром выступает просто имя функции (но не в виде строки и без скобок).

Обратный вызов с аргументами

Выполнение обратного вызова с аргументами может быть несколько сложнее.

Не ~~правильно~~ :

Этот пример не будет работать:

$.get( "myhtmlpage.html", myCallBack( param1, param2 ) );

Причина ошибки в том, что код будет выполнять обратный вызов myCallBack( param1, param2 ) незамедлительно и потом вернет значение отработки функции обратного вызова в качестве второго параметра функции $.get. На самом деле нам нужно ни выполнить обратный вызов myCallBack, ни получить возвращаемое значение от myCallBack( param1, param2 ) (которое может как быть, так может и не быть функцией). Так что, как обойти выполнение обратного вызова myCallBack и учесть ее аргументы?

Правильно

Для различения функции обратного вызова с параметрами, вы можете использовать безымянную функцию в качестве обертки. Обратите внимение на использование function() {. Безымянная функция выполняет одну роль: вызывает функцию обратного вызова myCallBack с параметрами param1 и param2.

$.get( "myhtmlpage.html", function() {
myCallBack( param1, param2 );
});

Когда $.get заканчивает загрузку myhtmlpage.html, она вызывает безымянную функцию, которая, в свою очередь, выполняет myCallBack( param1, param2 ).

Источник