Здравствуйте уважаемые читатели, в этой статье собрано многое, что могло бы заинтересовать каждого интересующегося jQuery. Только практика в jQuery примерах, ни теории, ни "демагогии".
Оглавление статьи "jQuery - самое нужное!"
- Пример 1. Используйте mouseleave вместо mouseout
- Пример 2. Запрещаем всплывать событиям!
- Пример 3. Вывод формы в зависимости от выбора пользователя.
- Пример 4. Подгрузка данных на страницу!
- Пример 5. Как поставить курсор в поле инпут?
- Пример 6. Перенаправляем на страницу с jQuery
- Пример 7. jQuery начало autocomplate
- Пример 8. Удаление элемента после задержки.
- Пример 9. Полная загрузка удаленной страницы
- Пример 10. Загружаем популярное с твиттера
- Пример 11. Выдвижное меню на 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 кода:
А вот и результат!
В заключение
На последок, хотелось бы узнать, что бы ещё хотели пользователи узнать в следующих статьях? И указали бы об этом в комментариях к статье! Успехов и до встреч!
116 просмотров
Взаимосвязанные материалы
Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.
На сегодняшний день slyweb.ru представляет следующие услуги:
читать...Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время.
читать...Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?".
читать...Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель.
читать...Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.
Плеер будет поддерживать следующие функции:
читать...