Jquery min js описание. Что такое jQuery: где используется и какие преимущества дает разработчикам. Манипуляция с найденными элементами

Используя jQuery Вы сможете создавать скрипты намного быстрее и эффективнее.

jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода.

Девиз jQuery "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение.

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

Данная библиотека работает со всеми браузерами (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome ). Это значит, что Вам больше не нужно будет беспокоиться о кроссбраузерной совместимости JavaScript кода.

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

$(document).ready(function(){ $(":button").click(function(){ $(":button").hide(); $("#wrap1").addClass("add"); $("#wrap1").animate({height:280},2000); $("#wrap1").animate({width:400},2000); $("#wrap1").animate({padding:20},2000,function(){ $("#text1").hide(2000,function(){$("#text2").show(2000);}); }); }); });

Быстрый просмотр

Для того, чтобы начать использовать jQuery необходимо:

Для тех кто по каким-либо причинам не может (или не хочет) скачивать jQuery предусмотрен альтернативный способ удаленного использования библиотеки предоставленный компанией Google.

Для того, чтобы использовать jQuery удаленно просто добавьте на страницу в секцию head следующий код:

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

Задание 1 на странице задан jQuery код, но он не работает потому, что к ней не подключен необходимый файл библиотеки jquery.js. Подключите jquery.js удаленно (воспользовавшись услугой Google), чтобы "починить" код.

Начинающие разработчики сайтов нередко сталкиваются с понятием jQuery, что это такое, знают единицы. А ознакомление с определением ясности вносит довольно мало.

Разберёмся со значением термина, сферами и случаями использования, а также сделаем краткий экскурс в историю.

jQuery – это фреймворк, библиотека, созданная для взаимодействия языка программирования JavaScript и языка гипертекстовой . Представлен общественности он был в 2006 году на одной из конференций, посвященных разработкам в области соцсетей и браузеров, которая проходила в Нью-Йорке. Автор проекта – молодой программист Джон Резиг, возглавляющий проект и ныне.

Джон освоил HTML и начал программировать на Basic, и это пришлось парню по душе. Со временем Джон перешел на Visual Basic и занялся дизайном веб-сайтов.

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

Уж его потенциал показался неисчерпаемым в решении появившихся за время использования VB проблем.

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

Это и упростит разработку, и снимет все вопросы о браузерной и кроссплатформенной совместимости. Отсюда и началась разработка фреймворка.

Фреймворк (русский аналог термина – каркас) представляет собой программную платформу, служащую средством определения структуры приложения. Используется в разработке ПО , где необходимо обращаться к значительным и малым фрагментам кода и компонентам, которые и были объединены платформой, в данном случае jQuery .

Библиотека позволяет обращаться абсолютно к любому элементу DOM для изменения его содержимого, структуры, параметров и даже оформления.

Ясность в понимании предыдущего предложения внесёт определения DOM – это универсальный кроссплатформенный (не зависит от используемой и используемого языка программирования) пользовательский интерфейс, посредством коего программы и мини-программы (скрипты) способны открывать и для их корректировки.

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

Любой известный документ представляется в виде иерархического дерева, в коем каждая ветка и её дочерние элементы – это атрибуты, графические или текстовые объекты.

JDOM – следующий шаг в эволюции объектной модели документа, созданная с учётом всех особенностей Java , в jQuery пока не используется, по крайней мере общественности это не представлено.

Из вышесказанного намного проще понять, что jQuery – это , основанная на взаимодействии вышеназванного мультипарадигменного языка программирования с HTML документами и соответствующего содержимого.

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

Основные возможности каркаса:

• обращение к любым элементам DOM для их изменения и обработки;
• совместимость с AJAX;
• огромная библиотека плагинов, особенно касающихся визуального оформления страниц;
• поддержка работы с событиями.

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

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

То, что в JavaScript могло растянуться на страницу, в jQuery сокращено в разы.

Так код выглядит на Java:

var elem = document.getElementById(‘abzatc’);

