Разное

Jquery как использовать: Как использовать библиотеку jQuery?

29.05.2018
урок первый. Как подключить и использовать jquery на своём сайте. PHP урок № 354

Содержание

Как подключить JQuery к сайту.

Всем привет. Некоторое вступление к разделу JQuery. Создание раздела обусловлено резкой необходимостью, повышения юзабилити сайтов написанных на php, а так же простотой этой технологии и при этом огромного потенциала выполнения самых сложных задач по представлению контента сайта. Очевидно то, что вы едва познакомившись с этой библиотекой, уже сможете творить интересные и полезные вещи, за которые пользователи вашего ресурсы будут вам благодарны. Простота и лёгкость использования, библиотеки JQuery, в конечном результате и принесла ей такую популярность. Все движения, перемещения, изменения атрибутов объектов DOM, теперь стали необыкновенно просты, по сравнению с JavaScript. На основе этой библиотеки написаны множество плагинов на все случаи жизни. И они только множатся и усовершенствуются.

Первый вопрос — как подключить JQuery к сайту, для того чтоб можно было использовать эту библиотеку.

Скачать, последнюю версию JQuery, можно с официального сайта jquery.com. На момент написания статьи это была версия jquery-1.7.2.min.js. При нажатии на ссылку откроется страница со скриптом, именно её и надо сохранить. Для этого выберите в меню вашего браузера пункт Файл -> Сохранить как и укажите директорию вашего сайта куда сохранить эту библиотеку JQuery. Пусть будет называться эта папка /js.

Совет: лучше не меняйте названия файла библиотеки JQuery. Официальная версия названия, поможет вам в дальнейшем ориентироваться с какой версией вы работаете. Но если вы, всё же, решили изменить название, не волнуйтесь, на работоспособность это ни как не повлияет.

И так, после того как вы скачали файл JQuery и разместили его в папке /js, на своём сайте, можно приступать к подключению.

Подключение JQuery выглядит так:

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

Размещение JQuery выглядит так:

jQuery изнутри — введение / Хабр

По работе мне несколько раз приходилось участвовать в собеседовании кандидатов на должность клиент-сайдера у нас в компании, смотреть на их познания в Javascript. Удивительно что никто из них не знал толком как же работает jQuery изнутри, даже те, кто отметил свои знания jQuery уровнем «отлично», увы.

У jQuery очень низкий порог вхождения, о нем часто пишут и используют всюду, где только можно (и даже там, где, в общем-то, не нужно), поэтому некоторые даже не смотрят на чистый Javascript. Зачем, мол, его знать, когда есть jQuery, а по нему — тонны примеров и готовых плагинов? Даже на Хабре видел статью про рисование на Canvas, где автор подключил jQuery и использовал его только один раз — для того, чтобы получить доступ к Canvas по его идентификатору. И не считал это чем-то ненормальным.

Извините, отвлекся. Суть поста и следующих частей серии в том, чтобы рассказать о том, как же работает библиотека изнутри и что же в ней происходит по мере выполнения каких-то методов.

Исходники

Исходники проекта лежат вот тут. Все разбито на несколько модулей, собирается (у кого-то даже успешно) в одно целое с помощью Grunt. Для разбора в статье я буду использовать код последней стабильной версии (на момент написания статьи это — 1.8.3).

Образно, в этой статье мы рассмотрим скрипт, который можно получить склейкой intro.js. core.js, [sizzle] (мельком), sizzle-jquery.js, support.js (так же, мельком) и outro.js.

Скрипты intro.js и outro.js нужны просто чтобы обернуть код библиотеки в анонимную функцию, дабы не мусорить в window. В функцию передаются параметрами window и undefined (этот параметр — не передается, оттого и undefined). Зачем? У таких переменных не меняется названия в ходе минификации, а названия параметров функции — сжимаются и от таких манипуляций в итоге получается серьезный профит.

Инициализация

Первым делом при загрузке jQuery у нас отрабатывается core.js, ядро фреймворка. Что же происходит на этапе инициализации кроме объявления тонны использованных далее RegExp’ов и переменных:

Первым делом сохраняются ссылки на jQuery и его алиас $, в случае, когда они уже есть в window. Делается это на случай вызова функции noConflict, которая возвращает объект $ (а если в noConflict передан параметром true, то и jQuery) обратно на свое место, а в результате своей работы отдает нам jQuery, описанный уже в этом самом скрипте. Функция полезна, когда Вы планируете использовать свой код и jQuery на стороннем ресурсе и не хотите ничего поломать людям.

Создается локальная функция jQuery, которая и является своего рода «конструктором», которая принимает себе селектор и контекст. Функция, с которой разработчики и работают большую часть своего времени. Именно она будет в самом конце экспортирована в window.jQuery и window.$ (exports.js). Далее этот объект и будет расширяться, путем подмешивания в его прототип (jQuery.prototype, он же — jQuery.fn) дополнительных методов. Вышеупомянутый «конструктор», вызывает один из методов в jQuery.fn — init, о нем чуть ниже.

Внимание, магия:

jQuery.fn.init.prototype = jQuery.fn
Именно поэтому из результата работы этого самого «конструктора» всегда можно достучаться до всех методов jQuery.

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

