Javascript и jquery фреймворк

jQuery для начинающих

jQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров, и они далее…

Как же все-таки работает jQuery?

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

А основные моменты Вам поможет понять следующая диаграмма:

Как получить элемент с помощью jQuery?

• $(«#header») — получение элемента с — получить все элементы
• $(«div#content .photo») — получить все элементы с классом =«photo» которые находятся в элементе div с li») — получить все
• элементы из списка
• $(«ul li:first») — получить только первый элемент
• из списка

Выдвижная панель

Начнем с простенького примера — слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)

Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между «active» и «btn-slide»), а панелька с будет выдвигаться/прятаться. (класс «active» изменяет позицию фонового изображения, см. CSS файл во вложении).

Магические исчезновения

Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):

Когда мы кликаем по картинке , будет найден родительский элемент , и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:

$(document).ready(function()< $(".pane .delete").click(function()< $(this).parents(".pane").animate(< opacity: "hide" >, "slow"); >); >);

Связанная анимация

Теперь пример посложнее, но он поможет Вам лучше понять jQuery. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. (см. пример):

Line 0: когда прогрузилась страница (DOM готов к манипуляциям)
Line 1: привязываемся к событию click для элемента
Line 2: манипулируем элементом — уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)
Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром: «slow», «normal», «fast» или в миллисекундах
Line 4: затем opacity=1, left=0, height=100, width=100, скорость — «slow»
Line 5: затем opacity=1, left=0, height=100, width=100, скорость — «slow»
Line 6: затем top=0, скорость — «fast»
Line 7: затем slideUp (с дефолтной скоростью анимации — «normal»)
Line 8: затем slideDown, скорость — «slow»
Line 9: возвращаем false для того чтобы браузер не перешел по ссылке

$(document).ready(function()< $(".run").click(function()< $("#box").animate(, 1200) .animate(, "slow") .animate(, "slow") .animate(, "fast") .slideUp() .slideDown("slow") return false; >); >);

Гармошка #1

Пример реализации «гармошки». (см. пример)

Теперь приступим к разбору полетов:
Первой строчкой мы добавляем класс «active» первому элементу внутри (класс«active» отвечает за позиционирования фонового рисунка — иконки со стрелочкой). Во второй строчке мы прячем все не первые

элементы внутри .
Когда происходит клик по заголовку , для следующего в нём элемента

будет применен эффект slideToggle, затем для всех остальных элементов

будет применен эффект slideUp. Следующие действие изменяет класс заголовка на «active», затем ищем все остальные заголовки и убираем у них класс «active»

Гармошка #2

Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. пример)

В CSS у нас указано для всех элементов

display:none. Теперь нам необходимо открыть третью панель. Для этого мы можем написать следующее $(«.accordion2 p»).eq(2).show(), где eq обозначает равенство. Помните, что индексирование начинается с нуля:

Анимация для события hover #1

Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это?), (см. пример):

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

$(document).ready(function()< $(".menu a").hover(function() < $(this).next("em").animate(, "slow"); >, function() < $(this).next("em").animate(, "fast"); >); >);

Анимация для события hover #2

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

$(document).ready(function() "); $(".menu2 a").hover(function() < $(this).find("em").animate(, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); >, function() < $(this).find("em").animate(, "fast"); >); >);

Кликабельные блоки

Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. пример):

с классом и мы хотим сделать элементы
кликабельными. Для начала привяжемся к событию click для элемента «.pane-list li»; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга и сделает редирект на страницу указанную в атрибуте href.

Складывающиеся панельки

Ну а теперь чуть-чуть скомбинируем предыдущие примеры и создадим ряд складывающихся панелек (наподобие как в Gmail организован inbox). (см. пример)

• скрываем все элементы после первого.
• скрываем все элементы
• после пятого
• клик по — вызывает метод slideToggle для следующего элемента
• клик по — вызывает метод slideUp для всех
• клик по — скрывает элемент, и отображает , так же вызывается метод slideDown для всех
• послепятого
• клик по — скрывает элемент, и отображает , так же вызывается метод slideUp для всех
• после пятого

