JQuery

22 мая, 2013 web2step

Селекторы jQuery.

// выбор элемента страницы по ее id, например

$(‘#objectID’);

// выбор элемента по классу оформления, например

$(‘.className’);

// выбор элемента по его названию, например p, div, input и т.д.
$(‘p’);

// выбор дочерних элементов, в примере приведена выборка тегов p, которые находятся в блоке div
$(‘div p’);

//выбор следующего элемента div после элемента страницы с id равным elementID
$(‘#elementID + div’);

// выбор всех дочерних элементов p в блоке div
$(‘div > p’);

// выбор всех картинок с шириной равной 100, таким образом можно отбирать любые элементы страницы с любыми свойствами
$(‘img[width = 100]’);

// выбор всех картинок у которых свойство width начинается с 1
$(‘img[width ^= 1]’);

// выбор всех картинок у которых свойство src заканчивается на .png
$(‘img[src $= .png]’);

// выбор всех картинок у которых в свойстве src встречается строка png
$(‘img[src *= png]’);

// выбор всех четных элементов p в блоке с идентификатором #divName, нумерация в массиве как обычно с 0, причем 0 считается четным числом
$(‘#divName p:even’);

// выбор всех нечетных элементов p в блоке с идентификатором #divName, нумерация в массиве как обычно с 0, причем 0 считается четным числом
$(‘#divName p:odd’);

// выбор всех картинок на странице кроме тех, которые находятся в блоке с id равным divImg
$(‘img:not(#divImg img)’);

// выбор всех элементов div, которые содержат в себе элементы P (параграфы)
$(‘div:has(p)’);

// выбор всех элементов p, которые содержат в себе текст «привет»
$(‘p:contains(привет)’);

// выбор первого параграфа в блоке с id равным divName
$(‘#divName p:first’);

// выбор последнего параграфа в блоке с id равным divName
$(‘#divName p:last’);

// выбор всех скрытых параграфов на странице
$(‘p:hidden’);

// выбор всех показанных параграфов на странице
$(‘p:visibility’);

Часто используемые события jQuery:

  • click — событие одиночного клика левой кнопкой мыши;
  • dblclick — событие двойного нажатия левой кнопкой мыши;
  • mouseover — событие наведения указателя мыши на объекты страницы;
  • mouseout — событие убирание указателя мыши с объекта страницы;
  • mousemove — событие передвижения мыши;
  • mousedown — событие при котором пользователь нажал на левую кнопку мыши и пока еще не отпустил;
  • mouseup — событие отпускания кнопки мыши, т.е. продолжение события mousedown;
  • submit — событие отправки формы;
  • focus — событие установки фокуса на элементе (нажатие на него или выделение TAB’ом);
  • blur — событие снятие фокуса (фокус получает какой-нибудь другой элемент страницы);
  • change — событие изменения объекта (выбор элемента списка, ввод символов  в текстовое поле и т.д.);
  • reset — сброс формы;
  • keypress — нажатие кнопки на клавиатуре;
  • keydown — мы нажали кнопку, но еще не отпустили;
  • keyup — событие «отпускания» ранее нажатой ранее клавиши;
  • resize — событие изменение ширины окна браузера;
  • scroll — событие прокрутки окна браузера;
  • load — событие полной загрузки документа;
  • unload — событие перехода выхода со страницы (например переход на другую или закрытие браузера), нужно отметить что это событие работает не во всех браузерах.
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Пример работы с JQUERY</title>
 <script type="text/javascript" src="jquery.js"></script> <!--Подключаем библиотеку JQUERY-->
 <script type="text/javascript">
 $(document).ready( function() {
    // привязываем событие клика к элементу страницы с id равным displayText
    $('#displayText').click( function () {
       //выводим значение элемента с id равным myString на экран с помощью функции alert
       alert($('#myString').val());
    });
    // привязываем событие двойного клика к элементу input с параметром value начинающимся со слова "Очистить", который находится в блоке div
    $('div input[value^=Очистить]').dblclick( function () {
       // выбираем первый элемент input в блоке с id равным testForm и очищаем его значение
       $('#testForm input:first').val('');
    });
    // привязываем событие клика к объекту input который находится в блоке div, а это div тоже должен находится в блоке div
    $('div div input').toggle( function () {
       // выбираем элемент input у которого свойство type равно text и скрываем его за 2 секунды
       $('input[type = text]').fadeOut(2000);
       // изменяем надписать на кнопке с id равным hideTextBox на "Показать поле"
       $('#hideTextBox').val('Показать поле');
    }, function () {
       // выбираем элемент input у которого свойство type равно text и показываем его за 3 секунды
       $('input[type = text]').fadeIn(3000);
       // изменяем надписать на кнопке с id равным hideTextBox на "Спрятать поле"
       $('#hideTextBox').val('Спрятать поле');
    });
    // привязываем событие наведения мыши к объекту с id равным myString, т.е. к текстовому полю
    $('#myString').mouseover( function () {
       // изменяем текст элемента p на "Вы НАВЕЛИ мышку на текстовое поле!"
       $('p').text('Вы НАВЕЛИ мышку на текстовое поле!');
    });
    // привязываем событие отведения мыши к объекту с id равным myString, т.е. к текстовому полю
    $('#myString').mouseout( function () {
       // изменяем текст элемента p на "Вы УБРАЛИ мышку с текстового поля!"
       $('p').text('Вы УБРАЛИ мышку с текстового поля!');
    });
    // привязываем событие изменение состояния к элементу select
    $('select').change( function () {
       // получаем значение выбранного элемента select (на этот раз через его id = borderDiv, а не через селетор select для примера)
       var borderDivValue = $('#borderDiv :selected').val();
       // если пользователь выбрал значение "Нарисовать красную рамку", т.е. value = "red"
       if (borderDivValue == 'red')
       {
          // указываем напрямую css свойства border-color и border-width для элемента с id = testForm
          $('#testForm').css({
             'border-color':'red',
             'border-width':'2px'
          });
      }
       // иначе (можно было написать else if (borderDivValue == 'green')), т.е. value = "green"
       else
       {
          // указываем напрямую css свойства border-color и border-width для элемента с id = testForm
          $('#testForm').css({
             'border-color':'green',
             'border-width':'5px'
          });
       }
       /*При указании css свой есть небольшая деталь: если вы указываете свойства каких-нибудь
       элементов через JQUERY, то вы обязательно должны указывать полные значения свойств, т.е.
       запись "border: green 5px" работать не будет, а запись 'border-color':'green', 'border-width':'5px' будет работать корректно.*/
    });
 });
 </script>
</head>
<body>
<!------------ Создаем блок div с id = testForm, красной рамков и выравниваем по центру----------->
<div id="testForm" style="border: 2px solid red; margin: 0 auto; width: 500px; text-align: center;">
 <input id="myString" type="text" style="width: 500px;" placeholder="Введите сюда любую строку" /><br />
 <input id="displayText" type="submit" value="Вывести значение поля на экран" /><br />
 <input id="clearTextBox" type="submit" value="Очистить поле от всех значений (двойной клик)" /><br />
 <div><input id="hideTextBox" type="submit" value="Спрятать поле" /></div>
 <select id="borderDiv">
 <option value = "red">Нарисовать красную рамку</option>
 <option value = "green">Нарисовать зеленую рамку</option>
 </select>
 <!-------------Текстовый блок для вывода сообщений----------------->
 <p id="statusTextBox"></p>
</div>
</body>
</html>

 

Опубликовано в рубрике Веб-программирование
«
»
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий

Яндекс.Метрика