Создается служебный хеш class2type, который необходим фреймворку для работы функции type и ее производных (isArray, isFunction, isNumeric и т.д.). Тут можно обратить внимание на особую магию — обычный typeof не очень удобен для определения некоторых типов переменных, поэтому в jQuery для этого и существует этот метод. Соответственно, и реализация его немножко отличается от обычного

typeof.

Ну и напоследок, создается rootjQuery, переменная, в которой лежит результат выполнения jQuery(document), именно относительно него будут искаться элементы из init, если контекст не задан разработчиком напрямую.

Вроде бы все и относительно просто, но все это касается только core.js. Любой модуль что-то делает при загрузке и их лучше рассматривать отдельно. Отдельно упомянем support.js, в котором сразу же при инициализации проводится масса тестов для определения возможностей браузера.

Объект jQuery

Итак, что же представляет из себя объект jQuery и зачем?

Обычно результат работы $([какой-то селектор]) представляет собой примерно такой вот объект:

{
    0: Элемент,
    1: Элемент2,
    context: Элемент
    length: 2,
    selector: ‘тот самый какой-то селектор’
    __proto__: (как и писали выше, прототип у объекта - jQuery.fn)
}

Именно из-за свойства length многие почему-то заблуждаются и думают о том, что это — на самом деле массив. На самом деле свойство length поддерживается внутри jQuery вручную и является количеством возвращенных элементов, которые располагаются в нумерованных с нуля ключах-индексах объекта. Делается это именно за тем, чтобы с этим объектом можно было работать как с массивом. В свойство
selector
помещается строка-селектор, если мы искали по ней, а в context — контекст, по которому искали (если не задан, то он будет — document).

Запомните, что любая функция jQuery, которая не предназначена для возвращения каких-то специальных результатов, всегда возвращает объект, прототип которого — jQuery.fn, благодаря чему можно строить довольно большие цепочки вызовов.

jQuery.fn.init

Итак, что проиcходит, когда мы выполняем что-то вроде $([какой-нибудь селектор])? Внимательно читали? Правильно, вызовется тот самый «конструктор». Если быть точнее — нам вернется new jQuery.fn.init([тот самый селектор])
.

Сначала в функции будет проверено, передан ли ей вообще селектор и в случае, если не передан (или передана пустая строка, null, false, undefined) — в этом случае нам вернется пустой объект jQuery, как если бы мы обратились к нему через window.$.

Затем будет проверено, является ли селектор — DOM-элементом. В этом случае jQuery вернет объект прямо с этим элементом. Пример с $(document.body):

{
    0: <body>,
    context: <body>,
    length: 1,
    __proto__: ...
}

В случае, если селектор является строкой, то относительно контекста (если контекста нет, то это — document, см. о rootjQuery выше) будет выполнен метод find указанного селектора, т.е.:
$('p', document.body) -> $(document.body).find('p') $('p') -> rootjQuery.find('p')

В случае, если селектор представляет из себя что-то вроде #id, то для поиска элемента будет вызван обычный document.getElementById (привет, чувак с Canvas из начала статьи).

А вот если вместо селектора передается html-код (это определяется по наличию знаков открытия тега вначале строки и закрытия — в конце), jQuery попытается его распарсить (parseHTML, который мы рассмотрим в в следующей части более подробно) и на основе него создать эти элементы и результат вернуть уже с ними. Вот что мы получим в результате работы $('я - на втором уровне')

:

{
    0: <h2>
    1: <p>
    length: 2
    __proto__: ...
}

Обратите внимание на span внутри параграфа — в результатах он тоже будет внутри него, в элементе с индексом 1.

Для случаев, когда вместо селектора на вход поступает функция, jQuery вызовет ее, когда документ будет готов к работе. Тут использованы promise, которым следует выделить отдельную главу. Многие зачем-то пользуются чуть более длинным аналогом — $(document).ready( callback ) (в комментариях говорят что так — более читабельно), но в итоге получается то же самое.

jQuery.find

Для поиска по документу в jQuery пользуется библиотека Sizzle, так что find, а так же методы expr, unique, text, isXMLDoc и contains либо напрямую ссылаются на соответствующие им методы из Sizzle, либо представляют простые методы-обертки над ними. Как работают селекторы в jQuery писалось уже неоднократно и на Хабре все это найти можно. В итоге работы find мы получим все тот же объект jQuery со всеми найденными элементами.

Отдельной строкой решусь сказать что ни jQuery, ни Sizzle не кешируют результаты работы метода find. Да и с чего бы им это делать? Не дергайте метод часто без нужды, если есть возможность заранее все найти — найдите и положите в отдельную переменную.

Если Вас чем-то не устраивает Sizzle, а такое бывает, вместо нее можно использовать что-то свое (или чужое), см. sizzle-jquery.js, именно там создаются ссылки на методы из Sizzle. Не забудьте в этом случае выкинуть Sizzle из билда.

Заключение

jQuery все растет и растет, уже сейчас библиотека разрослась почти до 10 тысяч строк кода (без учета Sizzle). Тем не менее исходники разбиты на несколько файлов, аккуратно написаны и даже местами прокомментированы. Не бойтесь подсматривать туда, а даже наоборот — если чувствуете, что не знаете как работает то, что Вы хотите использовать, не поленитесь посмотреть в исходники библиотеки. Это касается не только jQuery, но и вообще любой библиотеки.

