Пример jQuery. Простые примеры скриптов на jQuery
Опубликованно 26.04.2018 00:07
jQuery-это библиотека JavaScript, которая позволяет веб-разработчикам добавлять новые функции в свои веб-сайты. Доступен с открытым исходным кодом и доступен бесплатно по лицензии MIT. В последние годы, jQuery стала самая популярная библиотека JavaScript, который используется в веб-разработке.Пример jQuery
Для реализации jQuery, веб-разработчик должен сделать ссылку на файл JavaScript в HTML-код веб-страницы. На некоторых сайтах помещается собственную локальную копию, в то время как другие просто ссылаются на библиотеку Google или сервер. Например, веб-страницы можно загрузить библиотеку jQuery, используя следующую строку в раздел <head> в HTML (например, jQuery и cookies):
<script type="text/javascript"
SRC="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Примеры jQuery и Ajax
После загрузки библиотеки веб-сайте вы можете вызывать любую функцию, совместим с библиотекой. Общие примеры включают в себя изменения в текст, обработка данных формы, перемещение элементов на странице и проведения анимации. jQuery также может работать с Ajax-кода и скриптов, языков, таких как PHP и ASP, для доступа к данным базы данных. Потому что jQuery работает на стороне клиента (а не на веб-сервере), вы можете обновить данные на веб-странице в реальном времени, не перезагружая страницу. Типичным примером является автозаполнение в форме поиска автоматически отображает общие данные при вводе.Преимущества библиотеки
Кроме лицензии, другой основной причиной, по которой jQuery завоевала такую популярность, является кросс-браузер, совместимый. Потому что каждый браузер отображает HTML, CSS и JavaScript по-разному, веб-разработчику может быть трудно сделать сайт одинаково во всех браузерах. Вместо того, чтобы писать пользовательские функции для каждого браузера, веб-разработчик может использовать функции jQuery, который будет работать в Chrome, Safari, Firefox и Internet Explorer. Поддержка нескольких браузеров заставила многих разработчиков перейти на стандартный JavaScript, jQuery, поскольку это значительно упрощает процесс кодирования.
Описание
Синтаксис jQuery используется для упрощения навигации по документу, отбор элементов DOM, создания анимации, обработки событий и разработки приложений Ajax. jQuery также предлагает разработчикам возможность создавать плагины, выше библиотеки JavaScript. Это позволяет разработчикам создавать абстрактные конструкции и взаимодействия, анимация на низком уровне, продвинутые эффекты на высоком уровне, темы виджеты. Модульный принцип библиотеки jQuery, которая позволяет создавать мощные динамические web-страницы и web-приложений.
Набор основных функций:отбор элементов DOM;обход и манипуляции с механизмом отбора;новый стиль программирования;алгоритмы слияния и структуры данных МОВ.
Стиль оказал влияние на архитектуру других фреймов, JavaScript, такие как YUI v3 и Додзе, и также привела к созданию стандарта Selectors API.
Nokia и Microsoft поставляют jQuery на их платформах. Microsoft в комплекте с Visual Studio для использования в рамках ASP.NET AJAX и ASP.NET MVC, и Nokia интегрировала в платформу разработки виджета времени.
Обзор
jQuery-это библиотека элементов объектной модели документов (DOM). DOM-это представление древовидной структуре, все элементы веб-страницы. jQuery упрощает синтаксис для поиска, выбора и контроля этих элементов DOM. Библиотеку можно использовать для поиска элемента в документ с определенным свойством (например, все элементы с тегом h1), изменения одного или нескольких их свойств (цвет, прозрачность) или принятия мер в ответ на событие (например, щелчок мышью).Развитие
Библиотека использует функции, которые используются в JavaScript, как fade in, и fade out скрыть элементы анимации и работы с элементами jQuery, CSS. jQuery также обеспечивает парадигму для управление событиями, которые выходят за рамки выбора и манипуляции элементами DOM. Назначение события, а определение функции обратного вызова выполняются с шагом в том же месте кода.
Принципы разработки с помощью jQuery (примеры):Разделение JavaScript и HTML — библиотека предоставляет простой синтаксис, чтобы добавить обработчики событий в DOM с помощью JavaScript, вместо добавления атрибутов событий в HTML, чтобы вызов функции JS. Таким образом, это стимулирует разработчиков полностью отделить код JavaScript в HTML-код.Краткость и ясность, способствует краткости и ясности с инструменты, такие как строки и сокращения названий функций.Удаление кросс-браузер несовместимость — JavaScript-двигатели разных браузерах немного отличаются, поэтому код JS, который работает в браузере, может не работать для другой. Как и другой набор функций JavaScript, jQuery обрабатывает все эти мульти-браузер несоответствий и обеспечивает общий интерфейс, который работает в разных браузерах.Расширяемость — новые события, элементы и методы могут быть легко добавлены, а затем снова использовать в качестве plug-in.История
jQuery был первоначально размещен в январе 2006 года на BarCamp НЬЮ-Йорка Джон Давления и находился под влиянием раннего библиотеки cssQuery Дин Эдвардс. В настоящее время, поддерживается командой разработчиков под руководством Тимми Использования (стартер селектор jQuery — Софт, который возглавляет Ричард Гибсон).
Характеристики
Библиотека включает в себя следующие функции:отбор элементов DOM с несколькими серверами механизм переключателя с открытым кодом Софт;выбор проекта DOM-манипуляции базе CSS селекторов, которые используются имена и атрибуты элементов, таких как id и class, в качестве критериев для выбора узлов DOM;мероприятия;эффектов и анимации;ajax;объекты, сохраняемые и обещание для управления асинхронной обработки;анализ JSON;расширяемость с помощью плагинов;утилиты, такие как определение его функций;режимы совместимости, которые изначально доступны в современных браузерах, но в более ранних версиях, таких как inArray () и each (), мульти-браузер (не путать с cross-browser).Использование
JQuery-это JavaScript-файла, который содержит все общие функции DOM, события, эффекты и Ajax. Он может быть включен в веб-страницы через ссылки на локальную копию, или в одной из многочисленных копий, имеющихся в публичных серверов. Библиотека работает с сетью доставки контента (CDN), опубликованной MaxCDN.
Пример на jQuery и PHP:
<script src="jquery.js"></script>
Стили
jQuery имеет двух стилей:Через функцию $, что является фабрикой метод для объекта jQuery. Эти функции, часто называют команды представляют собой целые числа, так как возвращают объекты jQuery.Через $ — префикс функции. Это утилиты, которые непосредственно не воздействуют на объект.
Доступ к JQuery и предлагает несколько узлов DOM, как правило, начинается с вызова функции $ с помощью строки селектора CSS. Это возвращает объект jQuery, который ссылается на все элементы HTML-страницы.Конфликт режим
jQuery включает режим".noConflict (), который освобождает управления функции $. Это полезно, если вы используете jQuery с другими библиотеками, которые также используют $ в качестве идентификатора. В режиме без конфликтов, разработчики могут использовать библиотеку в качестве замены $ без потери функциональности.
Расширенные функции
Функция обратного вызова для обработки событий для элементов, которые еще не загружены, могут быть зарегистрированы в интерьере .ready () как анонимную функцию. Эти обработчики будут вызываться только тогда, когда происходит событие. Например, следующий код добавляет обработчик для мыши на элемент изображения, img:
$(function (){
$('img').on('click',function(){
//обрабатываем событие click на любой элемент img на странице
});
}).
Некоторые функции возвращают определенные значения (например, $('#input-user-email').Val()). В этих случаях строка не работает, так как не ссылается на объект jQuery.Создание новых элементов
Помимо доступа к узлам DOM через иерархию объектов, также можно создавать новые элементы, если строка, посылаемая в качестве аргумента в $ (), он выглядит как HTML. Например, цепь находится пункт выбора HTML-кода с идентификационных карточек и добавляет элемент параметр со значением VAG и текст Volkswagen:
$('# выберите carmakes')
.append($('<option/>')
.attr({значение:VAG})
.append (Volkswagen)).Программа
Функция jQuery с префиксом $ являются функциями полезности, которые влияют на свойства и поведение. В следующем примере используется функция each (), которая проходит через массивы:
$.each([1,2,3],function(){
console.log (+1);
});
Этот пример post jQuery пишет 2, 3, 4 в консоли.Ajax
Можно сделать мульти-браузер Ajax запросов с помощью $ .ajax () jQuery, пример, который может служить, как и связанные методы для загрузки и обработки данных удаленных:
$.ajax({
тип: ПОСТ,
url: '/process/submit.php',
данных: {
имя: Джон,
местоположение: 'Бостон',
},
}).done(function(msg){
alert('Saved Data:'+msg);
}).fail(function(xmlHttpRequest, statusText, errorThrown){
предупреждение(
"Не удалось отправить сообщение.N '
+'XML Http Request:'+JSON.stringify(xmlHttpRequest)
+ ', Статус Текст:'+statusText
+ ', Error Thrown:'+errorThrown);
});
В этом примере, на сервер, на указании имени данных=Джон и location=Boston для /process/submit.php. Когда запрос завершается, вызывается функция предупреждения пользователя. Если запрос завершается неудачно, предупредит пользователя об ошибке, о состоянии запроса и ошибки.Плагины
Архитектура jQuery, что позволяет разработчикам создавать надстройки, код для расширения различных функций. В Интернете доступны тысячи плагинов, которые охватывают широкий спектр функций, таких, как помощники Ajax, веб-сервисов, динамических списков, инструменты XML и XSLT, перетащить, мероприятий, управление cookies и модальных.
Существуют и другие плагины для поисковых систем, таких как jquer.in, которые используют более специализированные подходы, например, перечислить только те плагины, которые отвечают определенным критериям (например, те, у которых есть публичный репозиторий кода). Разработчик предлагает "учебный Центр" — ресурс, jQuery для начинающих, который может помочь пользователям понять, JavaScript и приступить к разработке модулей.jQuery UI
jQuery UI-это набор виджетов графического интерфейса пользователя, анимационные, визуальные эффекты и цели, проведенных с помощью jQuery CSS (библиотека JavaScript, css и HTML. В соответствии с сервис-аналитики, JavaScript, Libscore, пользовательского интерфейса jQuery используется в более 197000 лучших веб-сайтов, что делает его второй по популярности библиотеки JS. Самые известные из них: Pinterest, PayPal, IMDb, The Huffington Post и Netflix.
jQuery UI-это бесплатный и с открытым исходным кодом, распределенная Foundation под лицензией MIT. Впервые был опубликован в сентябре 2007 года.jQuery Mobile
jQuery Mobile это веб-сайт инфраструктуры на ощупь, оптимизация (также известный как мобильная инфраструктура). Основное внимание в разработке уделяется внимание созданию инфраструктуры, совместимо с широким диапазоном смартфонов и планшетов, необходимые для растущего рынка цифровой техники". Совместим с другими платформами для мобильных приложений, таких как PhoneGap, Worklight и многие другие.
Категория: Техника
