Min js


Its "minified version of jQuery code"

so what is minified version

function hello_world_fxn() {  /*  parameters : none  return : undefined  description: this function will pop up the alert with text "hello world" character by character  author : Expert hacker of justice league   */   alert('h');  alert('e');  alert('l');  alert('l');  alert('o');  alert(' ');  alert('w');  alert('o');  alert('r');  alert('l');  alert('d'); } 

and

function a(){alert('h'); alert('e');alert('l');alert('l');alert('o');alert(' ');alert('w');alert('o');alert('r');alert('l');alert('d');} 

hope you can see that both of the above snippets will work exactly the same


and duh, second one shall be called "minified"

can you figure out which one is better?? the thing is it depends

first one is a typical code which you might want to read when you are working

as it contains a proper name for function 'hello_world_fxn' and have proper comments and is bit easier to read

but does it have any cons when we look it against second code snippet?

yes ,as is obvious from second snippet we are using so much extra characters in our first snippet which don't add anything at all to functionality

and biggest problem is that we have to transfer those unwanted characters over the network and more the characters more time it will take

so we try to convert our code to look like second code snippet instead of first one, at least while transferring it over the network

some techniques we might use can be

  1. remove comments
  2. replace long variables and function names with smaller names
  3. bring everything to one line (saves  newline character(s))
  4. remove all white spaces,etc

so while we develop we try to write beautiful code , but then we minify it before deployment so that we have our functionality intact and code now have smaller size to be transferred over the network

obviously we keep the original code with us and make changes to it and and then deploy its minified version again for further changes

story of jquery min is on similar lines

hope it helps 🙂

www.quora.com

Где скачать jQuery?


Самое простое — перейти на официальный сайт. Там, помимо самой библиотеки, можно найти ещё множество разных полезностей — от jQuery UI (для более простого и удобного создания пользовательского интерфейса) до разнообразных плагинов, которых насчитывается более 2500!

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

Как подключить библиотеку jQuery к своей странице?

Если предпочитаете все файлы хранить на своём сервере, лучше будет выделить единое место, в которое позже, возможно, добавятся плагины или другие библиотеки. Пусть это будет папка /scripts/ в корне сайта. Переходим на страницу официального сайта (ссылка чуть выше). Здесь нам предлагаются две версии — 1.x и 2.x — из которых предпочтительнее выбрать последнюю. Первая версия «тянет» с собой устаревший код, поэтому занимает несколько больше места. Для размещения на сайте лучше выбрать compressed-версию, это максимально «скукоженный» по размеру файл, который предоставляет те же возможности, как uncompressed-версия, с той разницей, что последнюю лучше использовать для разработки — в ней сохранено форматирование и удобно посмотреть, как реализована та или иная функция. Допустим, выбран файл jquery-2.1.1.min.js, который необходимо загрузить в директорию /scripts/. В этом случае, код для подключения будет такой (нужно использовать только 1 вариант, согласно значению тега DOCTYPE):


<script type="text/javascript" src="/scripts/jquery-2.1.1.min.js"></script>
или
<script type="text/javascript" src="/scripts/jquery-2.1.1.min.js" />

В случае, если файлы планируется подключать с ресурса-хостинга JS-библиотек:

<script type="text/javascript" src="http://yastatic.net/jquery/2.1.1/jquery.min.js"></script>
или
<script type="text/javascript" src="http://yastatic.net/jquery/2.1.1/jquery.min.js" />

Всё, после этого можно использовать всю мощь jQuery.

Основы работы с jQuery

Т. к. jQuery — это библиотека, написанная на JavaScript, код необходимо писа́ть в местах, это допускающих. В общем случае — между тегами <script> и </script>.

Выборка одного элемента в JavaScript производилась с помощью метода document.getElementById(‘id-элемента’), нескольких — documents.getElementsByTagName(‘тег нужного элемента’), после чего по списку требовалось пробежаться в цикле и выполнить необходимое дейстие. В jQuery это выполняется гораздо проще, а нужное действие можно применить сразу же ко всем элементам. Для выборки служит такая конструкция:

jQuery('selector').func()



где selector — правило, определяющее часть страницы (тег, класс, идентификатор),
func — метод, который будет применён ко всем полученным элементам.

Основные селекторы jQuery