Помните, что jQuery — это библиотека, цель которой не только облегчить разработчику жизнь лаконичностью кода, который получается с ее помощью, но и сделать один интерфейс для работы во всех возможных браузерах, включая доисторические, что добавляет определенный оверхед. Именно поэтому важно знать, что же делает за тебя библиотека. В некоторых случаях можно обойтись и без этих ста килобайт (помните что до сих пор видите значок Edge на своих телефонах) и без оверхеда на вызовах и тестировании возможностей браузера. К примеру, при написании расширения для Chrome или Firefox вам с вероятностью в 90% оно не принесет какого-то профита.

Статья вышла у меня не такая большая, как я боялся и это очень хорошо — читать будет легче (надеюсь). В области профессиональной веб-разработки я всего лишь лет 7, поэтому, как новичок, конечно, могу чего-то не знать, а что-то знать — не совсем (совсем не) правильно или не до конца. Не стесняйтесь меня поправлять, дополнять, критиковать, спрашивать.

P.S. Как оказалось, на Хабре уже есть статья на эту тему от замечательного автора TheShock — Как устроен jQuery: изучаем исходники. Свою статью оставляю потому, что кто-то уже добавил ее в избранное и вряд ли обрадуется надписи «статья помещена в черновики».

Содержание цикла статей

  1. Введение
  2. Парсинг html
  3. Манипуляции с DOM
  4. Атрибуты, свойства, данные

jQuery для начинающих. Часть 3. AJAX / Хабр


Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов…

Что такое AJAX я думаю рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы…

Примечание: Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)

jQuery(..).load

Начнем с самого простого — загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. функция которой будет скормлен результат (необязательный параметр)

Приведу пример JavaScript кода:
// по окончанию загрузки страницы
$(document).ready(function(){              
    // вешаем на клик по элементу с id = example-1
    $(‘#example-1’).click(function(){
        // загрузку HTML кода из файла example.html
        $(this).load(‘ajax/example.html’);       
    }) 
}); 

Пример подгружаемых данных (содержимое файла example.html):
Example<br/>
Data Loaded By AJAX<br/>
Bye-Bye

Пример работы

jQuery.ajax


Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр — объект включающий в себя все настройки (выделены параметры которые стоит запомнить):
  • async — асинхронность запроса, по умолчанию true
  • cache — вкл/выкл кэширование данных браузером, по умолчанию true
  • contentType — по умолчанию «application/x-www-form-urlencoded»
  • data — передаваемые данные — строка иль объект
  • dataFilter — фильтр для входных данных
  • dataType — тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
  • global — тригер — отвечает за использование глобальных AJAX Event’ов, по умолчанию true
  • ifModified — тригер — проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false
  • jsonp — переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)
  • processData — по умолчанию отправляемые данный заворачиваются в объект, и отправляются как «application/x-www-form-urlencoded», если надо иначе — отключаем
  • scriptCharset — кодировочка — актуально для JSONP и подгрузки JavaScript’ов
  • timeout — время таймаут в миллисекундах
  • type — GET либо POST
  • url — url запрашиваемой страницы

Локальные AJAX Event’ы:
  • beforeSend — срабатывает перед отправкой запроса
  • error — если произошла ошибка
  • success — если ошибок не возникло
  • complete — срабатывает по окончанию запроса

Для организации HTTP авторизации (О_о):
  • username — логин
  • password — пароль

Пример javaScript’а:
$.ajax({
    url: ‘/ajax/example.html’,             // указываем URL и
    dataType : «json»,                     // тип загружаемых данных
    success: function (data, textStatus) { // вешаем свой обработчик на функцию success
        $.each(data, function(i, val) {    // обрабатываем полученные данные
            /* … */
        });
    }
});

jQuery.get


Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:
  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. callback функция, которой будет скормлен результат (необязательный параметр)
  4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

jQuery.post


Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:
  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. callback функция, которой будет скормлен результат (необязательный параметр)
  4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

JavaScript:

$(document).ready(function(){                          // по завершению загрузки страницы
    $(‘#example-3’).click(function(){                  // вешаем на клик по элементу с id = example-3
        $.post(‘ajax/example.xml’, {}, function(xml){  // загрузку XML из файла example.xml   
            $(‘#example-3’).html(»);
            $(xml).find(‘note’).each(function(){       // заполняем DOM элемент данными из XML
                $(‘#example-3’).append(‘To: ‘   + $(this).find(‘to’).text() + ‘<br/>’)
                               .append(‘From: ‘ + $(this).find(‘from’).text() + ‘<br/>’)
                               .append(‘<b>’    + $(this).find(‘heading’).text() + ‘</b><br/>’)
                               .append(           $(this).find(‘body’).text() + ‘<br/>’);
            });
        }, ‘xml’);                                     // указываем явно тип данных
    })
});

Файл example.xml:
<?xml version=»1.0″ encoding=»UTF-8″?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don’t forget me this weekend!</body>
</note>

Пример работы

jQuery.getJSON


Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:
  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

$(document).ready(function(){                            // по завершению загрузки страницы
    $(‘#example-4’).click(function(){                    // вешаем на клик по элементу с id = example-4
        $.getJSON(‘ajax/example.json’, {}, function(json){  // загрузку JSON данных из файла example.json   
            $(‘#example-4’).html(»);
                                                         // заполняем DOM элемент данными из JSON объекта
            $(‘#example-4’).append(‘To: ‘   + json.note.to + ‘<br/>’)
                           .append(‘From: ‘ + json.note.from + ‘<br/>’)
                           .append(‘<b>’    + json.note.heading + ‘</b><br/>’)
                           .append(           json.note.body + ‘<br/>’);
        });                
    })
});

Файл example.json:
{
    note:{
        to:’Tove’,
        from:’Jani’,
        heading:’Reminder’,
        body:’Don\’t forget me this weekend!’
    }
}

Пример работы

jQuery.getScript


данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры:
  1. url запрашиваемого скрипта
  2. callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

$(document).ready(function(){                          // по завершению загрузки страницы
    $(‘#example-5’).click(function(){                  // вешаем на клик по элементу с id = example-5
        $.getScript(‘ajax/example.js’, function(){     // загрузку JavaScript’а из файла example.js 
            testAjax();                                // выполняем загруженный JavaScript
        });                
    })
});

Файл example.js:
function testAjax() {
    $(‘#example-5’).html(‘Test completed’);  // изменяем элемент с id = example-5
}

Пример работы

Отправка Формы


Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства «сбора» данных из формы лучше использовать плагин jQuery Form

Отправка Файлов


Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload иль One Click Upload

Взаимодействие с PHP


Для организации работы с PHP использую бибилотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery

Примеры использования JSONP


Отдельно стоит отметить использование JSONP — ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать — то это подключение удаленного JavaScript’a, содержащего необходимую нам информациию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):


При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида:

http://api.domain.com/?type=jsonp&query=test&callback=?

Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().

Google Поиск


Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

Yahoo Поиск


Пример получения и обработки результатов поиска используя Yahoo, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

JSONP API


Приведу так же небольшой список открытых API с поддержкой JSONP:
  • Google — поиск и большинство сервисов
  • Yahoo — поиск и большинство сервисов
  • Flickr
  • MediaWiki — соответственно и все производные — Wikipedia, Wiktionary и т.д.
  • Digg
  • CNET
  • aideRSS

События


Для удобства разработки, на AJAX запросах висит несколько event’ов, их можно задавать для каждого AJAX запроса в отдельности, либо глобально. На все event’ы можно повесить свою функцию.

Пример для отображения элемента с id=«loading» во время выполнения любого AJAX запроса:

$(«#loading»).bind(«ajaxSend», function(){
    $(this).show(); // показываем элемент
}).bind(«ajaxComplete», function(){
    $(this).hide(); // скрываем элемент
});

Для локальных событий — вносим изменения в опции метода ajax():
$.ajax({
    beforeSend: function(){
        // Handle the beforeSend event
    },
    complete: function(){
        // Handle the complete event
    }
    // …
});

Для большей наглядности, приведу следующую диаграмму (кликабельно):

Ну и собственно список всех event’ов:

  • ajaxStart — Данный метод вызывается в случае когда побежал AJAX запрос, и при этом других запросов нету
  • beforeSend — Срабатывает до отправки запроса, позволяет редактировать XMLHttpRequest. Локальное событие
  • ajaxSend — Срабатывает до отправки запроса, аналогично beforeSend
  • success — Срабатывает по возвращению ответа, когда нет ошибок ни сервера, ни вернувшихся данных. Локальное событие
  • ajaxSuccess — Срабатывает по возвращению ответа, аналогично success
  • error — Срабатывает в случае ошибки. Локальное событие
  • ajaxError — Срабатывает в случае ошибки
  • complete — Срабатывает по завершению текущего AJAX запроса (с ошибкои или без — срабатывает всегда).Локальное событие
  • ajaxComplete — Глобальное событие, аналогичное complete
  • ajaxStop — Данный метод вызывается в случае когда больше нету активных запросов

Так же Вы можете скачать все примеры в одном архиве.

Цикл статей


  1. jQuery для начинающих
  2. jQuery для начинающих. Часть 2. JavaScript Меню
  3. jQuery для начинающих. Часть 3. AJAX

P.S. Для подсветки синтаксиса использовал мини-сервис http://highlight.hohli.com/

Когда стоит использовать jQuery

Вы здесь: Главная — JavaScript — JavaScript Основы — Когда стоит использовать jQuery

Когда стоит использовать jQuery

Очень часто я вижу на сайтах подключённую библиотеку jQuery, при этом используется она настолько мало, что встаёт вопрос: «А зачем было вообще подключать эту далеко не маленькую библиотеку?«. В этой статье я постараюсь объяснить, когда следует использовать jQuery, а когда стоит обойтись и чистым JavaScript.

На всякий случай, если вдруг, кто не знает, сразу говорю, что абсолютно всё, что можно сделать на jQuery, можно сделать и без этой библиотеки на чистом JavaScript. Поскольку сама библиотека jQuery — это и есть JavaScript. При этом jQuery. даже в сжатом виде весит больше 80 КБ.

Поэтому если Вам нужно сделать какие-нибудь элементарные вещи, например, добавить пару элементов на страницу через JavaScript, удалить что-нибудь, изменить какой-нибудь атрибут и сделать прочую мелочь, то никогда не подключайте ради этого jQuery. Используйте DOM. Другое дело, если Вам нужно менять десятки элементов, причём совершенно разных (а ставить у каждого свой id неудобно), тогда уже можно использовать jQuery.