$(document).ready(function()< //hide message_body after the first one $(".message_list .message_body:gt(0)").hide(); //hide message li after the 5th $(".message_list li:gt(4)").hide(); //toggle message_body $(".message_head").click(function()< $(this).next(".message_body").slideToggle(500) return false; >); //collapse all messages $(".collpase_all_message").click(function()< $(".message_body").slideUp(500) return false; >); //show all messages $(".show_all_message").click(function()< $(this).hide() $(".show_recent_only").show() $(".message_list li:gt(4)").slideDown() return false; >); //show recent messages only $(".show_recent_only").click(function()< $(this).hide() $(".show_all_message").show() $(".message_list li:gt(4)").slideUp() return false; >); >);

Имитация Backend’a WordPress’a

Я думаю многие из читателей сталкивались с админской частью wordpress’a, точнее с редактирование комментариев. Попробуем сделать что-то подобное. Для анимации фонового цвета нам понадобиться соответствующий плагин для jQuery. (см. пример)

• добавим класс «alt» к каждому чётному элементу (данный класс изменяет цвет фона элемента)
• клик по инициирует появление сообщения (alert), так же происходит анимация фонового цвета и прозрачности (backgroundColor и opacity) для
• клик по — вызывает анимацию фона у (цвет изменяется на желтый и обратно) и добавляет класс «spam»
• клик по — вызывает анимацию фона у (цвет изменяется на зеленый и обратно) и удаляет класс «spam»
• клик по — вызывает анимацию фона у (цвет изменяется на красный), и изменяет параметр «opacity» на «hide»

//don't forget to include the Color Animations plugin $(document).ready(function()< $(".pane:even").addClass("alt"); $(".pane .btn-delete").click(function()< alert("This comment will be deleted!"); $(this).parents(".pane").animate(< backgroundColor: "#fbc7c7" >, "fast") .animate(< opacity: "hide" >, "slow") return false; >); $(".pane .btn-unapprove").click(function()< $(this).parents(".pane").animate(< backgroundColor: "#fff568" >, "fast") .animate(< backgroundColor: "#ffffff" >, "slow") .addClass("spam") return false; >); $(".pane .btn-approve").click(function()< $(this).parents(".pane").animate(< backgroundColor: "#dafda5" >, "fast") .animate(< backgroundColor: "#ffffff" >, "slow") .removeClass("spam") return false; >); $(".pane .btn-spam").click(function()< $(this).parents(".pane").animate(< backgroundColor: "#fbc7c7" >, "fast") .animate(< opacity: "hide" >, "slow") return false; >); >);

Галерея изображений

Простейший пример реализации галереи, без перезагрузки страницы. (см. пример)

Для начала добавим тэг в заголовки
По клику на изображения в

выполняем следующие действия:

• сохраняем значение атрибута «href» в переменной «largePath»
• сохраняем значение атрибута «title» в переменной «largeAlt»
• заменяем в элементе значение атрибута «scr» и «alt» значениями из переменных «largePath» и «largeAlt»
• так же присваиваем элементу «h2 em» значение из «largeAlt»

$(document).ready(function() ') $(".thumbs a").click(function()< var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $("#largeImg").attr(< src: largePath, alt: largeAlt >); $("h2 em").html(" (" + largeAlt + ")"); return false; >); >);

Стилизируем ссылки

Большинство нормальных браузеров легко понимают когда мы хотим добиться от них стилизации ссылок для различного типа файлов, для это цели можно использовать следующее CSS правило: a[href $=’.pdf’] . Но как обычно IE6 отличается умом и сообразительностью, по этой причине будем ставить ему костыли используя jQuery. (см. пример)

Для начала добавим класс для каждой ссылки, в соответствии с типом файла.
Затем выберем все элементы которые не содержат ссылки на «http://www.webdesignerwall.com» и не начинающиеся на «#» в «href», затем добавим им класс «external» и устанавливаем target= «_blank».

Так же Вы можете посмотреть все примеры или скачать jQuery tutorial for beginners.

Так же много полезных ссылок по jQuery найдете на следующей странице: http://blog.termit.name/jquery/

Может кому пригодиться еще библиотека jQuery-PHP

Источник

Javascript и jquery фреймворк

Only 30kB minified and gzipped. Can also be included as an AMD module

CSS3 Compliant

Supports CSS3 selectors to find elements as well as in style property manipulation

Cross-Browser

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Other Related Projects

Resources

A Brief Look

DOM Traversal and Manipulation

Get the element with the class ‘continue’ and change its HTML to ‘Next Step. ‘

$( "button.continue" ).html( "Next Step. " )

Event Handling

Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.

var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) 
 hiddenBox.show();
>);

$.ajax(
 url: "/api/getWeather",
 data: 
 zipcode: 97201
 >,
 success: function( result ) 
 $( "#weather-temp" ).html( "" + result + " degrees" );
 >
>);