var elem = $(‘#abzatc’);

.

Аналогичный фрагмент кода на jQuery: . Что это, если не упрощение работы? Да и понять, о чём идёт речь во втором случае сможет любой, кто знаком с основными тегами HTML.

Тут даже программистом быть не нужно. Ещё упростит освоение и использование библиотеки знание CSS.

Оба куска кода выберут параграф () с указанным идентификатором для его обработки.

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

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

Кстати, крупнейшие поисковые системы уже перешли на jQuery .

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

Молниеносность достигается благодаря использованию селекторов – механизму быстрого обращения к любому объекту .

Google . Вся работа с библиотекой ведётся посредством функции $ и разделяется на два типа:

• сначала получаем нужный объект посредством синтаксиса $() путём передачи функции CSS-селектора, который подпадает под критерий, затем обрабатываем его посредством нужного метода;
• вызываем глобальные методы в указанного в функции $() объекта .

Эксплуатация фреймворка возможна только после полной загрузки страницы на компьютер пользователя.

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

JavaScript и jQuery

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

Перед тем, как перейти к описанию jQuery, еще раз напомню, что такое объектная модель документа или DOM (Document Object Mode l). DOM – это иерархическая структура объектов в оперативной памяти, соответствующая структуре загруженной интернет страницы. DOM формируется браузером и предоставляет программный интерфейс для работы с элементами разметки, например, с использованием того же JavaScript. Средствами DOM вы можете искать, добавлять и удалять элементы документа, редактировать их атрибуты, менять стили и т.д. Другими словами, с помощью DOM и JavaScript создаются динамические интернет страницы, которые еще называют DHTML страницам (Dynamic HTML pages). Вернемся к библиотеке jQuery. С помощью программного интерфейса jQuery вы легко можете выбрать нужные вам элементы DOM и выполнить с ними любые действия из нижеприведенного списка:

• Изменить ;
• Отредактировать атрибутный состав;
• Удалить;
• Добавить потомков;
• Переместить или обернуть другим элементом;
• Выполнить копирование;
• Привязать обработчик события;
• Настроить визуальный эффект или анимацию;

Для начала нужно скачать библиотеку. Сделать это можно на сайте авторов jQuery: http://jquery.com . Далее, необходимо ее просто подключить с помощью тега примерно так:

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

Я уже сказал, что синтаксис запросов jQuery достаточно прост. Именно запросов, поскольку программирование на JavaScript с использованием jQuery можно отнести к декларативному программированию , которое отличается от классического процедурного программирование тем, что вы описывает “что нужно сделать”, а не “как сделать”. В названии библиотеки отражена ее суть – язык запросов в контексте JavaScript. Все запросы на jQuery начинаются вызовом функции $ , аргументом которой является сам запрос. Итак, обобщенный синтаксис jQuery запроса выглядит примерно так:

$(запрос )[{.фильтр (критерий )}].действие (аргументы ){ .действие (аргументы )} Запрос – это селектор или список селекторов, разделенных запятой. Синтаксис запроса совпадает с синтаксисом селекторов CSS стилей. Таким образом, запрос jQuery может начинаться примерно так:
$(“div”) - выбор всех элементов div ;
$(“div, p”) – выбор всех элементов div и элементов p ;
$(“.class_name”) – выбор всех элементов класса class_name ;
$(“#element_id”) – выбор элемента с идентификатором element_id ;
$(*) – выбор вообще всех элементов;
$(“.class_name span”) – выбор всех элементов span в рамках всех элементов класса class_name ;
$(“#element_id > div”) – выбор всех элементов div , являющихся прямыми потомками (дочерними элементами) элемента с идентификатором element_id .
$(“#element_id .class_name + div”) – выбор всех элементов, которые следуют сразу за элементами класса class_name в рамках элемента element_id .
$(“#ul_id > li:first”) – выбор первого элемента li списка ul_id . Также, можно выбрать последний last элемент либо все четные even или нечетные odd элементы. Есть и другие варианты.
$(“a”) – выбор всех ссылок со значением атрибута href , начинающегося на “http://ru.wikipedia.org” . Без символа “^” получим условие на полное совпадение значений, если вместо символа “^” поставим символ “$”, то получим ограничение на совпадение с конца, а символ * будет означать, что значение атрибута должно просто содержать указанный фрагмент.

Фильтр – способ отфильтровать набор выбранных элементов по дополнительным критериям. Критерии – это те же селекторы. Есть две противоположные друг другу операции: filter и not . Если использовать операцию filter(критерий) , то выбранными останутся только те элементы, которые удовлетворяют аргументу - критерию, а если not , то останутся только те, что не удовлетворяют. Обычно, смысл имеет использовать операцию not , поскольку критерий операции filter обычно легко объединить с основным селектором функции $() . Вот пара примеров использования этих операций:
$(“div”).not(“.class_name”) – исключаем все div класса class_name ;
$(“td, th, div”).filter(“.class_name”) – отбираем элементы td , th , div класса class_name .

Есть еще операция slice(from, to) , которая позволяет выделить последовательность элементов с индексами из промежутка [from - to ].

Действие – это, собственно, само действие – некоторая операция над множеством выбранных элементов . Каждая операция возвращает некий результат: либо то же самое множество, если операция не связана с созданием новых или удалением выбранных элементов, либо уже отредактированное множество, либо набор вновь созданных элементов. Благодаря этому вы можете указать сразу несколько операций, разделенных точками. Приведенный ниже пример выполнит отбор всех элементов span , не относящихся к классу class_name и скопирует их в элемент с идентификатором target :
$("span").not(".class_name").clone().appendTo("#target");

Результат каждой операции – это массив элементов HTMLElement . Размер массива можно узнать с использованием свойства length или функции size() . Аргументами операций могут быть не только строковые параметры, но и результаты других запросов. Вот пример того, как результат одного запроса можно поместить внутрь элемента, который, в свою очередь, являются результатом другого запроса:
$("span").not(".class_name").clone().appendTo($("span.class_name"))

В качестве аргумента можно использовать не весь результат запроса, а отдельный его элемент:
$("span.class_name").append($("span").not(".class_name"));

Таким образом, аргументом операции может быть либо селектор в виде строки, либо результат другого запроса, либо любой экземпляр HTMLElement .

Ниже представлены сводные таблицы с операциями jQuery, их кратким описанием и ссылками на те примеры, которые демонстрируют их применение на практике.

Возвращают или устанавливают значения различных свойств выбранных элементов. Если необходимо определить новое значение свойства, то его следует передать в качестве аргумента, например, $(“#element”).text(text_value) или $(#element”).html(html_value) :

Придерживаясь формальностей jQuery - это полностью бесплатный javascript фреймворк (framework) (для тех кто не в курсе скажу, что фреймворк - это набор готовых функций для облегчения решения типовых задач). Слова "полностью бесплатный" добавлены потому, что есть и не совсем бесплатные, например ExtJS. На самом деле jQuery гораздо больше, чем просто фреймворк, это новая психология программирования на javascript, если можно так выразиться. Я бы сравнил появление jQuery с появлением самого javascript. И это не просто громкие слова. Те, кто уже работает с jQuery подтвердят, что по прошествии некоторого времени начинаешь забывать структуры обычного javascript кода, а строка

становится такой же обязательной как .

Какие же преимущества привнес jQuery в стандартный набор функций языка, которые позволяют мне говорить о "новой психологии программирования на javascript"?
Во-первых, это отношение к (x)html документу действительно как к xml, а не просто формально из-за разметки. На практике это означает, что я легко могу получить доступ к любому узлу (node) древовидной структуры и его атрибутам, а также свободно перемещаться по ветвям. Например, есть table: view source
1

Мне захотелось, чтобы каждый td данной таблицы обрел border="1px solid gray" (предполагается, что проблему нужно решить средствами javascript). Стандартными методами это можно сделать, например, так: view source
1

2

3
for (var i = 0; i < rows.length; i++) {
4

5
for (var j = 0; j < tds.length; j++)
6

7
}
view source
1
var table = document.getElementById("test_tbl");
2
var rows = table.getElementsByTagName("tr");
3
for (var i = 0; i < rows.length; i++) {
4
var tds = rows[i].getElementsByTagName("td");
5
for (var j = 0; j < tds.length; j++)
6
tds[j].style.border = "1px solid gray";
7
}

Как видим целых 7 строчек кода, причем я не могу назвать это "свободным" доступом, потому что представьте себе, что бы мне пришлось выписывать, если бы я захотел добавить border только 3-й ячейке 2-й строки, при условии, что ячейки не имеют уникальных идентификаторов...
Теперь как это делается с помощью jquery: view source
1

view source
1
$("#test_tbl td").css("border","1px solid gray");

Одна строка! Как вам? А теперь 3-я ячейка 2-й строки: view source
1

view source
1
$("#test_tbl tr:eq(1) td:eq(2)").css("border","1px solid gray");

Опять одна строка! Неплохо правда? А ведь это самые простые вещи, основы, в javascript это изначально должно было быть так просто! Вам наверняка потребуется время, чтобы привыкнуть думать в таких категориях.

Во-вторых, jQuery совершил революцию в области html-javascript шаблонизации. До момента его появления последнее было если не принципиально невозможным, то уж настолько трудозатратным, что не многие отваживались с этим связываться, а само выражение "html-javascript шаблонизации" вызывало в лучшем случае улыбку. Широко бытовало мнение, что шаблонизация рациональна только средствами серверных языков программирования, но jQuery, благодаря развитому механизму обработки событий, позволил уже на уровне javascript отделить логику от представления. Рассмотрим пример, и вы поймете о чем я говорю. Несколько изменим нашу таблицу: view source
01

Как видите, это чистый html. Дизайнер может издеваться над стилями сколько угодно, лишь бы сохранялись названия классов. А вся логика теперь сосредоточена в script блоке: view source
01
var tr;
02

03
function appearence(){
04

05
}
06

07

08

09
for(var i=0; i