Основные функции jQuery: примеры, команды и методы

Опубликованно 10.01.2019 07:32

Библиотека 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 для выбора элементов DOM (Document Object Model). Этот метод выбора элемент DOM является кратким и зависит от браузера, который влияет на два самых важных проблем при программировании на JavaScript. В результате JQuery обеспечивает быстрый, простой и эффективный, кросс-браузер выбор узлов DOM веб-страницы.

Конечно, код не единственный способ, чтобы выбрать элементы. Вы можете использовать класс объектов или отдельных свойств этих элементов. Например, вы можете выбрать все элементы класса:

$( ' .голосование ' ); <script type="text/javascript"> $(документ).ready(function() { var id = $("#author").text(); }); </script>

Эта задача иллюстрирует общие рекомендации по работе с JQuery: запуск функции $ (document) .ready () возникает, когда веб-страница готова, и он загружается в конце страницы. С точки зрения пользователя, это означает, что любая страница загружается нормально, а затем использует JQuery для улучшения страницы.

Используя предыдущий код, идентификатор будет прочитано при выполнении. Вы можете проверить это с помощью функции JavaScript alert (). Управление элементами веб-страницы

Когда HTML-элементов были выбраны, вы, безусловно, нужно управлять, изменяя их класс CSS, добавляя текст или даже полностью заменяя их. JQuery предоставляет функции для решения всех этих задач.

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

function Count(id, firstName, lastName, url) { this.id = id; this.имя = имя; this.имя = имя; это.url = url; } var author = new Author("1", "Julien", "Дюбуа");

Потому что знаете код, вы можете выбрать элемент <div>, и заменить текст этого элемента:

$("#author").replaceWith("Author: <b>" + author.first_name + "" + 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); } консоли.log(multiply(2,2)); //выход: 4

Если вам нужна программа для загрузки / установки / удаления значений, вы можете объявить функцию как переменную, как она. Это может быть полезно для назначения переменной в объявлении, рассчитана с помощью функции.

var multiply = function(x,y) { return (x * y); } консоли.log(multiply(2,2)); //выход: 4 //Эта же функция, но с его дом на, чтобы задать значение переменной: var multiply = function(x,y) { return (x * y); }(2,2); консоли.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 (). Скажем, в диалоговом окне был КОД для всплывающего окна. Вы можете использовать следующий код, чтобы удалить его:

$('#popup').remove();

Функции .remove () не ограничивается только одним членом. Предположим, что вы хотите удалить все теги <span>, который относится к классу ошибок. Вы можете сделать это:

$('span.error').remove(); Анонимные функции

Чтобы использовать функцию each (), вы передаете специальный аргумент-это анонимная функция. Анонимная функция-это просто функция, содержащий шаги, которые необходимо выполнить для каждого элемента.

Она не содержит имен. Вот основная структура анонимной функции:

function() { //ваш код здесь }

Потому что не имеет имени, вы не способ вызова функции. Например, с помощью jQuery с именем функции, что вы используете его имя с помощью круглых скобках, например: calculateSalesTax (). Вместо этого, вы используете анонимные функции в качестве аргумента, что вы перейти к другой функции (странным и запутанным, но это правда). JQuery выполнение функции each () следующий:

$ (' selector') .each ( );function() {} И в заключение

Эта статья поможет начинающим jQuery. jQuery-это просто библиотека JavaScript, которая использует сокращенные объекты, функции, анонимные и платные методы.

С помощью jQuery, программист JavaScript имеет доступ к много мощных инструментов, общих для настольных компьютеров и мобильных развития, таких как создание обработчиков событий и эффекты использования интерфейс пользователя, возможность контролировать свой пользовательский интерфейс без необходимости обновления всей страницы и создания асинхронных вызовов для быстрого отклика веб-приложения. С помощью jQuery, вы можете перенести ваши веб-страниц на следующий уровень. Автор: Кот Дарья 30 Сентября 2018 Года

Категория: обо всём