Также jQuery стоит использовать, если Вы делаете на странице анимацию. Это достаточно сложный процесс, и красивую анимацию Вы будете делать очень долго, тогда как на jQuery — это фактически одна строчка.

И, наконец, третья причина использования jQuery — это какой-то очень подходящий Вам плагин, который требует наличие данной библиотеки.

Итак, небольшое резюме, когда стоит использовать jQuery:

  1. Для очень большой работы с самыми различными элементами на странице.
  2. Для создания анимации.
  3. Если очень подходящий Вам плагин требует наличие jQuery.

И ещё один момент. Если Вы уж подключили jQuery, то используйте это на полную катушку. Так как частенько попадаются страницы, на которых частично используется DOM, а частично jQuery, что не очень логично.

  • Когда стоит использовать jQuery Создано 26.06.2013 04:02:43
  • Когда стоит использовать jQuery Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Подключение библиотеки jQuery. 4 способа

Подключать библиотеку jQuery можно различными способами. Давайте рассмотрим разные способы.

Способ 1. Скачать в папку и подключить файл

Наиболее распространённый способ, если сайт могут просматривать локально, без подключения сети Интернет (неужели такие еще есть?).

Идем по адресу и жмем большую желто-оранжевую кнопку Download jQuery. Переходим на страницу где выбираем версию jQuery. Желательно выбирать последнюю из доступных (на момент написания статьи – это 2.2.3). Обозначение compressed – означает, что библиотека минимизирована, т.е. занимаем минимум места, но, к сожалению, читать исходных код трудно. Качаем! После сохранения подключаем файл библиотеки. Для моей структуры (все скрипты лежат в папке js), код выглядит следующим образом:

<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> <!—Подключаем библиотеку—> <script src=»js/jquery-2.2.3.min.js»></script> </head> <body> </body> </html>

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<title>Document</title>

<!—Подключаем библиотеку—>

<script src=»js/jquery-2.2.3.min.js»></script>

</head>

<body>

</body>

</html>

Так выглядит структура проекта, библиотеку jQuery скачали в папку js

библиотека лежит в папке js

В некоторых случаях, библиотеку подключают перед закрывающимся тегом body, что связанно с порядком обработки html страницы браузером. Поскольку браузер вычитывает строки последовательно, то при подключении jQuery в конце файла вначале браузер отобразит сайт, а затем уже подключит динамику. При медленном соединении, такой подход обеспечивает увеличение скорости загрузки сайта, и уже потом работу слайдеров и остального. Код при таком подключении выглядит:

<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> </head> <body> <!—Подключаем библиотеку—> <script src=»js/jquery-2.2.3.min.js»></script> </body> </html>

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<title>Document</title>

</head>

<body>

 

<!—Подключаем библиотеку—>

<script src=»js/jquery-2.2.3.min.js»></script>

</body>

</html>

Какой из способов лучше? Это вопрос философии и привычки. Второй способ, используется в фреймворке materialize.

Способ 2. Подключаем напрямую с CDN

Данный способ хорош тем, что библиотека подключается с сайта и не валяется на жестком диске. Особенно это актуально при большом количестве маленьких проектов и для обучения.

Для подключения рекомендую использоваться подключение от Google Developers, обычно я нахожу данную страницу по ссылке jquery google. Наша задача скопировать строку:

<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script>

и подключить ее в файл. Выглядит это так:

<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> <!—Подключаем библиотеку—> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script> </head> <body> </body> </html>

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<title>Document</title>

<!—Подключаем библиотеку—>

<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script>

</head>

<body>

</body>

</html>

Второй способ подключения, перед закрывающимся тегом body:

<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> </head> <body> <!—Подключаем библиотеку—> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script> </body> </html>

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<title>Document</title>

</head>

<body>

<!—Подключаем библиотеку—>

<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script>

</body>

</html>

Все просто!

Нужен ли вам jQuery? По полочкам. Сниппеты You Don’t Need jQuery / VSC, Sublime Text

Всем привет, друзья! Сообщество веб-разработчиков в последнее время разрывает дикий баттхёрт относительно того, стоит ли использовать jQuery в своей работе. Одни топят за то, что нужно использовать эту библиотеку во всех проектах без исключения, другие не могут понять, что вообще происходит и продолжают делать то, что делали раньше. Третьи, чтобы не отрываться от коллектива, осваивают последний ECMAScript, всячески открещиваются от jQuery и бомбят при любом упоминании этой библиотеки. Сегодня мы разберёмся в вопросе более подробно, без крайностей и максимализма.

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

Создание контентного сайта на Jekyll от А до Я

Полезные ресурсы урока:

В конце выпуска мы познакомимся с коллекцией сниппетов You Don’t Need jQuery, которую я подготовил для редакторов Visual Studio Code и Sublime Text. Эта коллекция послужит отличным помощником, если вы вдруг проснулись и поняли, что жизнь слишком проста и нужно писать код исключительно на ванильном JS. Кроме того, в грядущем большом курсе Джедай вёрстки 8, в качестве академического примера, мы будем верстать без использования jQuery, на чистом JS и представленная коллекция будет очень кстати.

jQuery – это самая популярная в мире JS библиотека, позволяющая значительно упростить процесс взаимодействия с элементами DOM, а также предоставляющая удобный API для работы с событиями и AJAX.