Функциональность очень сходна с аналогичной в CSS, поэтому, если вы верстали документы, будет гораздо проще. Можно выделить следующие:

  • * — универсальный селектор, выбирающий абсолютно все элементы;
  • tag — селектор элементов, представляющий просто название любого тега (например: p, div, span, a); выбираются все запрашиваемые теги на странице;
  • .class_elems — селектор классов (<div class="class_elems"></div>);
  • #id_elem — селектор идентификаторов (<span id="id_elem"></span>)
  • tag[attr="value"] — селектор атрибутов (<input type="text">);
  • elem1 elem2 — комбинатор потомков — элеметны (теги, классы, идентификаторы) elem2, расположенные внутри elem1 (p i → <p><b><i>text</i></b></p>);
  • elem1 > elem2 — комбинатор «детей» — элеметны elem2, непосредственно вложенные внутрь elem1 (p > b → <p><b><i>text</i></b></p>), в отличие от предыдущей конструкции, p > i не найдёт ни одного элемента, т. к. i не является прямым потомком p (вложен в b);

  • elem1 + elem2 — комбинатор «следующий брат» — elem2, расположенный (не вложенный!) сразу же после elem1, по сути — следующий элемент (b + i → <b>b</b><i>i</i>);
  • elem1 ~ elem2 — комбинатор «нижеследующие братья» — elem2, расположенные (не вложенные!) после elem1, в отличие от предыдущего пункта, ищутся элементы, не обязательно непосредственно следующие за elem1 (b ~ i → <b>b</b><span>span</span><i>i</i>);
  • elem:first — выбор только первого элемента из всех elem;
  • elem:last — выбор только последнего элемента;
  • elem:eq(n) — выбор только n-ного элемента; нумерация начинается с нуля, запись :eq(n) эквивалентна :first;
  • elem:lt(n) — выбор всех элементов до n-ного;
  • elem:gt(n) — выбор всех элементов после n-ного;
  • elem:even — все чётные элементы (важно знать, что нумерация начинается с нуля, поэтому нулевой эменнт является чётным, хотя в потоке следует первым);
  • elem:odd — все нечётные элементы;
  • elem:visible — видимые элементы;
  • elem:hidden — невидимые элементы.

Этого списка должно хватить для получения различных множеств элементов. Как и в CSS, селекторы можно комбинировать для того, чтобы «достучаться» даже до самого глубокого тега:

  • div h2 ~ table — найти внутри div таблицу, следующую после подзаголовка h2;
  • form.reg input[type=»text»] — все теги <input type="text">, расположенные внутри формы с установлленым классом reg;
  • div > table td — ячейки таблицы, непосредственно вложенной в тег div.

jQuery: метод css против свойства style

На самом деле, нет ничего сложного. Если в обычном JS для манипулирования существовал элемент style, то здесь всё гораздо проще:

jQuery('selector').css('property', ['value'])
где property — CSS-свойство,
value — значение свойства.

В случае, года значение не задано, будет возвращено текущее значение свойства. Свойства используются в «чистом виде», т. е. так же, как они записаны в стилях. Для JS пришлось бы писать, например, что-то вроде:

document.getElementById('id').style.backgroundColor = '#f0f';
В jQuery код сократится до:

jQuery('#id').css('background-color', '#f0f');
Но не забываем, что здесь в качестве селектора можно задать сложное правило — библиотека возьмёт на себя поиск элемента. В чистом JS пришлось бы с этим повозиться.

Атрибуты элемента: получить, удалить, добавить, изменить

Получение, добавление или изменение атрибута выполняется аналогично, как и в случае с css, только нужно использвоать другой метод — attr:
jQuery('selector').attr('name', ['value'])



где name — название атрибута,
value — значение атрибута (если не задано, будет возвращено текущее значение).

Для удаления атрибута существует специальный метод:
jQuery('selector').removeAttr('property')

Классы элемента: удалить, добавить, изменить

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

Добавить класс:
jQuery('selector').addClass('class_name')
где class_name — новый класс.

Удалить класс:
jQuery('selector').removeClass('class_name')
Помимо этого есть весьма полезная возможность «переключения» класса. Принцип работы состоит в том, что если элементу уже назначен класс class_name, он (класс) удаляется, если нет — добавляется:
jQuery('selector').removeClass('class_name')
И осталась ещё одна функциональность, которой не коснулись — проверка, назначен ли элементу заданный класс (true, если да):
jQuery('selector').hasClass('class_name')

Содержимое контейнера — аналог innerHTML

В JavaScript свойство innerHTML служит для получения или установки всего HTML-содержимого элемента. Для jQuery код упрощается до такого:
jQuery('selector').html(['code'])



где code — HTML-код, который будет присвоен найденным элементам. Если параметр не задать, будет возвращено содержимое (HTML).

Как удалить элемент в jQuery?

В отличие от чистого JavaScript, операция вырождается в одну строку кода:
jQuery('selector').remove()

Как вставить текст?

Для JS существует свойство innerText которое, однако, поддерживают не все браузеры. Но мы же не ищем сложных путей, верно?
jQuery('selector').text(['str'])
где str — текст, который будет вставлен. Если параметр не задать, вернётся текущее текстовое содержимое.

Как узнать количество элементов?

Элементарно! Нужно прочитать содержимое свойства length:
var cnt = jQuery('selector').length

Как скрыть или показать элемент?

Для этого существует два метода:
jQuery('selector').hide(); // скрыть
jQuery('selector').show(); // показать

Что ещё может jQuery?

Очень, очень много всего: перехватывать и обрабатывать разнообразные события (например, от мыши или клавиатуры), работать с Ajax (общение с сервером без перезагрузки страницы, например, для организации подгрузки новых сообщений, как это сделано в VK), сериализовать формы для их последующей отправки, создавать элементы и легко добавлять их в требуемое место на странице и прочее.

