jQuery — это библиотека Javascript, которая упрощает программирование на JavaScript™ и AJAX (асинхронный JavaScript + XML, асинхронный Javascript и XML). В отличие от других библиотек Javascript, jQuery имеет свою собственную философию, которая упрощает написание кода. Эта статья поможет вам понять философию jQuery, обсудить ее особенности и функции, а также предоставить несколько примеров ajax и способы использования плагинов для расширения jQuery.
1. Что такое jQuery?
jQuery — отличная библиотека Javascript. Она родилась в 2006 году и была создана Джоном Ресигом. Если вы новичок в JavaScript, но хотите опробовать сложность DOM (объектной модели документа) и Ajax, или вы эксперт в JavaScript, но устали повторять скучные сценарии DOM и Ajax, jQuery станет вашим лучшим выбором. .
jQuery поможет вам сделать ваш код простым и кратким. Вам больше не придется писать множество повторяющихся циклов или сценариев вызовов DOM. Используя jQuery, вы быстро найдете ключевые моменты и выразите свои идеи с помощью минимального количества кода.
Философия jQuery на самом деле очень проста: проста и допускает многократное использование. Когда вы поймете и согласитесь с этой идеей, вы начнете понимать, насколько простым и приятным использование jQuery может сделать ваше программирование!
2. Несколько простых концепций
Вот простой пример, показывающий, как jQuery влияет на написанный вами код. То, что вы делаете, на самом деле очень просто, например, добавляете событие ответа на клик ко всем ссылкам в определенной области на странице. Для написания этого кода можно использовать общий Javascript и DOM:
Листинг 1. Сценарий DOM без него
.jQuery
var external_links = document.getElementById('external_links');varlinks = external_links.getElementsByTagName('a');for (var i=0;i <links.length;i++) {var link =links.item(i) ;link.onclick = function() {return Confirm('Вы собираетесь посетить: ' + this.href);};} Если вы используете jQuery, реализация будет следующей: Листинг 2. Создание сценариев DOM с помощью jQuery$(' #external_links a').click( function() {return submit('Вы собираетесь посетить: ' + this.href);}); Удивлены, правда? С помощью jQuery вы можете быстро найти ключевые моменты и выразить только то, что вам нужно, без многословия. Нет необходимости перебирать эти элементы, функция click() позаботится обо всем этом. И вам не нужно писать слишком много кода для управления DOM. Все, что вам нужно, это использовать несколько символов для определения искомого элемента. Давайте посмотрим, как работает этот код, с некоторыми хитростями. Сначала взгляните на функцию $() — одну из самых полезных и мощных функций в jQuery. Большую часть времени вы используете эту функцию для выбора элементов из документа. В этом примере используйте эту функцию для передачи строк в каскадировании. Синтаксис таблиц стилей (CSS), jQuery может легко найти этот элемент. Если вы немного разбираетесь в основных селекторах CSS, я думаю, что этот синтаксис должен показаться вам довольно знакомым. В листинге 2 используется # external_links для поиска элементов с идентификатором external_links. Следующий пробел означает, что jQuery необходимо найти все элементы <a> внутри элемента #external_links. Выразить это на разговорном языке немного сложно — писать в DOM-скрипте тоже довольно хлопотно, однако в CSS нет ничего проще. чем это. Функция $() возвращает объект jQuery, содержащий все элементы, соответствующие селектору CSS. Концепция объекта jQuery похожа на массив, но он может содержать множество объектов jQuery. Например, вы можете вызвать функцию click. для привязки ответа на событие щелчка к каждому элементу объекта jQuery.
Вы также можете передать элемент или массив элементов в функцию $(), которая добавит все элементы, упакованные в объект jQuery. Возможно, вы захотите применить. эту функцию для таких объектов, как окна. Например, вы можете использовать эту функцию для загрузки событий, например:
window.onload = function() {// делаем это, когда страница завершает загрузку}; Если вы используете jQuery, вы можете написать так:
$(window).load(function() {// запустите это, когда вся страница будет загружена}); Как вы знаете, ожидание загрузки окна чрезвычайно болезненно, потому что должна быть загружена вся страница, включая все, что находится на ней. image страницы. В некоторых случаях вам необходимо сначала загрузить изображение, но в большинстве случаев вам может потребоваться только просмотреть гипертекстовую разметку (HTML). jQuery решает эту проблему, создавая в документе специальное событие. метод использования следующий: $(document).ready(function() {// делаем это, когда HTML полностью готов}); Этот код создает объект jQuery элемента документа, а затем вызывает его, когда HTML DOM документ готов. Этот экземпляр Вы можете вызывать эту функцию неограниченное количество раз.
В настоящем кодировании в стиле jQuery существует также сокращенная форма этой функции. Просто передайте функцию функции $():
$(function() {// запустите это, когда HTML загрузится}); Пока что я показал вам три различных способа использования функции $(). Четвертый способ: вы можете использовать строку, создающую элемент. Результатом является объект jQuery, содержащий этот элемент. В листинге 3 показан пример добавления абзаца на страницу:
Листинг 3. Создание и добавление простого абзаца
$('<p></p>' html('Hey World). !').css('background', 'yellow').appendTo("body"); Как видно из приведенного выше примера, еще одной очень мощной функцией jQuery является связывание методов (цепочка методов) каждый раз, когда вы вызываете для объекта jQuery, этот метод также вернет объект jQuery. Это означает, что если вам нужно вызвать несколько методов для объекта jQuery, вам не придется повторно писать селекторы CSS. Это может выглядеть так:
$('#message').css('background', 'yellow').html('Hello!').show();3.jQuery делает Ajax чрезвычайно простым. Используя jQuery, Ajax не может стать проще jQuery. имеет ряд функций, которые могут сделать простые вещи действительно простыми и сделать сложные вещи максимально простыми. Обычно Ajax используется для загрузки фрагмента html-кода в определенную область на странице. Чтобы сделать это, вы просто выбираете. элемент и используйте функцию load(). Вот пример обновления некоторой статистики $('#stats').load('stats.html'); Обычно вам может потребоваться передать некоторые параметры на сервер: Как вы уже догадались, использовать jQuery очень просто. Конечно, вы можете использовать $.post() или $.get(), в зависимости от ваших конкретных потребностей. необязательный объект данных и функция обратного вызова. Листинг 4 представляет собой простой пример отправки данных и использования функции обратного вызова:
Листинг 4. Отправка данных на страницу с помощью Ajax
$.post('save.cgi', {text: 'my string' ,number: 23}, function() {alert('Ваши данные сохранены.');}); Если вам действительно нужен сложный Ajax-код, используйте функцию $.ajax(). Тип данных можно указать как. xml, html, script или json, jQuery автоматически подготовит для вас результаты, и ваша функция обратного вызова сможет немедленно использовать данные. Вы также можете установить функции обратного вызова beforeSend, error, Success и Complete, чтобы дать пользователю дополнительные подсказки об ajax. Кроме того, есть некоторые параметры, которые позволяют вам установить тайм-аут для запросов ajax или статус страницы «последнее изменение». В листинге 5 показан пример получения XML-документа и использования упомянутого выше метода. пример некоторых параметров:
Листинг 5. Сложный Ajax, упрощенный с помощью $.ajax()
$.ajax({url: 'document.xml',type: 'GET',dataType: 'xml',timeout: 1000, error: function (){alert('Ошибка загрузки XML-документа');},success: function(xml){// сделайте что-нибудь с xml}}); Когда вы успешно получите обратную связь по XML, вы можете использовать jQuery для обхода XML-документа, просто как и в случае с html. Это упрощает манипулирование XML-файлом и интеграцию его содержимого в страницу. Листинг 6 расширяет функцию успеха в соответствии с каждым <item> в XML-документе. Листинг
6
.. Работа с XML с использованием jQuery
: function(xml){$(xml).find('item').each(function(){var item_text = $(this).text();$('<li>< /li>').html(item_text).appendTo('ol');});}