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

jQuery примеры. Часть 2!

Сегодня я расскажу о примерах jQuery, пользующихся наибольшей популярностью для начинающих. Среди них будут примеры для работы с содержимым элементов, примеры, объясняющие создание множественных обработчиков, примеры создания новых методов jQuery, карусель от google, правильное использование объекта Deferred, json и многое другое.

Оглавление статьи "jQuery примеры. Часть 2."

1. jQuery для начинающих!

1.1. Пример для начинающих - делим элемент на два!

Часто приходится искать информацию внутри элемента и разбивать её на части, например, приходилось из элемента div, содержащего разделительную полосу получать два других div, при чём в первом должен был быть текст расположенный до разделительной линии, а во второй div после разделительной линии, для большей понятливости посмотрите ниже пример:

  • Код
  • Чистый код
  1.<div id="text">
  2.text1 text1 text1
  3.<hr id="sep" />
  4.text2 text2 text2
  5.</div>
  6.
  7.нужно получить из него такое:
  8.<div id="text1">
  9.text1 text1 text1
10.</div>
11.<div id="text2">
12.text2 text2 text2
13.</div>

        

Для этого необходим следующий код jQUery:

  • Код
  • Чистый код
  1.$(document).ready(function() {
  2.
  3.$('#text').contents().filter(function(i) {
  4. return this.nodeType == 3;
  5.
  6.})
  7. .wrap('<div></div>')
  8. .end()
  9. .filter('hr')
10. .remove();
11.
12.$('#text').find('div').addClass(function() {
13. return 'text' + ($(this).index()+1);
14.});
15.
16. alert($('#text').html())
17.});

        

1.2. Начинающему - почему на элементе не срабатывает событие?

У начинающих возникает вопрос, - почему не работает событие (обработчик события) для вновь созданного элемента? И в качестве примера указывают примерно такой код:

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(function(){
  3.
  4. $("#newel").click(function(){
  5. $(this).text('Старый элемент!');
  6. });
  7.
  8. $("body").append('<div id="newel">Новый элемент</div>');
  9.});
10.</script>

        

Для того чтобы для вновь созданного элемента запускался обработчик события необходимо использовать либо delegate, о котором мало кто знает, либо live, при чём где не посмотришь советы, то все именно второе советуют, хотя не читают руководство, в котором ясно сказано, что метод delegate ограничивает поиск элемента на котором должно сработать событие определнным корневым элементом, следовательно, если на странице огромное количество элементов, то использование live может существенно замедлить поиск и манипуляцию с элементами. По-мимо этого, с delegate допускается ограничивать всплытие событий, что не допускается с live. В общем следующий пример демонстрирует работу метода delegate.

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(function(){
  3. $("body").delegate('#newel', 'click', function(){
  4. $(this).text('Старый элемент!');
  5. });
  6.
  7. $("body").append('<div id="newel">Новый элемент</div>');
  8.});
  9.</script>
10.

        

1.3. Продолжаем jQuery для начинающих - авторизация на jQuery и php.

Далее будет разобран способ авторизации на jQuery с перенаправлением на определенную страницу после успешной авторизации пользователя. Допустим что у нас есть следующий html, текстовые поля, в которые пользователь вводит пароль и имя:

  • Код
  • Чистый код
  1.<form action="test.php" method="post" name="form">
  2.Имя: <input id="name" type="text" value="" />
  3.Пароль: <input id="pass" type="password" value="" />
  4.</form>
  5.<button id="buttest">Войти</button>

        

Код на jQuery должен обработать данную форму, получив значение поля с помощью метода val(), затем передать его на страницу аутентификации, делается это примерно следующим образом:

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(function(){
  3.$('#buttest').click(function(){
  4.
  5. var p = $('#pass').val();
  6. var n = $('#name').val();
  7.
  8. $.ajax({
  9. type: "POST",
10. url: "test.php",
11. data: {name:n,pass:p},
12. success: function() { location.href = "index.html"; }
13.
14. });
15.
16.});
17.
18.
19.});
20.</script>

        

