Основные функции jQuery: примеры команд и методы
Опубликованно 16.12.2018 01:18
Библиотека 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 обеспечивает быстрый, простой и эффективный cross-browser выбор узлов DOM веб-страницы.
Конечно, id-это не единственный метод выбора элементов. Вы можете использовать класс элементы или некоторые из свойств этих элементов. Например, можно выбрать все элементы с классом:
$( ' .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.имя = имя; this.фамилия = фамилия; this.url = url; } var Date = new Date("1", "Жульен", "Дюбуа");
Уже известен идентификатор, может выбрать элемент <div>, и заменить текст этого пункта:
$("#author").replaceWith("Author: <b>" + author.имя + "" + author.lastName + "</b><br/>" + "сайт: <a href="" + author.url + ""> + author.url + "</a>");
JQuery предлагает множество других функций для изменения элемента HTML. Например, можно сделать так, что элемент появляться и исчезать с помощью функции show() и hide().Альтернативным способом было бы изменить класс CSS, который используется элемент; для этого, JQuery обеспечивает функцию, чтобы добавить класс, удаления класса или проверка существования класса.
Теперь, если идентификатор был заменен информацию, мы будем стараться, чтобы отобразить эту информацию. Анимация с JQuery
Добавить некоторые анимации. JQuery предоставляет полный набор анимации, который обеспечивает плавную работу пользовательского интерфейса. Вы можете попробовать все анимации на официальном веб-сайте.
Конечно, если злоупотреблять анимации, ресурс будет сложно использовать. Таким образом, необходимо найти правильный баланс, чтобы иметь красивый веб-сайт.
Вернемся к примеру. Для примера выберем простой анимации слайда:
$("#author-wrapper").slideDown("slow");
Использование анимации и AJAX-это очень важно с точки зрения пользователя: Анимация скрывает тот факт, что некоторые запросы требуют времени для обработки на стороне сервера. Анимации привлекают внимание пользователя к тому, что меняется на сайте. Без анимации, пользователь может даже не заметить, что сайт изменился. Функции JQuery
Функции являются формой выполнения, набор сценариев поведения, и в зависимости от функций, которые даже могут принимать разные аргументы.
Вызов функции jQuery определяется через функцию ключевого слова. Далее, за ним следует имя функции, список аргументов, разделенных запятыми и заключенных в круглые скобки, и, при необходимости, оператор JavaScript. JQuery параметров функции, заключенный в фигурные скобки {}.
function sayHello(name) { return('Привет,' + name); }
Во многих случаях, может заменить многие строки его собственного программирования JavaScript (и количество часов, необходимых для проверки) с помощью функции из библиотеки JavaScript.
Если нужно написать простую функцию multiply (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.ошибка').remove(); Анонимные функции
Чтобы использовать функцию each (), вы предоставляете s специальный аргумент-это анонимная функция. Анонимная функция-это просто функция, которая содержит инструкции, которые нужно выполнить для каждого элемента, выбранного.
Она не содержит имен и фамилий. Вот Базовая структура анонимной функции:
function() { //здесь код }
Потому что нет имени, у вас нет способа вызова функции. Например, с помощью имени jQuery функции, используя свое имя с помощью набора скобках, например: calculateSalesTax (). Вместо этого, она использует анонимную функцию в качестве аргумента, что вы передаете в другую функцию (странно и подробно, но верно). В jQuery выполнение функции each () , выглядит так:
$ (' selector') .each ( );function() {} И в заключение
Эта статья поможет новичкам jQuery. jQuery-это просто библиотека JavaScript, который использует короткие объекты, анонимные функции и цепи, методы.
С помощью jQuery, программист JavaScript имеет доступ во многие мощные инструменты, общие для настольных компьютеров и мобильных устройств, разработчиков, таких, как создание обработчиков событий, и использование эффектов адаптации интерфейса пользователя, возможность управлять интерфейсом пользователя, без необходимости обновления всей страницы и создание асинхронных вызовов для быстрого реагирования вашего веб-приложения. С помощью jQuery, вы можете передать их веб-страниц на следующий уровень. Автор: Убивает Дарья 30 Сентября 2018 года
Категория: Техника