Здесь я не буду защищать ни одну из сторон, так как это бессмысленно. Это не конкуренция и сокращение «vs» (versus) ставить между jQuery и нативным JS просто некорректно. Когда надо, я использую jQuery, когда не надо, не использую. jQuery — это инструмент, созданный для того, чтобы максимально сократить время разработки. Здесь я даже не говорю о краткости записи, ведь нативный JS не стоит на месте, стандарты ES развиваются и нативный код становится короче. Дело не в этом.

Главное преимущество jQuery – это тысячи готовых плагинов и расширений, которые можно подключить к проекту и настроить всего за несколько минут. Второе важнейшее преимущество — это проверенная, оттестированная, железобетонная кроссбраузерность и поддержка всего, что может отображать веб-страницы с поддержкой JavaScript.

Но, давайте по-порядку рассмотрим все аргументы «за» и «против» использования jQuery, а затем перейдём к примерам проектов, в которых целесообразно использовать эту библиотеку.

Аргументы в пользу jQuery

  1. Кроссбраузерность. jQuery учитывает особенности работы со всеми возможными браузерами (с поддержкой JS, конечно-же), имеет все необходимые фолбеки и запасные варианты реализации. Ваш код будет работать везде. В противовес, НЕ использование jQuery потребует от вас больше временных затрат и усилий для написания и тестирования вашего кода.
  2. Вариативность. Функции jQuery включают огромное количество вариантов и возможностей использования, что делает их максимально универсальными и лаконичными. Использование ванильного JS предполагает написание намного большего количества кода, условий и проверок для реализации аналогичного функционала, даже если речь идёт о какой-то специфической задаче, где не требуется особая универсальность.
  3. Расширения. Тысячи готовых плагинов, расширений, примеров, сниппетов готовы к использованию. Вам не придётся писать свой велосипед для решения типовой задачи. Можно сказать, что это самое важное преимущество jQuery. Писать плагины для jQuery также легко, как писать любой другой код с использованием этой библиотеки. Именно поэтому jQuery так нравится многим веб-разработчикам. Сейчас можно найти абсолютно любой плагин, который поможет быстро решить любую задачу в условиях коммерческого проекта. А в заказной разработке, если вы фрилансер или студия, время — деньги.
  4. Сообщество. Огромное количество уроков, примеров кода, решений на сайтах QA. Можно очень быстро найти решение любой задачи, моментально найти ответ на любой вопрос и продолжить работу.
  5. Краткость записи. Нативный JS, не смотря на своё развитие, пока что не может предложить такие-же возможности краткой записи. jQuery – это простой, лаконичный код, понятный даже начинающим и довольно простой в изучении.
  6. CMS. Практически все популярные CMS, такие, как OpenCart, Joomla, WordPress, используют библиотеку jQuery. Это огромный плюс, ведь возможности этой библиотеки как во фронтенде, так и в бэкенде любой CMS, как правило, реализованы по максимуму и вопроса — подключать jQuery для десяти кастомных строк кода или нет, не стоит. Пользуйтесь в своё удовольствие.

Аргументы против jQuery

  1. Библиотека jQuery загружается в проект как дополнительный ресурс. Можно много спорить относительно того, стоит ли загружать файл, весом 100кб к проекту, чтобы написать всего 5 строчек кода, в то время, когда каждая из картинок на странице весит гораздо больше, а их там, на минуточку, могут быть сотни. Также, следует учитывать и все подключённые плагины, сниппеты и другие ресурсы, использующие jQuery, чтобы понять целесообразность подключения библиотеки.

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

Само по себе понятие «библиотека» в программировании довольно простое для понимания. В процессе работы с каким-либо языком программирования, разработчики сталкивались с определёнными задачами, однотипными проблемами, решения которых в результате были объединены в библиотеки для удобного повторного использования. Отсюда и возникают все плюсы и минусы использования библиотек. Плюс — проверенный код на любой случай жизни, минус — много того, что не используется здесь и сейчас также подтягивается в проект.

Можно услышать и некоторые другие аргументы против использования jQuery, вроде того, что эта библиотека замедляет работу браузера и работает медленнее нативного кода. Это весьма сомнительные заявления, не подкреплённые никакими фактами, экспериментальными выводами и результатами тестов. Как показывает практика, никакого негативного влияния на скорость работы браузера библиотека не оказывает, а код работает также быстро, как и нативный, ведь он, по-сути и является нативным — все функции jQuery не имеют какой-то космически-сложной структуры, которая хоть как-то влияла бы на скорость исполнения.

Использовать или не использовать jQuery?

В первую очередь, не стоит отказываться от jQuery в заказной или тиражной разработке сайтов. Эти области достаточно хорошо стандартизированы и автоматизированы. Можно получить потрясающий результат, используя популярные фреймворки, вроде Bootstrap и библиотеки, вроде jQuery, совместно с крутыми известными плагинами. Если вы видите в дизайне элементы, блоки или секции, которые проще и быстрее реализовать с использованием jQuery и плагинов, вперёд!

Вообще, jQuery можно использовать практически в любых проектах, если вы уверены, что будет задействована достаточная часть библиотеки и не используется какой-либо JS-фреймворк. Конечно, никто не запретит подключить библиотеку к проекту и написать пресловутые 5 строк кода. Осудить вас может, пожалуй, только вышеупомянутый кодер-перфекционист, если случайно заглянет в ваши исходники. Ему лучше на глаза не попадаться, чтобы не случился очередной приступ паранойи и неконтролируемого гнева. А если серьёзно, то в таких случаях библиотеку можно и не использовать, а посмотреть вариант решения задачи в сниппетах для редакторов кода, которые я подготовил к данному выпуску (см. Полезные ресурсы урока).

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

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

