Библиотека jQuery позволяет легко управлять страницей HTML после ее отображения браузером. Он также предоставляет инструменты, что помогут вам создать анимацию на вашей странице, и инструменты, которые позволяют вам общаться с сервером без перезагрузки страницы.
Работа с функциями JQuery
JavaScript – довольно низкоуровневый язык программирования. Он не обеспечивает расширенным управлением и анимацией. Более того, использование прямого JavaScript может вызвать проблемы, связанные с несовместимостью браузера.
JQuery, популярная библиотека JavaScript с открытым исходным кодом, предоставляет множество расширенных кросс-браузерных JQuery функций, которые могут улучшить ваши веб-приложения. Эта статья начинается с основ, а затем показывает, как расширить JQuery с помощью своей системы.
JQuery – это библиотека JavaScript, поэтому установка – это просто вопрос импорта скрипта внутри веб-страницы. Однако есть несколько рекомендаций, которые следует учитывать:
- Библиотека JQuery доступна через CDN. Использование CDN вместо установки JQuery на ваших серверах должно обеспечить значительную производительность и увеличить пропускную способность.
- Как и любой статический контент, файлы JQuery должны быть сжаты. Вот почему доступны две версии JQuery: минимальная (или минимизированная) версия, небольшая и эффективная, и версия для разработки, которую легче читать и отлаживать. Для остальной части этой статьи мы будем использовать минимальную версию, которой достаточно для наших нужд.
- Файлы библиотеки JQuery должны быть кэшированы на стороне клиента, поэтому вы должны использовать номер версии JQuery в имени файла.
Элементы JQuery
Самый простой способ начать работу с JQuery – это выбрать некоторые элементы на нашей веб-странице.
$ ( ' # author ' )$ не является ключевым словом для JavaScript. Это однобуквенная функция определенная JQuery. Текст, переданный этой функции, анализируется JQuery, который затем генерирует правильную серию функций JavaScript для выбора элементов Document Object Model (DOM). Этот метод выбора элементов DOM является кратким и независимым от браузера, который затрагивает две наиболее важные проблемы, возникающие при программировании JavaScript. В результате JQuery обеспечивает быстрый, простой и эффективный кросс-браузерный выбор узлов DOM на веб-странице.
Конечно, идентификатор – это не единственный способ выбора элементов. Вы можете использовать класс элементов или некоторые свойства этих элементов. Например, вы можете выбрать все элементы с классом:
$( ' .vote ' );
<script type="text/javascript">
$(document).ready(function() {
var id = $("#author").text();
});
</script>Эта задача иллюстрирует общую передовую практику с JQuery: запуск функции $ (document) .ready () происходит, когда веб-страница готова, и она загружается в конце страницы. С точки зрения пользователя это означает, что вся страница загружается нормально, а затем JQuery используется для улучшения страницы.
Используя предыдущий код, идентификатор будет считан во время запуска. Вы можете проверить это, используя функцию JavaScript alert ().
Управление элементами веб-страницы
После того как элементы HTML были выбраны, вам, безусловно, нужно будет управлять ими, изменив их класс CSS, добавив текст или даже полностью заменив их. JQuery предоставляет функции для всех этих задач.
Вариант использования, который можно реализовать, заключается в замене идентификатора, который выбран ранее. С этой информацией: имя автора, фамилия автора и URL. На данный момент эта информация будет храниться статически внутри JavaScript-кода. Вот информация, которую временно можно закодировать в JavaScript-коде:
function Author(id, firstName, lastName, url) {
this.id = id;
this.firstName = firstName;
this.lastName = lastName; this.url = url;
}
var author = new Author("1", "Julien", "Dubois");Поскольку известен идентификатор, можно выбрать элемент <div>, и заменить текст из этого элемента:
$("#author").replaceWith("Author: <b>" + author.firstName + " " + author.lastName +
"</b><br/>" + "website: <a href=\"" + author.url +
"\"> + author.url + "</a>");JQuery предоставляет множество других функций для изменения элемента HTML. Например, можно заставить элемент появляться или исчезать с помощью функций show() и hide().Альтернативным способом было бы изменить класс CSS, используемый элементом; для этого JQuery предоставляет функции для добавления класса, удаления класса или проверки наличия класса.
Теперь, когда идентификатор был заменен информацией, попробуем отобразить эту информацию.
Анимация с помощью JQuery
Добавить некоторые анимации. JQuery предоставляет богатый набор анимаций, который обеспечивает плавный пользовательский интерфейс. Вы можете протестировать все анимации на официальном веб-сайте.
Конечно, если злоупотреблять анимацией, то ресурс станет трудно использовать. Поэтому нужно найти правильный баланс, чтобы иметь красивый веб-сайт.
Вернемся к примеру. Для примера выберем простую анимацию скольжения:
$("#author-wrapper").slideDown("slow");
Использование анимации с AJAX очень важно с точки зрения пользователя:
- Анимация скрывает тот факт, что некоторые запросы требуют времени для обработки на стороне сервера.
- Анимации привлекают внимание пользователя к тому, что меняется на веб-странице. Без анимации пользователь может не заметить, что часть страницы изменилась.
Возможности функций JQuery
Функции представляют собой способ выполнения набора сценариев поведения, и в зависимости от функции они могут даже принимать разные аргументы.
Вызов функции jQuery определяется с помощью function – ключевого слова. Далее за ним обязательно следует имя функции, список разделенных запятыми аргументов, заключенных в круглые скобки, и, если необходимо, оператор JavaScript. JQuery параметры функции, заключенную в фигурные скобки {}.
function sayHello(name) {
return('Hello ' + name);
}Во многих случаях вы можете заменить многие строки своего собственного программирования JavaScript (и часы, необходимые для их проверки) с помощью одной функции из библиотеки JavaScript.
При необходимости написать простую функцию multiply (x, y), которая просто принимает два параметра x и y, выполняет простые x раз y равно чему-то, и возвращает значение. Вот один из способов сделать это:
function multiply(x,y) {
return (x * y);
}
console.log(multiply(2,2));
//вывод: 4Если вам нужна утилита для получения / установки / удаления значений, можно объявить функцию как переменную, подобную этой. Это может быть полезно для назначения переменной в объявлении, вычисленном функцией.
var multiply = function(x,y) {
return (x * y);
}
console.log(multiply(2,2));
//вывод: 4
//Эта же функция, но с самоисполнением, чтобы установить значение переменной:
var multiply = function(x,y) {
return (x * y);
}(2,2);
console.log(multiply);
//вывод: 4Ниже будет приведено еще несколько jQuery функций.
Добавление содержимого на страницу
jQuery предоставляет функции для управления элементами и контентом на странице, просто заменяя HTML, чтобы точно позиционировать новый HTML по отношению к выбранному элементу, полностью удалить теги и содержимое со страницы.
Функция js jQuery .html () может читать текущий HTML внутри элемента и заменять текущее содержимое другим HTML-кодом. Используйте функцию .html () в сочетании с выбором jQuery. Чтобы получить HTML-код, находящийся внутри выделения, просто достаточно добавить:
.html ()После выбора jQuery. Например, вы можете запустить следующую команду, используя фрагмент HTML вначале этого раздела:
alert($('#errors').html());Этот код создает окно предупреждения с текстом «<h2> Ошибки: </ h2>» в нем. Использование функции html () позволит вам сделать копию HTML внутри определенного элемента и вставить его в другой элемент на странице.
.text () работает как .html (), но он не принимает HTML-теги. Это необходимо, когда требуется заменить текст в теге.
$('#errors h2').text('No errors found');Тег <h2> остается на месте; изменяется только текст внутри.
.append () добавляет HTML в качестве последнего дочернего элемента выбранного элемента. Например, скажем, вы выбираете тег <div>, но вместо замены содержимого <div> вы просто хотите добавить некоторый HTML перед закрывающим тегом </ div>. Функция .append () - отличный способ добавить элемент в конец маркированного (<ul>) или пронумерованного (<ol>) списка.
$('#errors').append('<p>There are four errors in this form</p>');.prepend () - это точно такая же функция, как .append () , но добавляет HTML непосредственно после открытия тега для выбора. Например, скажем, вы запустите следующий код в том же HTML, который был указан ранее:
$('#errors').prepend('<p>There are four errors in this form</p>');Замена и снятие выбора
Иногда вы можете полностью заменить или удалить выбранный элемент. Например, предположим, что вы создали всплывающее диалоговое окно с использованием JavaScript. Когда посетитель нажимает кнопку «Закрыть» в диалоговом окне, вы, естественно, хотите удалить диалоговое окно со страницы.
Для этого вы можете использовать функцию jQuery remove (). Скажем, во всплывающем диалоговом окне был ID всплывающего окна. Вы можете использовать следующий код для его удаления:
$('#popup').remove();Функция .remove () не ограничивается только одним элементом. Предположим, вы хотите удалить все теги <span>, к которым применяется класс ошибок. Вы можете сделать это:
$('span.error').remove();Анонимные функции
Чтобы использовать функцию each (), вы передаете ей специальный аргумент - анонимную функцию. Анонимная функция – это просто функция, содержащая шаги, которые вы хотите выполнить для каждого выбранного элемента.
Она не содержит имен. Вот базовая структура анонимной функции:
function() {
//здесь ваш код
}
Поскольку нет имени, у вас нет способа вызвать функцию. Например, с помощью обычной именованной jQuery функции вы используете ее имя с помощью набора круглых скобок, например: calculateSalesTax (). Вместо этого вы используете анонимную функцию как аргумент, который вы передаете другой функции (странно и запутанно, но верно). В jQuery выполнение функции each () выглядит так:
$ (' selector') .each ( );function() {}И в заключении
Эта статья поможет новичкам jQuery. jQuery – это просто библиотека JavaScript, которая использует сокращенные объекты, анонимные функции и цепочки методов.
Используя jQuery, программист JavaScript имеет доступ ко многим мощным инструментам, общим для настольных и мобильных разработчиков, таких как создание обработчиков событий и использование эффектов для адаптивного пользовательского интерфейса, возможность управлять вашим пользовательским интерфейсом без необходимости обновления всей страницы и создавая асинхронные вызовы для быстрого реагирования вашего веб-приложения. С помощью jQuery вы сможете перенести свои веб-страницы на следующий уровень.
