jQuery примеры

Опубликовано admin - вс, 09/20/2009 - 11:08

Для тех, кто интересуется jQuery будет интересно читать эту статью. Потому что jquery наиболее удобен при написании веб приложений, быстро изучаем, не говоря о количестве плагинов и виджитов содержащихся на официальном сайте, которые может приспособить к своему сайту даже неопытный пользователь интернта и не говоря об эффектах jquery. В этой статье мы остановимся не на простых функциях jquery, а на наиболее труднопонимаемых функциях jquery, которые будут разъясняться на примерах взаимодействия со структурой DOM.

Вышла новая статья - jQuery - самое нужное! C неё начнётся новый цикл статей о самом нужном в jQuery. Советую почитать - jQuery - самое нужное!. jQuery меню, данные с twitter.com и многое другое Вы найдёте в новой статье!

Начнём с самого простого. В некоторых случаях разработчику необходимо использовать элементы форм наиболее продвинутыми способами, например, когда необходимо создать возможность пользователю отмечать не один элемент checkbox, а несколько или сразу все. Для этого замечательно подходит jquery, в качестве примера можно взять следующий вариант jquery кода.

Как видно из этого несложного примера, с помощью одного события click() мы отмечаем сразу все элементы chekbox.

Однако данный вариант лишь упрощенная копия того что мы хотели добится, ведь возможен вариант когда пользователь понажимает по элементам, и тогда наша фунция для тех элементов checkbox, которые были отмечены становится бессмыслена, потому что для них так же будет запущено событие click() и следовательно они не будут отмечены, а наоборот будут выключены. Как же избежать этого? С помощью простого кода, опять же на jquery.

Я думаю ни чего сложного, но полезно для поля формы password.

Теперь после небольших примеров jquery для начинающих, перейдём к более сложным вещам. Как и для большинства веб программистов ajax для меня одно из замечательных средств для построения эффективной структуры сайта и обеспечения пользовательского взаимодействия.

И как всегда jquery помогает мне в этом. Функции jquery связанные с ajax, на мой взгляд наиболее хорошо продуманы со стороны разработчиков. К примеру есть простейшие примеры ajax функций, осущетсвляющих запрсы к серверу, например load(), есть и сложные функции, например $.ajax(). Простые пригодятся для повседневной работы и небольших эффектов на сайте, сложные подойдут для осущетсвления нескольких запросов, с различным количестовм настроек. Для того чтобы быть более понятным посмотрите простейший пример с импользованием фунции load().

Здесь первая функция load() отправляет запрос к странице 2.php c массивом. И получает обратно ответ от сервера (function(text){alert(text);}).

Вторая функция делает то же самое но с разницей лишь в том, что фильтрует ответ по id элемента, в результате чего в качетстве ответа мы получим содержание элемента id которого hello2. Сохранить ответ от сервера в переменной можно следующим способом, например, var post = $.post("load.php").responseText;

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

Пример выполнения функции $ajax на основе двух запросов и использовании глобальных настроек jQuery.ajaxSetup().

Отойдём от ajax и перейдём к менее сложным задачам. Зачем нужна функция clone() и как её использовать? Не всегда понятно зачем нужна фунцкия clone(), но в результате её выполянения Вы можете получить коипю элемента или объекта. Примеры: в первом пример с помощью фунции clone() мы сохраняем элемент в перменную clone, а во втором примере мы сохраняем и копируем элемент без использования переменной. 

Надеюсь теперь ни у кого вопросов не возникнет при использовании функции clone().

После того как Ваш мозг отдохнул от этого легкого примера перейдём к сложному. А именно к постраничному выводу на jquery и php и mysql. Сразу оговорюсь, что этот пример не полностью аналог обчного потсраничного вывода. Он лишь основа для разработки более серьзных вещей. Но в качестве основы и примера вполне пригодится.

В этом примере находит место применение всего того о чём мы говорили ранее о фунцкии ajax(), здесь их с избытком.

Хотелось бы сказать что это всё но нет, мы забыли про php и mysql. Это вторая составляющая нашего потсраничного вывода на jquery и она не менее интересна.

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

Второй скрипт, ответственный за вывод новостей следующий.

Теперь можно сказать что это всё. Правда я забыл вам передать таблицу mysql. Вот она.

Вообще Вы можете её скачать уже заполненной (zip Архив).

Теперь можно сказать всё с постраничным выводом на jquery и php + mysql.

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

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

Не маловажным сегодня становиться бесконфликтное использование нескольких js библиотек, например mootools и jquery, поэтому напоследок рассмотрим ошибкоустойчивый код на jquery с библиотекой mootools.

Следующий отрезок кода - ;(function( $ ){ ваш код jquery....})( jQuery ); позволят избавить jquery от конфликта с другими js библиотеками. Единственное, что для Вас здесь может быть непонятно, так это функция $.fn.extend(), данная функция позволяет Вам добавлять собственные методы juqery, подробно об этой функции можно прочитать в руководстве http://slyweb.ru/jquerydoc/jQuery-fn-extend-object.php.

Избегать конфликтов js библиотек можно и с использованием ещё одной фнуции jquery - jQuery.noConflict() - http://slyweb.ru/jquerydoc/jQuery-noConflict.php.

Пример применения jQuery.noConflict();

На этом моя статья о некоторых функциях jquery заканчивается, надеюсь Вам пригодятся мои знания о jquery.

Вышла новая статья - jQuery - самое нужное! C неё начнётся новый цикл статей о самом нужном в jQuery. Советую почитать - jQuery - самое нужное!. jQuery меню, данные с twitter.com и многое другое Вы найдёте в новой статье!

Взаимосвязанные материалы

# 1. О сайте (суббота, июля 6, 2019 - 21:51 ),

Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.

На сегодняшний день slyweb.ru представляет следующие услуги:

читать...
# 2. Как написать первый плагин на jQuery, с использованием ajax? (воскресенье, июня 3, 2018 - 10:52 ),

Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время. читать...

# 3. jQuery для начинающих! (пятница, июня 1, 2018 - 21:28 ),

Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?". читать...

# 4. jQuery - самое нужное! Карусель! (воскресенье, мая 20, 2018 - 19:22 ),

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. читать...

# 5. Аудио плеер на основе HTML5 и jQuery (вторник, апреля 17, 2018 - 19:23 ),

Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

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