jQuery - самое нужное!

Опубликовано admin - чт, 02/10/2011 - 21:18

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

Оглавление статьи "jQuery - самое нужное!"

Пример 1. Используйте mouseleave вместо mouseout

Иногда приходится повозиться с элементами, на которых должно срабатывать определенное событие, например mouseover, но как на зло, внутри этих элементов есть ещё элементы, и иногда получается, что событие срабатывает дважды, а нам нужно только один раз. Для предотвращения данного поведения Вам нужно использовать обработчик события mouseleave вместо обработчика события mouseout.

А вот и результат:

Пример 2. Запрещаем всплывать событиям!

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

Пример 3. Вывод формы в зависимости от выбора пользователя

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

Пример 4. Подгруздка данных на страницу!

Вот этот пример точно должен знать уважающий себя разработчик, так как, если человек заботится о своих посетителях, то он не должен грузить весь набор js файлов и картинок, как это делают многие начинающие разработчики. Грузите сперва часть верхней страницы, а потом остатки, в момент начала прокрутки страницы, в следствие чего пользователь быстрее увидит страницу. В следующем примере по достижении элемента с классом helpattr (см. строку 3), будет загружена страница указанная в методе load() - единожды, дальнейшая прокрутка страницы будет проигнорирована.

Пример 5. Как поставить курсор в поле input?

Вопрос для новичков, но всё же, может кто не знает!

Пример 6. Перенаправляем на страницу с jQuery

При нажатии на определенный элемент перенаправляем человека на другую страницу!

Пример 7. jQuery начало autocomplate

Очень простой недоделанный autocomplate, иногда просят, чтоб всплывающее окно появлялось точно под input, этого достичь можно используя методы position и offset.

А вот и результат нажмите:

Пример 8. Удаление элемента после задержки.

Конечно, нужно рассказать Вам про метод delay, в следующем примере, анимация будет начата только после истечения 1 секунды. Метод delay, по моему мнению, можно использовать при скрытии меню, например при случайном отведении, от субменю, чтобы субменю резко не исчезало, ведь человек может случайно дёрнуть рукой.

А вот и результат нажмите на элементе:

Нажми здесь!

Пример 9. Полная загрузка удаленной страницы

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

Пример 11. Выдвижное меню на jQuery

Не мог я оставить без внимания простое меню на jQuery, которое улучшит восприятие структуры сайта и сделано оно очень просто - всего пару строк jQuery кода:

А вот и результат!

В заключение

На последок, хотелось бы узнать, что бы ещё хотели пользователи узнать в следующих статьях? И указали бы об этом в комментариях к статье! Успехов и до встреч!

На разработку сайта! Скидки до 20%!