На php мы должны сравнить полученные данные с существующими в базе, делается это примерно так:

  • Код
  • Чистый код
  1.$connection = mysql_connect ("localhost", "$user", "$pass")
  2.or die ("Оишбка присоединения");
  3.$db = mysql_select_db ("$dbname", $connection)
  4.or die ("Оишбка выбора бызы");
  5.
  6.if (isset($_SERVER['PHP_AUTH_USER']) && isset($_SERVER['PHP_AUTH_PW']))
  7.{
  8. $login=md5($_SERVER['PHP_AUTH_USER']);
  9. $pass=md5($_SERVER['PHP_AUTH_PW']);
10.} else {
11. $login = md5($_POST['name']);
12. $pass = md5($_POST['pass']);
13.}
14.
15.
16.$sql = "SELECT * FROM pass WHERE login = '$login' AND BINARY pass = '$pass' LIMIT 1";
17.
18.$result = mysql_query($sql);
19.$query = mysql_num_rows($result);
20.

        

Обязательно храните пароли зашифрованные, здесь используется алгоритм md5, но существуют алгоритмы и сложнее, например с ключами. Логика проста, если пользователь ввёл в форму имя и пароль, то сравниваются данные полученные из формы, если же пользователь ввёл неверные данные или вовсе не ввёл их, то появится окно авторизации, в которое ему будет предложено ввести пароль и имя, но значения которых будут содержаться в глобальных массивах $_SERVER['PHP_AUTH_USER']) и $_SERVER['PHP_AUTH_PW'], которые будут сравниваться с данными содержащимися в базе.

Обратите внимание на следующую строчку кода, здесь вы проверяете, есть ли совпадение с данными из базы, если есть то строка должна вернуть 1, иначе пользователю снова будет предложено ввести пароль и имя, - код находится в следующем за этим примером примере:

  • Код
  • Чистый код
  1.$query = mysql_num_rows($result);
  2.

        

Весь php код:

  • Код
  • Чистый код
  1.<?php
  2.
  3.$connection = mysql_connect ("localhost", "$user", "$pass")
  4.or die ("Оишбка присоединения");
  5.$db = mysql_select_db ("$dbname", $connection)
  6.or die ("Оишбка выбора бызы");
  7.
  8.if (isset($_SERVER['PHP_AUTH_USER']) && isset($_SERVER['PHP_AUTH_PW']))
  9.{
10. $login=md5($_SERVER['PHP_AUTH_USER']);
11. $pass=md5($_SERVER['PHP_AUTH_PW']);
12.} else {
13. $login = md5($_POST['name']);
14. $pass = md5($_POST['pass']);
15.}
16.
17.
18.$sql = "SELECT * FROM pass WHERE login = '$login' AND BINARY pass = '$pass' LIMIT 1";
19.
20.$result = mysql_query($sql);
21.$query = mysql_num_rows($result);
22.
23.
24.
25.if ($query!== 1)
26.{
27. header ("WWW-Authenticate: Basic realm=\"secret area\"");
28. header ("HTTP/1.0 401 Unauthorized");
29. echo "Authorization Required.";
30. exit;
31.}
32.else
33.{
34.echo "Authorization not required!";
35.}
36.?>

        

1.4. Почему не работает ajax запрос на локальной машине в IE.

Иногда по непонятным причинам, на локальной машине jQuery ajax отказывается работать в IE любой версии. Происходит это, как правило, из-за неверного заголовка отсылаемого сервером на ajax запрос. Допустим, Вы имеете следующий jQuery, которой возвращает только ошибку (error):

  • Код
  • Чистый код
  1.$.ajax({
  2. url:"{{SITE_URL}}/content/twitter.json",
  3. dataType:"json",
  4. error:function(xhr, status, errorThrown) {
  5. alert(errorThrown+'\n'+status+'\n'+xhr.statusText);
  6. },
  7. success:function(json) {
  8. ...код...
  9. }
10.});
11.

        