Коллекция сниппетов для Visual Studio Code и Sublime Text.

Для того, чтобы облегчить написание нативного JS, если до этого вы использовали только jQuery, я подготовил коллекцию сниппетов для редакторов Visual Studio Code и Sublime Text, основанную на популярных примерах You Don’t Need jQuery (см. Полезные ресурсы урока). Сниппеты устанавливаются и работают с редакторами кода штатным образом. В коде каждого сниппета есть закомментированный пример, написанный с использованием jQuery и его альтернатива в нативном исполнении:

Снипеты You Don
Установка в Sublime Text

Для установки сниппетов в редактор Sublime Text достаточно скачать архив с GitHub и распаковать папку «YDNjQ — Sublime Text Snippets» в директорию «ПОЛЬЗОВАТЕЛЬ \ AppData \ Roaming \ Sublime Text 3 \ Packages \ User», которую можно открыть из редактора: Меню «Preferences > Browse Packages…», затем перейти в папку User:

Установка сниппетов No jQuery в Sublime Text
Установка в Visual Studio Code

Процесс установки сниппетов в кодовый редактор Visual Studio Code не на много сложнее. Скачиваем тот-же самый архив с GitHub и выгружаем содержимое папки «YDNjQ — Visual Studio Code Snippets» в папку «ПОЛЬЗОВАТЕЛЬ \ AppData \ Roaming \ Code \ User \ snippets». Обратите внимание, что необходимо выгрузить именно содержимое папки «YDNjQ — Visual Studio Code Snippets», то-есть весь список файлов:

Установка сниппетов No jQuery в VSC

После установки сниппеты доступны по ключевым словам jQuery-функций. Например, «hide», «fade», «load» и т. д. Для использования в Sublime Text достаточно набрать нужное сокращение и нажать Tab, или нажав Ctrl+Shift+P, ввести ключевое слово и выбрать нужный сниппет с префиксом YDNjQ. В редакторе Visual Studio Code достаточно нажать F1 > Insert Snippet, ввести ключ сниппета и выбрать нужный.

И в заключение. Хотите использовать jQuery или какую-либо другую библиотеку в вашем проекте — используйте на здоровье. Грамотно и рационально.

Премиум уроки от WebDesign Master

Другие уроки по теме «jQuery»
Рассказ о том, почему я до сих пор использую jQuery / Блог компании RUVDS.com / ХабрМногие, когда речь заходит о jQuery, говорят так: «Просто пользуйтесь обычным JavaScript. Библиотека jQuery вам не нужна». Что тут сказать? Я не нуждаюсь во многих вещах, но, несмотря на это, хорошо, когда они есть. Так и jQuery. Я в этой библиотеке не нуждаюсь, но её, определённо, приятно иметь под рукой.

Сайты наподобие You might not need jQuery (YMNJQ) продвигают идею, в соответствии с которой от jQuery очень легко избавиться. Но самый первый пример на этом сайте демонстрирует вескую причину jQuery использовать. Там строка простого кода на jQuery заменяется на 10 строк обычного JS!

Большинство API JavaScript, в особенности те из них, которые нацелены на работу с DOM, оскорбляют мои эстетические чувства. Это — если мягко выразить моё к ним отношение. Если же говорить прямо, то я думаю, что эти API — полный кошмар. Например, конструкция el.insertAdjacentElement('afterend', other), безусловно, работает. Но куда приятнее выглядит $(el).after(other). Хотя мне никогда особо не нравился внешний вид функции $(), она несравненно лучше, чем то, что дают нам стандартные API для работы с DOM. Я знаю о том, что вместо $() можно использовать нечто вроде jQuery(sel) или window.jq = jQuery. Но программирую я не в безвоздушном пространстве. Поэтому предпочитаю пользоваться стандартными приёмами. Не знаю, хорошо это или плохо, но стандартом при использовании jQuery стала конструкция $().

Попытайтесь быстро вспомнить о том, как получить элемент-сосед другого элемента средствами DOM. Что для этого использовать — nextSibling или nextElementSibling? А в чём разница? А какие браузеры поддерживают тот или иной метод? Пока вы пытаетесь это вспомнить и заглядываете на MDN, проверяя себя, я, пользуясь jQuery, просто пишу next() или prev().

Выполнение многих обычных операций реализовано в JavaScript-API неудобно. Я мог бы привести тут целый список таких операций, но за меня это отлично сделано на странице YMNJQ.

Для решения различных простых задач средствами JS нужны вспомогательные функции. И на сайте YMNJQ, опять же, можно найти немало примеров. Использование jQuery представляет собой стандартный способ включения в код проектов таких вспомогательных функций. При этом программисту не нужно каждый раз, когда ему что-то подобное понадобится, выхватывать куски кода из первых подвернувшихся под руку ответов на Stack Overflow.

Хотя в наши дни проблемы совместимости браузеров потеряли былую остроту, они всё ещё актуальны. Особенно — для тех, кто не относится к лагерю разработчиков, считающих, что если что-то работает в 85% браузеров, то им это подходит. Кстати, вот материал о том, почему Hello CSS не использует CSS-переменные.

