Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Базовое использование jQuery при создании сайта

Самой распространенной библиотекой, упрощающей работу с JavaScript на данный момент, несомненно, является jQuery. Сегодня мы бегло пробежимся по базовым возможностям этой популярной библиотеки.

Базовое использование jQuery при создании сайта

JQuery - это не отдельная и самостоятельная технология, а лишь библиотека функций, написанная на JavaScript, и использующая весь его функционал. JQuery позволяет писать более простой и лаконичный в сравнении с чистым JavaScript код (от программиста требуется гораздо меньше действий), но при этом необходимо подключить библиотеку jQuery в виде отдельного файла с расширением JS.

jquery-random-codeВзаимодействие с кодом происходит не на уровне объектов HTML (как в случае с JavaScript), а на уровне собственных JQuery-объектов, которые создаются посредством вот такой конструкции - $(). В круглых скобках обычно указывается CSS-селектор нужного элемента в виде строки, заключенной в одинарные / двойные кавычки.

К примеру, конструкция $("p#item") создаст JQuery-объект, в котором поместит HTML-элемент «p» с id = item. В свою очередь, конструкция $("p") создаст JQuery-объект, в котором поместит все HTML-элементы «p», присутствующие в документе (коллекция элементов). Вместо CSS-селектора можно передать DOM-выборку, к примеру, document.body.children[2]. В данном случае вернется HTML-элемент, являющийся вторым ребенком у body.

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

$(document).ready(…)

Вместо многоточия прописываются эти самые действия. Сокращенный вариант данной конструкции - $().

Работа с JQuery-объектом происходит посредством методов. К примеру, конструкция задаст желтый цвет фона всем параграфам.

$("p").css("background", "yellow"); 

Как вы видите, здесь используется метод css, в который передается 2 параметра – название свойства и его значение (все в виде строк). Если передать только название свойства, то конструкция вернет его значение. Если вместо значения передать пустую строку, то свойству присвоится значение по умолчанию.

Два других часто используемых метода:

addClass("classname")

и

removeClass("classname")

Они позволяют добавлять / удалять у элементов один или несколько классов. Если классов несколько, то они пишутся через пробел.

Фильтрация выборки осуществляется посредством таких методов, как

  • is();
  • filter();
  • has();
  • not();
  • и некоторых других.

true-or-falseМетод is() всегда возвращает true / false. В него можно передавать имя класса и некоторые ключевые слова, к примеру :visible, :contains. При передаче имени класса будет происходить проверка на наличие данного класса у элементов выборки.

Метод filter("classname") вернет лишь те элементы выборки, которые имеют указанный класс.

Метод has("elementname") вернет элементы, внутри которых, в свою очередь, есть элементы elementname.

JQuery поддерживает работу с DOM-моделью. Для этой цели тут есть сразу несколько методов:

  • children()
  • find()
  • parent()
  • siblings()
  • и т.д.

Метод children() вернет всех детей текущего объекта, find() – всех потомков, parent() – родителя, siblings() – соседей на одном уровне. Метод eq(num) позволяет обратиться к определенному по счету элементу выборки (0, 1, 2, 3 и т.д.). К примеру, конструкция

$('ul').children('li').eq(1) 

вернет нам первых детей всех списков ul, которые являются элементами li.

Метод attr() позволяет получить или задать значение атрибута. К примеру,

attr("src", "image.png")

htmlзадает всем элементам из выборки атрибут src = "image.png". Если передать только первый параметр - attr("src"), то вернется значение данного атрибута (конечно, если он есть).

Методы text() и html() позволяют работать с текстовым содержимым и HTML-кодом элементов выборки. Если не передавать в них аргументы, то вернется текст и HTML-код соответственно. При передачи аргументов они заместят собой текст и HTML-код всех элементов выборки.

Метод each() позволяет задать функцию для обработки каждого из элементов выборки. К примеру, конструкция

$("a").each(function(index, element){
	element.addClass('myLink')
});

thumbs-upприсвоит каждой ссылке из конечной выборки класс myLink. Аргумент index – это порядковый номер текущего элемента, а element – сам элемент.

Подключение библиотеки jQuery к вашему сайту значительно облегчает работу с базовыми функциями JavaScript за счет их упрощения. Современные сайты используют довольно много интерактивных элементов, которые реализуются с помощью скриптов, поэтому использование библиотеки jQuery в большинстве случаев является оправданным.

На официальном сайте jQuery вы найдете исчерпывающую документацию, сможете скачать необходимые библиотеки, плагины и множество других полезных вещей.

Также рекомендуем не скачивать библиотеку на собственный сервер, а пользоваться так называемым хотлинком, подгружая необходимые файлы с официального сайта или использовать хранилище скриптов Google и Яндекс.

Таким образом, подключение библиотеки будет выглядеть, например, так:






Предыдущая статья:
Верстаем знак рубля разными способами на HTML и CSS

Читайте также:
Правильная 404 ошибка – страница не найдена

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»