Если вы решили непременно изучить jQuery, посмотрите официальные маны, там есть много чего полезного. Сразу предупреждаю, что там информация представлена на английском, но пусть это не страшит — по примерам почти всегда становится ясно, что делает тот или иной метод.

В случае появления вопросов — жду их в комментариях.


smile

a-panov.ru

Available methods, for both CSS & JS minifier, are:

__construct(/* overload paths */)

The object constructor accepts 0, 1 or multiple paths of files, or even complete CSS/JS content, that should be minified. All CSS/JS passed along, will be combined into 1 minified file.

add($path, /* overload paths */)

This is roughly equivalent to the constructor.

minify($path)

This will minify the files’ content, save the result to $path and return the resulting content. If the $path parameter is omitted, the result will not be written anywhere.

CAUTION: If you have CSS with relative paths (to imports, images, …), you should always specify a target path! Then those relative paths will be adjusted in accordance with the new path.

gzip($path, $level)

Minifies and optionally saves to a file, just like minify()


, but it also gzencode()s the minified content.

setMaxImportSize($size) (CSS only)

The CSS minifier will automatically embed referenced files (like images, fonts, …) into the minified CSS, so they don’t have to be fetched over multiple connections.

However, for really large files, it’s likely better to load them separately (as it would increase the CSS load time if they were included.)

This method allows the max size of files to import into the minified CSS to be set (in kB). The default size is 5.

setImportExtensions($extensions) (CSS only)

The CSS minifier will automatically embed referenced files (like images, fonts, …) into minified CSS, so they don’t have to be fetched over multiple connections.

This methods allows the type of files to be specified, along with their data:mime type.

The default embedded file types are gif, png, jpg, jpeg, svg & woff.

www.minifier.org

Подключение jQuery со своего сайта

Итак, для начала нужно непосредственно скачать свежую версию. Ее скачать вы можете с сайта разработчика, а именно jquery.com.

Есть два вида вариантов этой библиотеки – Production и Development. Разницы по функционалу в этих библиотеках нет, только разница в размере загружаемых файлов.

  • Development – это исходный код библиотеки со всеми комментариями для разработчиков, и код четко структурирован. И поэтому размер ее составляет порядка 260 кбайт.
  • Production – сжатый вид библиотеки, там удалены все комментарии, ненужные пробелы и так далее. Ну и размер соответственно 70 – 100 кбайт, в зависимости от версии библиотеки.

Немного о версиях

Если обобщить, то существует две версии этой библиотеки. Разница между ними в основном в совместимости браузеров.

jQuery 1.x – одна из первых версий библиотек, и обеспечивает совместимость с максимальным количеством браузеров. На данный момент последняя версия – 1.11.2.

jQuery 2.x – это последняя выпущенная версия библиотеки, включает в себя API jQuery 1.x, но проблема в том, что нету поддержки нашего «любимого» Internet Explorer версий 6, 7, 8. Последняя версия — 2.1.3.

Подключаем jQuery к странице сайта

Итак, давайте подключим jQuery к нашей странице. Скачаем файл jquery-1.11.2.min.js с сайта jquery.com и перенесем в папку js, в директории нашего сайта.

Для того чтобы подключить библиотеку, нужно прописать путь к файлу в теге SCRIPT, внутри тега HEAD.

В итоге наша страница будет иметь вид:

Я думаю тут будет всем понятен общий смысл.

Атрибут type говорит, какой тип подключаемого файла. Атрибут src указывает путь к файлу.

Как подключить библиотеку jQuery с внешних источников

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

Как вам возможно известно, скаченные файлы сайта, такие как css и javascript, а так же изображения скачиваются в кэш браузера.

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

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

Официальный сайт jQuery

Первый сайт, это конечно же официальный сайт разработчика jQuery — http://code.jquery.com/

На странице вы можете выбрать нужную вам версию, или непосредственно последнюю версию библиотеки. Для этого нужно подключить код к странице сайта:


 Google Libraries API

Второй сервис это всеми знакомый Google.

У Google есть проект – Google Libraries API. Этот проект предоставляет API для разработчиков на JavaScript, и позволяет подключать нужные библиотеки с серверов Google. Поддерживает не только библиотеки jQuery, но и Angular JS, Angular Material, Dojo, Ext Core, jQuery UI и другие.

Для подключения библиотеки с сайта Google используем код:

А вот если вы хотите подключить самую последнюю версию то нужен этот код:

Здесь главное в 1 – это показатель версии. А именно указывает на то что будет использовать библиотека последней версии jQuery 1.


Подключение с сайта Microsoft

Подключается абсолютно так же,  как и с другими сервисами.

От себя добавлю, что я редко видел, чтобы библиотека jQuery подключалась от Microsoft.

Заключение

Вот мы и узнали, как подключаются библиотеки к сайту, на примере jQuery. В будущем мы узнаем, как подключаются скрипты и плагины, для расширения функционала нашего сайта.

hi-blog.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.