Следует ли всегда пользоваться jQuery? Нет, конечно нет. Любая дополнительная зависимость — это рост сложности проекта и рост объёма его кода. Но jQuery — библиотека не такая уж и большая. Стандартная сборка, минифицированная и сжатая, занимает 30 Кб. Кастомная сборка без ajax и без редко используемых возможностей — это 23 Кб. А сборка, в которой вместо SizzleJS используется querySelector, занимает всего 17 Кб. Меня, для решения множества задач, вполне устраивает и стандартная сборка размером 30 Кб, и оптимизированная, размером 17 Кб.

Тут можно посмотреть на то, сколько усилий приложено к тому, чтобы убрать jQuery из Bootstrap и перейти на обычный JS.

Разработчики написали собственные вспомогательные функции. Им пришлось отказаться от поддержки IE, так как такую поддержку оказалось очень сложно реализовать. Они сделали несовместимым API («мы всё сломали») и потратили на всё это полтора года. Не могу сказать, что то, что получилось, намного лучше того, что было.

Я понимаю причины перевода Bootstrap на обычный JS. Например, разработчики хотят использовать Bootstrap с Vue.js, или ещё с чем-то подобным. А Vue.js и jQuery в одном проекте — это уже малость перебор. Я — большой сторонник сокращения объёмов ненужного кода в вебе (вот и вот — пара материалов об этом). Но тут я предлагаю смотреть на ситуацию с прагматичной и реалистичной точки зрения. Неужели включение в Bootstrap 17 Кб кода jQuery — это так плохо? Когда я говорю, что для просмотра сайтов вроде Medium или New York Times нужно загрузить больше мегабайта JavaScript-кода, меня, защищая сложившуюся ситуацию, спрашивают о том, не сижу ли я на какой-нибудь 56-килобитной модемной линии. Мегабайт JS — это нормально. Неужто 17 Кб jQuery — это неподъёмная ноша?
Существуют и веские причины jQuery не использовать. Например, jQuery не нужна в том случае, если вы пишете код, которым вы хотите поделиться с другими, или если вы создаёте какую-нибудь маленькую функцию. Но зачем выворачиваться наизнанку только ради того, чтобы не пользоваться jQuery? Зачем все эти усилия, если можно просто написать $()? Я не думаю, что jQuery стоит использовать везде и всегда, но и не считаю правильным фанатичный отказ от jQuery.

Хочу отметить, что я не женат на jQuery. Я с удовольствием буду пользоваться чем-то вроде «jQuery light» — некой библиотекой, которая перекрывает недостатки стандартных API, давая программисту что-то более приятное. Сайт YMNJQ рекомендует, кроме прочих, библиотеки bonzo и $dom, предназначенные для решения разных задач. Но многие из них, как кажется, давно не поддерживаются. Кроме того, многие уже знают jQuery. Зачем менять jQuery на что-то другое без веских причин?

Многие читатели могут задаться вопросом о том, что я, в русле этого материала, могу сказать по поводу Vue.js, React и других современных фреймворков. Но цель этой статьи — сопоставить обычный JavaScript и jQuery, а не предлагать сообществу «Грандиозную общую теорию фронтенд-разработки».

Учитывая вышесказанное, я полагаю, что могу обнаружить совсем немного причин использовать обычный JS там, где можно воспользоваться jQuery. Это так преимущественно из-за того, что я хочу создавать быстрые страницы и использовать при этом простейшие рабочие конструкции. При этом я стремлюсь к тому, чтобы мои страницы смогло бы просмотреть как можно большее количество пользователей Сети. Опыт подсказывает мне, что кратчайшим путём к достижению этой цели служат шаблоны, сгенерированные на сервере, которые слегка, в стиле «прогрессивного улучшения», приправлены JavaScript. Если сравнить такие проекты с чем-то, в чём используется нечто более сложное, то оказывается, что их часто бывает проще разрабатывать. Такие проекты обычно быстрее, в них обычно меньше ошибок, а в ходе работы над ними вентилятор ноутбука не издаёт шум, способный разбудить весь дом.

Означает ли это, что современные веб-фреймворки и мощные библиотеки — это всегда плохо? Нет, не означает. Очень немногое достойно того, чтобы «всегда» называться плохим или хорошим. Но использовать фреймворк — значит идти на некие компромиссы (это, конечно, справедливо и для jQuery).

В целом, веб мне видится средой для просмотра документов, а не чем-то вроде операционной системы. И «документный подход» хорош не только для обычных сайтов, но и для многих «веб-приложений» (что бы так ни называли).

Уважаемые читатели! Пользуетесь ли вы jQuery?

jQuery Начало работы


Добавление jQuery на ваши веб-страницы

Есть несколько способов начать использовать jQuery на вашем веб-сайте. Вы можете:

  • Загрузите библиотеку jQuery с jQuery.com
  • Включить JQuery из CDN, например, Google

Загрузка jQuery

Для загрузки доступны две версии jQuery:

  • Производственная версия — это для вашего живого веб-сайта, потому что он был сжат и сжат
  • Версия для разработки — для тестирования и разработки (несжатый и читаемый код)

Обе версии можно загрузить с jQuery.ком.

Библиотека jQuery — это отдельный файл JavaScript, и вы ссылаетесь на него с помощью тега HTML