Устраняться ошибка должна добавлением заголовка в php:

  • Код
  • Чистый код
  1.header('Content-Type: application/json; charset=utf-8;');
  2.


        

Если заголовок не помог, укажите запрет кэширования json данных:

  • Код
  • Чистый код
  1.var d = new Date()
  2. $.ajax({
  3. url:"{{SITE_URL}}/content/twitter.json?_="+d.getTime(),
  4....код...
  5.
  6.

        

1.5. Как отключить анимационные эффекты - методы jQuery.fx.off, jQuery.fx.on.

Чтобы одновременно отключить всю анимацию используйте методы jQuery.fx.off, jQuery.fx.on.

  • Код
  • Чистый код
  1. <p><input type="button" value="Запуск анимации"/> <button>Toggle fx</button></p>
  2.<div></div>
  3.<script>
  4.var toggleFx = function() {
  5. $.fx.off = !$.fx.off;
  6.};
  7.Вкл/выкл анимацию();
  8.
  9.$("button").click(toggleFx)
10.
11.$("input").click(function(){
12. $("div").toggle("slow");
13.});
14. </script>
15.
16.

        

Если вы отключите всё анимацию, то следующимй пример с google каруселью так же не будет работать, поэтому не забудьте обратно включить анимацию, после своих экспириментов.

1.6. Используем задержку между анимационными эффектами - метод delay.

Метод deley позволяет создавать задержку между методами анимации, например, ниже устанвлена задержка на 2 секунды.

  • Код
  • Чистый код
  1.<p><button>Run</button></p>
  2.<div class="first"></div>
  3.<div class="second"></div>
  4.
  5.<script>
  6. $("button").click(function() {
  7. $("div.first").slideUp(300).delay(2000).fadeIn(400);
  8. $("div.second").slideUp(300).fadeIn(400);
  9. });
10.</script>
11.

        

Элемент DIV, окрашенный в заленный цвет, будет анимирован с задержкой в 2 секунды, если вы отключили анимацию на текущей странице, вы не увидите эффект, поэтому включите её обратно!

1.7. Обход массива или объекта с помощью метода $.each.

Начинающие пользователи не понимают разницы между $.each() как методом для обхода массива или объекта и each как методом для работы с каждым объектом jQuery. Первый используется для работы с данными:

  • Код
  • Чистый код
  1.$.each([Петя, Вася], function(index, value) {
  2. alert(index + ': ' + value);
  3.});
  4.
  5.var map = {
  6. 'flammable': 'inflammable',
  7. 'duh': 'no duh'
  8.};
  9.$.each(map, function(key, value) {
10. alert(key + ': ' + value);
11.});
12.

        

Второй используется для работы с элементами DOM:

  • Код
  • Чистый код
  1.$('p').each(function(index) {
  2. alert(index + ': ' + $(this).text());
  3. });
  4.

        

1.8. jQuery анимированая смена класса, возможно?

Очень часто в повседневной деятельности веб-программиста приходится использовать анимацию классов для перехода сущетсвующих css свойств в другие css свойства. Ранее я использовал для этого весь набор методов css - css(name), css(name,value), css(properties), сейчас я использую плагин jQuery - addClass. Для его использования, необходимо подключать по-мимо библиотеки jquery ещё один дополнительный файл, - effects.core.js, скачать вы можете его в архиве на данном сайте - "Все файлы jQuery".

Мужчина не имеет права жениться, не изучив предварительно анатомии и не сделав вскрытия хотя бы одной женщины. Оноре де Бальзак.

Что нам нужно для переключения классов? Подключите jquery.effects.core.js и используйте метод switchClass(). Метод switchClass() в качестве первого параметрра принимает класс с которого происходит переключение, во втором параметре - класс на который происходит перключение, третий параметр - скорость анимации.

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(document).ready(function(){
  3.
  4. $("#button").click(function() {
  5. $('.newClass').switchClass( "newClass", 'oldClass', 1000);
  6. $('.oldClass').switchClass( "oldClass", 'newClass', 1000);
  7. return false;
  8. });
  9.
10.});
11.</script>
12.

        

1.9. jQuery 1.5 и множественные обработчики!

С внедрением объекта deferred появилась возможность создавать очерди функций обьработчиков, например относительно jQuery ajax, очередь обработчиков может быть использована следующим образом, когда обработчик complate будет запущен три раза при чём в той очередности, в какой они установлены на странице:

  • Код
  • Чистый код
  1.// привязываем обработчики к моменту завершения ajax запроса,
  2.// передавая при этом jqxhr объект, созданный из запроса
  3.var jqxhr = $.ajax({ url: "example.php" })
  4. .success(function() { alert("success"); })
  5. .error(function() { alert("error"); })
  6. .complete(function() { alert("complete"); });
  7. .complete(function() { alert("second complete"); });
  8.
  9.// ваш код
10.
11.// устанавливаем дополнительную функцию обратного вызова
12.jqxhr.complete(function(){ alert("third complete"); });
13.

        

2. jQuery опытным пользователям!

2.1. Для начинающих - Карусель от Google!

Давайте что-нибудь сопрём с google, например на google ответах есть карусель простая, но как мне кажется, очень интересная, посмотрите живой пример:

Загрузить архивом

Давайте научимся делать лучше, чем у google, карусель на google зависима от id картинок и ссылок, я же расскажу, как сделать такую же карусель, но без привязки к параметрам id. Почему без привязки, потому что вам не надо будет в jQuery создавать проверку для идентификаторов.

Начать надо, конечно же, с html структуры, теоретически у нас будет два столбца таблицы, в первом (левый столбец) будут помещены изображения, во второй (правый столбец) ссылки:

  • Код
  • Чистый код
  1.<table>
  2.
  3. <tr>
  4. <td>
  5.
  6.
  7. <div style="overflow:hidden;height:110px;border:1px solid #cadceb;" class="wfmpcCSS">
  8.
  9. <div style="position:relative;top:0px;" id="wfmpc">
10. <img src ="data.jpeg" class="wfmpiCSS">
11. <img src="data1.jpeg" class="wfmpiCSS">
12. <img src="data2.jpeg" class="wfmpiCSS">
13. <img src="data3.jpeg" class="wfmpiCSS">
14. <img src="data1.jpeg" class="wfmpiCSS">
15. </div>
16.
17. </div>
18.
19.
20. </td>
21.
22. <td width="100%" valign="middle" id="link">
23.
24. <div class="conteiner" id="wfmtr_0" style="background:url(focus_module_indicator.gif) no-repeat;">
25. <a id="hover" href="" title="">Ссылка 1</a>
26. </div>
27.
28. <div class="conteiner" id="wfmtr_1">
29. <a id="hover" href="" title="">Ссылка 2</a>
30. </div>
31.
32. <div class="conteiner" id="wfmtr_2">
33. <a id="hover" href="" title="">Ссылка 3</a>
34. </div>
35.
36. <div class="conteiner" id="wfmtr_3">
37. <a id="hover" href="" title="">Ссылка 4</a>
38. </div>
39.
40. </td>
41.
42. </tr>
43.</table>

        

CSS простой, внутренние отступы необходим чтобы фоновое изображение - стрелка не наезжала на текст. Стиль для wfmpiCSS нужен только для IE 6 -7, поскольку там между изображениями образуется пространство.

  • Код
  • Чистый код
  1.<style type="text/css">
  2..conteiner{
  3.padding:0 0 0 20px;
  4.}
  5..wfmpiCSS{
  6.vertical-align: bottom;
  7.border:none;
  8.margin: 0;
  9.outline: 0 none;
10.padding: 0;
11.height: 120px;
12.}
13.</style>

        

jQuery будет сложен и Вам придётся напрячь мозг:

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(function(){
  3.
  4.var h = $('.wfmpiCSS').height();
  5.var l = $('#wfmpc img').length - 1;
  6.
  7. $(".conteiner").mouseover(function(){
  8. $(".conteiner").css({'background':''});
  9. $(this).css({'background':'url(focus_module_indicator.gif) no-repeat'});
10.
11. var cl = $(this).index('#link .conteiner');
12. var id = $(this).attr('id');
13. var top = (h * cl);
14.
15. $("#wfmpc").stop().animate({'top':'-'+top},500);
16. });
17.
18.});
19.</script>

        

Во 2 строке, для тех кто мало знаком с jQuery, мы обозначаем, что js код будет работать с элементами на странице только после загрузки 99% структуры DOM, если вы уберёте втору строчку то скрипт не будет работать, так как он расположен выше элементов, которыми он будет манипулировать, а так как ещё не чем манипулировать, - элементы не загружены в DOM, - jQuery будет с ошибкой?

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(function(){
  3.

        

После того как элементы загружены, мы получаем высоту первого изображения, при этом высота должна быть одинаковой для всех изображения, количество изображений мы помещаем в переменные h и l.

  • Код
  • Чистый код
  1.var h = $('.wfmpiCSS').height();
  2.var l = $('#wfmpc img').length - 1;
  3.

        

В седьмой строке мы создаём обработчик события mouseover, - при наведении курсора, запускающий функцию смены изображений.

  • Код
  • Чистый код
  1. $(".conteiner").mouseover(function(){
  2.

        

Но прежде чем рассмотреть основную функцию, мы должны написать две строчки на jQuery, в которых меняем каждый раз фоновое изображение, - стрелочку - указатель.

  • Код
  • Чистый код
  1. $(".conteiner").css({'background':''});
  2. $(this).css({'background':'url(focus_module_indicator.gif) no-repeat'});

        

Далее сама функция смены изображений, для правильно применения метода animate необходимы переменные cl (количество ссылок в контейнере с id link) и top в которую мы сохраняем смещение, умножая порядковый номер изображения на размер изображения, после этого мы используем метод animate для плавного передвижная нашего блока относительно своего положения (postition:relative;).

  • Код
  • Чистый код
  1. var cl = $(this).index('#link .conteiner');
  2. var id = $(this).attr('id');
  3. var top = (h * cl);
  4.
  5. $("#wfmpc").stop().animate({'top':'-'+top},500);
  6.

        

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

2.2. Привлеки внимание!

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

  • Код
  • Чистый код
  1.// подсветка элеменетов с attention
  2. slytop = []
  3. slytop_loaded = []
  4. jQuery(".attention").each(function(i,e){
  5. slytop = $.merge(slytop,[$(this).offset().top]);
  6. slytop_loaded = $.merge(slytop_loaded,false);
  7. $(this).attr('name', $(this).offset().top);
  8.
  9.
10. if(!slytop_loaded[i]){
11.
12. function checkone(){
13. if ( !slytop_loaded[i] && jQuery(window).scrollTop() + jQuery(window).height() > slytop[i] ) {
14. jQuery(".attention[name*='"+slytop[i]+"']").animate({'background-color':'#00ff7f'},500).animate({'background-color':'#fff'},2000);
15. slytop_loaded[i] = true;
16. }
17. }
18.
19. jQuery(window).scroll(checkone);
20.
21.
22. }
23.
24.});
25.
26.

        

Ниже три блока, представленные как примеры, будут менять цвет, при прокрутке нижней границы окна браузера до каждого из них и медленно затухать.

Пиво делает человека глупым и ленивым, а вино — веселым и дурным.

Неизвестный автор
Чтобы управлять государством, нужно поменьше говорить и побольше слушать.

Арман де Ришелье
Зло тихо летать не может.

Петр I

3. jQuery Профессионалам!

3.1. jQuery профессионалам - объект $.deferred!

В статье "Что нового в jQuery 1.5" я начинал рассказывать об объекте jQuery Deffered, здесь я укажу пример, в котором объекты данных, возвращаемых разными ajax запросами, будут обработаны одной функцией done, введенной так же в jQuery 1.5 в момент, когда оба ajax запроса будут завершены. Переменные jqXHR1, jqXHR2, jqXHR3 будут содержать текст ответа.

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(document).ready(function() {
  3.
  4.$.when($.ajax("test.php",{}), $.ajax("test1.php",{})).done(function(a1, a2){
  5.
  6. var jqXHR1 = a1[2].responseText; /* [ "success", statusText, jqXHR ] */
  7. var jqXHR2 = a1[0]; /* [ "success", statusText, jqXHR ] */
  8. var jqXHR3 = a2[0]; /* [ "success", statusText, jqXHR ] */
  9.
10. alert(jqXHR1);
11. alert(jqXHR2);
12. alert(jqXHR3);
13.
14.});
15.
16.});
17.</script>
18.

        

3.2. Обход массива json из php!

Допустим, у нас есть стандартный запрос к базе заказов электронного магазина, не забудьте передать правильные заголовки ответа, особенно application/json:

  • Код
  • Чистый код
  1.<?php
  2.require_once('config.php');
  3.// основной класс функций
  4.class myClass
  5.{
  6. private $mMysqli;
  7.
  8. function __construct()
  9. {
10. $this->mMysqli = new mysqli(DB_HOST,DB_USER,DB_PASSWORD,DB_DATABASE);
11. }
12. public function __destruct()
13. {
14. $this->mMysqli->close();
15. }
16.
17. function zakaz()
18. {
19. $infoaboutzakaz = array();
20. $infoabouttovar = array();
21. $infoabt = array();
22. $this->mMysqli->query("SET NAMES 'utf8'");
23. $this->mMysqli->query("SET CHARACTER SET 'utf8'");
24. $query = 'SELECT SUM(cena * kolvo) as cena, GROUP_CONCAT(date) as date, GROUP_CONCAT(tovar) as tovar, opisanie,ye FROM zakaz';
25. $result = $this->mMysqli->query($query);
26.
27. while ($row = $result->fetch_array(MYSQLI_ASSOC))
28. {
29. $infoabouttovar[] = $row['date'];
30. $infoabt[] = $row['tovar'];
31. }
32.
33. $infoaboutzakaz['allt'] = implode(',',$infoabouttovar);
34. $infoaboutzakaz['alltovar'] = implode(',',$infoabt);
35. echo json_encode($infoaboutzakaz);
36. }
37.
38.}
39.
40.header('Expires: Mon, 26 Jul 1997 05:00:00 GMT' );
41.header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT');
42.header('Cache-Control: no-cache, must-revalidate');
43.header('Pragma: no-cache');
44.header('Content-Type: application/json; charset=utf-8;');
45.
46.$newzakaz = new myClass();
47.echo $newzakaz -> zakaz();
48.
49.?>
50.

        

Исходя из примера на php обход массива, полученного от сервера, на jQuery должен осуществляться с использованием функции $.each, предварительно разбив строку значения json объекта на массив методом javascript split.

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(function(){
  3.
  4. $.ajax({
  5. url: "test2.php",
  6. type: "GET",
  7. success: function(data){
  8. var z = new Array();
  9. var z = data.alltovar.split(",");
10.
11. $(z).each(function(i){
12.
13. alert(this)
14. });
15. },
16. dataType:"json"
17.
18. });
19.
20.});
21.</script>
22.

        

В заключение

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


Александр Ермаков