→ Примеры jQuery для начинающих
jQuery - javascript библиотека, состоящая из кроссбраузерных функций - оплеток для манипулирования элементами DOM (Document Object Model - Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера. К примеру, получение элемента html документа по ID, в разных браузерах происходит по разному. До появления jquery, я использовал такую функцию:
Function getObj(objID){ if (document.getElementById) {return document.getElementById(objID);} else if (document.all) {return document.all;} else if (document.layers) {return document.layers;} }
Чтобы это же действие совершить в jquery, достаточно сделать так:
$("#objID") или jQuery("#objID")
Обращение к функции $() равносильно jQuery() , так как первая является алиасом для второй. Если Вы не используете других библиотек, подобных jquery, то можете смело обращаться к пространству имен через $(). В противном случае лучше использовать непосредственное имя объекта - jQuery. Далее, считаем что нет других библиотек.
Начало работы с jQueryИтак, начинаем работу. Первым делом необходимо получить новейшую версию библиотеки jquery с официального сайта проекта http://jquery.com/ или скачать jquery здесь. В архиве и на официальном сайте лежат две версии: сжатая и девелоперская. На сайте лучше использовать сжатую, а если захочется поэкспериментировать воспользуйтесь второй. Первым делом подключаем библиотеку jquery в тело страницы:
После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $("#objID") . Где objID - ID объекта.
jQuery и CSSВ качестве первого примера рассмотрим работу jquery и CSS. Существует два основных способа манипулирования CSS с помощью jquery: изменение одного атрибута или сразу нескольких. Выполняются они через функцию css() . Выглядит в теории это примерно так:
$("#objID").css("display","block") $("#objID").css({ display:"block, margin:"10px", color:"#ffffff" })
Пример изменения одного атрибута CSSПример изменения одного атрибута удался!
Исходный код:
Пример изменения одного атрибута удался!
Пример изменения нескольких атрибутов CSSПример изменения нескольких атрибутов!
Исходный код:
function demo_css(){ $("#span2").css({ color:"#ffffff", padding:"5px", background:"#980000" }); } Пример изменения нескольких атрибутов!
Изменение текста и htmlДля изменения текста или html кода существуют функции text() и html() .
$("#objID").text("Тру ля ля") $("#objID").html("
Тру ля ля
Причем, если попытаетесь с помощью функции text() вставить html код, то получите его в исходном виде. Функция text() все экранирует.
Пример использования text()Исходный код:
function set_text(){ $("#span3").text("Спасибо!"); }
Пример использования html()Исходный код:
function set_html(){ $("#span4").html("Спасибо! Так гораздо лучше."); }
Управление атрибутами с помощью jQueryФункция attr() манипулирует любыми атрибутами элемента. С ее помощью можно добавить или изменить title, href, value, src и так далее.
Пример использования attr()Исходный код:
function plus_ten(){ var cur_value = $("#text").attr("value"); cur_value = parseInt(cur_value) + 10; $("#text").attr("value",cur_value); }
Обработчики событий в jQueryПолный список доступен по адресу http://api.jquery.com/category/events/. Приведу лишь несколько примеров. Самый распространенный обработчик события onclick. В jQuery можно перехватить через функцию click() .
Пример использования click()Исходный код:
$("#butt").click(function(){ alert("Решили проверить?"); });
Пример использования keyup()Введите что-нибудь:
Вы ввели:
Исходный код:
Введите что-нибудь:
Вы ввели:
$("#text2").keyup(function(){
if ($("#text2").val()){
$("#text2_target").css({background:"#980000"});
} else {
$("#text2_target").css({background:"#ffffff"});
}
$("#text2_target").text($("#text2").val());
});
Кликни по мне!
Исходный код:
div#log{
background:#1C93A5;
width:300px;
height:100px;
padding:10px;
color:#fff;
}
Кликни по мне!
$(document).ready(function() {
$("#log").bind("click", function(e) {
$("#coord").html("Координата X: "+ e.pageX + " Координата Y: " + e.pageY + "");
});
});
JQuery это великолепная библиотека. Она помогала отлично обойти все подводные камни IE6. В прошлые времена кроссбраузерность была большим вопросом, который стоял перед разработчиками. Jquery отлично справлялся со всеми расхождениями отображения верстки в различных браузерах.
На сегодня, браузеры имеют отличные унифицированные решения. Мы можем комфортно использовать все привилегии ES5, также в нашем распоряжении HTML5 API с которым гораздо легче обрабатывать DOM элементы. Разработчики стоят на грани забвения и ухода в сторону от jQuery для некоторых проектов. Особенно, в случае с микросервисами и не сложными программами.
Не поймите не правильно — Jquery все еще остается чудесной библиотекой, и конечно же, в 70% случаев вам придется использовать ее. Хотя для маленьких страничек с ограниченным JS, вы можете использовать VanillaJS или другой фреймворк. Таковы подойдут для мобильных приложений.
Что же, вот вам 10 примеров рабочего кода, с которым можно обойтись без jquery.
Отслеживание события завершения загрузки страницыПервая вещь, которой пользуются используя jQuery - это обвертка кода в $(document).ready() метод, чтобы знать когда DOM готов для манипуляций. Без Jquery, мы можем использовать DOMContentLoaded событие. Вот пример кода:
// Слушаем событие DOMContentLoaded для всего документа, анонимной функцией // Вы можете обвернуть свой код, в дужки этой функции // и она выполнится, когда страница будет загруженной. document.addEventListener("DOMContentLoaded", function () { // наш гавайский привет, будет показан в консоле console.log("Aloha"); });
Селекторы элементов без JqueryОднажды, нам придется выбирать элементы с помощью id, class или тэгов, и jQuery один из лучших. Селекторы которого полностью идентичны синтаксису CSS. На сегодня, браузеры презентовали два важнейших API - querySelector и querySelectorAll.
// Можно использовать document.querySelector чтобы получить первый элемент соответствующий критерию // принимает всего один аргумент - CSS селекторы. var lochNess = document.querySelector(".monsters"); console.log("It"s from Scotland - " + lochNess.textContent); // также можем получить коллекцию используя document.querySelectorAll. // возвращает список dom элементов, соответствующий критерию var scary = document.querySelectorAll(".monsters"); console.log("Hide and seek champions: "); for (var i = 0; i < scary.length; i++) { console.log(scary[i].innerHTML); }
- Nessy
- Big foot
- La chupacabra
Слушание событий, это фундаментальная часть построения веб приложений. Исторически произошло два больших лагеря — IE и остальные. Но сегодня, мы просто используем addEventListener
Var btn = document.querySelectorAll("button"), list = document.querySelector("ul"); // Вызываем addEventListener на желаемое событие. // запускает слежение за событием клика по элементу. btn.addEventListener("click", function () { // При нажатии кнопки, мы хотим инициировать событие масштаба нашего списка. // Для этого нам необходимо добавить событие в наш список, // чтобы при наведении мыши на элемент функция сработала. list.addEventListener("mouseover", enlarge); }); // Для отмены события масштабирования используем removeEventListener. btn.addEventListener("click", function () { // Удаление событий не будет работать с безымянными функциями, используйте только именованные list.removeEventListener("mouseover", enlarge); }); // Давайте создадим функцию, которая будет масштабировать. var enlarge = function () { // Добавляем класс для элементов list.classList.add("zoomed"); // когда курсор уйдет из списка, уберем класс, чтобы вернуться к обычному масштабу list.addEventListener("mouseout", function () { list.classList.remove("zoomed") }); }; // Теперь мы хотим подсветить имена при нажатии на них. // Когда клик сработает на элементе, он должен стать зеленым // Благодаря делегированию событий, мы можем просто добавить обработчик на родительский элемент // В этом способе, мы не будем создавать слушатели событий для каждого
Enable zoom
Disable zoom
Нажмите на имя, чтобы выделить его
- Chewbacca
- Han Solo
- Luke
- Boba fett
Green { color: green; } .zoomed { cursor: pointer; font-size: 23px; }
addEventListener использовал третий аргумент, но это опционально. Как видите, код выглядит весьма похоже на jQuery.
Добавление, удаление классов без jQuery на чистом JSУправление классами элементов без jQuery было огромной проблемой в былые времена. Но больше нет. Благодаря свойству classList. А если необходимо изменять аттрибуты, можно использовать setAttribute.
Var btn = document.querySelectorAll("button"), div = document.querySelector("#myDiv"); btn.addEventListener("click", function () { // легкий способ получать аттрибуты элемента console.log(div.id); }); // Element.classList хранит все классы элемента из DOMTokenList. var classes = div.classList; btn.addEventListener("click", function () { console.log(classes); }); btn.addEventListener("click", function () { // Добавление и удаление классов classes.add("red"); }); btn.addEventListener("click", function () { // Переключение класса classes.toggle("hidden"); });
Display id Display classes Color red Toggle visibility
Square { width: 100px; height: 100px; margin-bottom: 20px; border: 1px solid grey; border-radius: 5px; } .hidden { visibility: hidden; } .red { background-color: red; }
Получение и изменение HTML контента элементаjQuery имеет удобные методы text() и html(). Вместо них, вы можете использовать textContent и innerHTML свойства, которые существовали еще задолго до появления jQuery.
Var myText = document.querySelector("#myParagraph"), btn = document.querySelectorAll("button"); // Так с легкостью можно узнать весь текст древа элементов var myContent = myText.textContent; console.log("textContent: " + myContent); // Используйте textContent для замены текста элемента // удаляет старый, замещая новым текстом btn.addEventListener("click", function () { myText.textContent = " Koalas are the best animals "; }); // Если нам нужен HTML элемента, используем innerHTML. var myHtml = myText.innerHTML; console.log("innerHTML: " + myHtml); // Для замены html, просто предоставьте новый btn.addEventListener("click", function () { myText.innerHTML = " Penguins are the best animals "; });
Which are the best animals?
KoalasPenguins Вставка новых и удаление существующих элементов
Не смотря на то, что Jquery значительно упрощает работу с добавлением и удалением элементов, никто не говорил, что этого не реально сделать на чистом JavaScript коде. Вот пример, как добавить, удалить или заменить элемент на странице.
Var lunch = document.querySelector("#lunch"); // Допустим у нас есть меню, нашего ланча // Давайте добавим в него что нибудь var addFries = function () { // Прежде создаем элемента, и наполняем контентом var fries = document.createElement("div"); fries.innerHTML = "
Add fries to lunch Add cheese to sandwich Remove pickles My Lunch
- My sandwich
- Bread
- Pickles
- Beef
- Mayo
- Bread
С появлением jQuery, у веб-программистов появилась возможность создавать впечатляющие визуальные эффекты, не прибегая к использованию технологии flash. В данной статье представлено несколько ярких примеров того, каких потрясающих результатов можно достичь, используя стандартные средства браузера и свое воображение.
Хорошо организованный эффект, позволяющий увеличивать ту часть изображения, над которой будет находиться курсор. В браузерах, незнакомых с CSS3 увеличительное стекло будет квадратным.
![](https://i0.wp.com/habrastorage.org/storage/47211789/1d1ac52b/e8d6b9ea/59805806.jpg)
Этот слайдер обладает восемью различными режимами перелистывания изображений, каждый из которых радует глаз, своей безупречно отточенной динамикой.
![](https://i2.wp.com/habrastorage.org/storage/05d8715a/789e0e7c/7a521e63/410f5103.jpg)
![](https://i1.wp.com/habrastorage.org/storage/e81d35e9/7a685b81/22d3597a/406d2883.jpg)
![](https://i1.wp.com/habrastorage.org/storage/2fcba12c/849b97ab/7781143a/032b6874.jpg)
Не так часто можно встретить сайт, на котором было бы много круглых элементов. Плагин Bubble Navigation позволяет сделать динамичную навигацию, построенную исключительно на кругах.
![](https://i1.wp.com/habrastorage.org/storage/f0b57126/bce96928/fd287aa8/d3c12b21.jpg)
![](https://i0.wp.com/habrastorage.org/storage/ec48f81b/8808e6c8/4400302a/e5b5bb34.jpg)
Позволяет запускать элементы страницы по окружности, причем в различных плоскостях пространства.
![](https://i1.wp.com/habrastorage.org/storage/42dd0cbc/86a59eea/3ca9f6d3/98fee95d.jpg)
Плагин Flip позволяет переворачивать элементы так, как будто это карточки.
![](https://i2.wp.com/habrastorage.org/storage/e2774c4a/7285ba4d/2a01d01e/370bb352.jpg)
Неформальная галерея изображений. Предпросмотр содержимого представляет из себя группу разбросанных фотографий, сделанных на фотоаппарат полароид.
![](https://i1.wp.com/habrastorage.org/storage/723480f3/9d33bf0f/caf005ad/0f95b22c.jpg)
Простой, но очень приятный слайдер изображений.
![](https://i1.wp.com/habrastorage.org/storage/b4011dd6/25968b1f/9c21fb6f/c6ce6ddc.jpg)
Слайдшоу, с перемещением изображений в пространстве.
![](https://i1.wp.com/habrastorage.org/storage/c36e93b8/26327b0e/649bed26/a824422f.jpg)
Очень интересный способ сделать интерактивный каталог товаров.
![](https://i0.wp.com/habrastorage.org/storage/52708187/d4e73b38/971615e3/c2c71ea9.jpg)
![](https://i2.wp.com/habrastorage.org/storage/012bbcc4/3952b789/1e0b1708/28195c54.jpg)
Позволяет делать снимки отдельных частей изображения на странице. Нажмите кнопкой мыши на нужную часть изображения и увидите результат на экране.
![](https://i2.wp.com/habrastorage.org/storage/e289dc60/326b6d5f/b9375a4d/d26158d2.jpg)
Плагин Quicksand позволит вам сортировать и фильтровать набор элементов, используя для этого очень качественные эффекты.
![](https://i2.wp.com/habrastorage.org/storage/4783a655/74279bfe/b6f9b224/b011e3f2.jpg)
Этот плагин будет очень полезен для создания детального описания сложных объектов и интерактивных туров, когда требуется, занимая как можно меньше места предоставить большое количество информации.
![](https://i2.wp.com/habrastorage.org/storage/8021ebac/628e49d8/4477d7f4/b55795fd.jpg)
Плагин Sliding boxes поможет сделать необычную динамичную галерею изображений с заголовками к ним.
![](https://i2.wp.com/habrastorage.org/storage/249b62a3/e8b74919/8b727f1d/ad47c036.jpg)
Галерея изображений, элементы которой будут весело выскакивать вперед при наведении курсора на них.
В этой статье познакомимся с сокращёнными AJAX методами jQuery: load, get, getJSON, getScript и post. Эти методы позволяют очень просто осуществлять необходимые AJAX запросы и в отличие от функции ajax, для их написания требуется меньшее количество строчек кода.
jQuery - метод loadМетод load предназначен для получения данных с сервера по указанному адресу URL и помещения их в один или несколько выбранных элементов.
Метод load имеет следующий синтаксис:
Load(url [,data] [,complete]) // параметры в квадратных скобках являются необязательными //url - строка, содержащая URL адрес, на который необходимо отправить запрос //data (необязательный параметр) - данные, которые необходимо послать на сервер (в формате строки или объекта) //complete – дополнительные действия, которые необходимо выполнить после завершения запроса (указываются посредством функции Function(responseText, textStatus, xhr) ) // responseText - ответ сервера // textStatus - статус ответа // xhr - XMLHTTPRequest объект
В большинстве случаев для отправки запроса метод load использует GET. Но он также может использовать и метод POST. Это происходит только тогда, когда данные для отправки на сервер указываются не в формате строки, а посредством объекта.
Примеры использования метода load1. Вставить содержимое файла asidenav.tpl в блок c id="asidenav" после загрузки DOM страницы:
...
// после загрузки DOM страницы
$(function() {
// вставить в элемент (#asidenav) контент файла asidenav.tpl
// если файл не находится в той же директории что и HTML документ, то необходимо дополнительно указать путь к нему
$("#asidenav").load("asidenav.tpl");
});
2. Загрузить часть файла demo.html в элемент при клике по кнопке, расположенной в нём:
Получить контент файла demo.html ... $("#ajaxclick").click(function(){ // загрузить в элемент id="content1" часть файла demo.html (#content1) $(this).parent().load("demo.html #content1"); });
Контент файла demo.html:
Файл demo.html
...
...
3. Загрузить в элемент, имеющий id="result" ответ content.php . Данный ответ будет зависеть от значения атрибута data-content , которое имеет кнопка, пославшая AJAX-запрос на сервер.
Загрузить содержимое 1 Загрузить содержимое 2 Загрузить содержимое 3 ... // при нажатии на кнопку, имеющую класс load-ajax-click $(".load-ajax-content").click(function(){ // определим значение атрибута data-content var dataContent = $(this).attr("data-content"); // запросим данные из файла, с использованием значения атрибута data-content, и выведем их в элемент id="result" if (dataContent) { $("#result").load("content.php","content="+dataContent); } });