ges | Дата: Вторник, 11.12.2012, 16:20 | Сообщение # 1 |
 Administrator
Группа: Администраторы
Сообщений: 297
Статус: Offline
| [gray][red] Доступ к элементам с помощью JQuery JQuery работает с объектной моделью документа (DOM)[/red]
- Вызов Елементов
- $('tag') — доступ к тегу tag: $('span') получит все теги
- $('#id') — доступ к элементу по идентификатору id: $('#my') получит элемент с id='my'
- $('.class') — доступ к элементу по имени класса: $('.portret') получит все элементы с class='portret'
- $('*') — доступ ко всем элементам. Получит все элементы документа
Это основные способы доступа к элементам в JQuery. Их, также, можно комбинировать, тогда получается интересный результат
- Варианты
- $('img.portret') получит все
- $('img .portret') получит все элементы с классом portret, которые находятся внутри
(обратите внимание на пробел перед точкой) - $('img, .portret') получит все элементы
, а также все элементы с классом portret (обратите внимание на запятую) - $('img#myPortret') получит элемент
В JQuery есть возможность выбора определенных элементов из DOM (объектной модели документа). Например, если вам нужен только первый элемент с классом portret или только чётные пункты списка , то JQuery придёт вам на помощь:
- Варианты
- $('element:first') — первый элемент: $('.portret:first')
- $('element:last') — последний элемент: $('img:last')
- $('element:even') — чётный элемент
- $('element:odd') — нечётный элемент
- А ещё JQuery хорошо работает с атрибутами тегов:
$('input[type=button]') — получит все теги Code <input type="button" />
Это далеко не полный список селекторов, доступных в JQuery, которые вы можете применить. В конце этой статьи приведена так называемая JQuery cheat sheet (таблица с подсказками по JQuery)
Обработка событий в JQuery
Получать доступ к элементам в JQuery мы научились. Но что же делать с ними дальше? Теперь мы можем повесить на элемент какой-либо обработчик события. В обычном JavaScript мы это делали так: document.getElementById('id').click = function1;. В JQuery же это можно сделать несколько проще:
Code $('#id').click(function(){ //тут код обработки щелчка по id });
Анонимные функции — хорошая вещь — то, чего лично мне не хватает в PHP.
Теперь, когда речь зашла о событиях, можно смело показать какой-нибудь живой пример. Дело в том, что весь JQuery-код пишется, как обработка события ready документа, т.е., простым языком, когда «документ готов», то мы можем делать что-либо (что вполне логично). Итак, первый самый простой пример:
Code <img src="/i/myphoto.jpg" id="myfoto" /> <script type="text/javascript"> $(document).ready(function(){ $('#myfoto').click(function(){ alert('This is my photo!'); }); }); </script>
- Основные события в JQuery:
- mousedown — нажата кнопка мыши
- mouseup — отпущена кнопка мыши
- mouseover — курсор поместился над элементом
- mouseout — курсор ушёл с элемента
- mousemove — курсор переместился по элементу
- keypress — нажата клавиша
- submit — отправлены данные (применимо к форме и её элементам)
- focus — получен фокус
- change — изменено (применимо к полям вода, переключателям и др.)
- click — клик
Попробуем изменить предыдущий пример так, .......чтобы теперь сообщение всплывало не при щелчке на картинке, а при наведении курсора на неё: Code <img src="/i/myphoto.jpg" id="myfoto" /> <script type="text/javascript"> $(document).ready(function(){ $('#myfoto').mouseover(function(){ alert('This is my photo!'); }); }); </script>
Эффекты на JQuery
Нынче на сайтах очень популярны всякие «живые» штучки. Например, выезжающее меню, или схлопывающиеся элементы. Реализовывать такое в JQuery — одно удовольствие
- Итак, для начала приведу список JQuery-методов, с помощью которых можно «оживить» сайт:
- show — показать элемент. В зависимости от параметров, либо просто пропиывает элементу display: block; без анимации, либо медленно сворачивает элемент
- hide — скрыть элемент. Аналогично предыдущему
- toggle — показать-скрыть. Если скрыт в данный момент — показывает, и наоборот
- slideDown — свёртывание
- slideUp — развёртывание
- slideToggle — свёртывание/развёртывание, в зависимости от текущего состояния
- fadeIn — появление
- fadeOut — затухание
- fadeTo — появление-затухание до нужной прозрачности
Первым параметром (необязательным) к каждому из этих методов идет скорость в миллисекундах. ....А к методу fadeTo вторым параметром идет прозрачность, до которой необходимо затухнуть
---------------------------------------------------------
Управление атрибутами с помощью JQuery
Ещё одна полезная возможность JQuery — управление атрибутами. Например, вы можете какому-либо элементу задать, удалить, получить класс, или вообще любой атрибут. Ширину и высоту, значение элемента (в случае с полями, например), html код — всё это можно получить с помощью JQuery. И сейчас я покажу как.
- Варианты
- .attr(имя_атрибута) — возвращает значение атрибута
- .attr(имя_атрибута, значение_атрибута) — устанавливает новое значение атрибута
- .removeAttr(имя_атрибута) — удаляет атрибут
- .addClass(имя_класса) — добавляет класс
- .removeClass(имя_класса) — удаляет
- .html() — возвращает HTML-код
- .html(код) — устанавливает HTML-код
- .val() — возвращает значение элемента
- .val(значение) — устанавливает значение элемента
Code $(document).ready(function(){ $('#getter').click(function(){ var value1 = $('input#field').val(); alert(value1); });
$('a#swap').click(function(){ value1 = $('input#field').val(); $('input#f2').val(value1); $('input#field').attr('disabled', 'disabled'); }); });
JQuery AJAX
Кроме всего вышеописанного, с помощью JQuery можно очень легко и удобно использовать такую технологию как ajax. Для этой цели служит метод $.ajax(settings), где settings — это настройки (пары "ключ: значение")
Лучше всего рассмотреть на примере (пример из этого блога — отправка комментария с помощью ajax [в упрощенном виде])
Code <form id="comment"> <input type="hidden" id="contentid" value="номер статьи (вставляется с помощью PHP)" /> <input type="text" name="nick"> <textarea name="comment"></textarea> <button id="sendcomment">Отправить</button> </form>
<script type="text/javascript"> $(document).ready(function(){ $('#sendcomment').click(function(){ $.ajax({ url: '/some-url/content_id='+$('#contentid').val(), //Указываем, какой УРЛ запрашивать type: 'POST', //Указываем метод: GET или POST data: 'nick='+$('input[name=nick]').val()+'&comment='+$('textarea[name=comment]').val(), //Указываем данные, отправляемые POSTом success: function(data){ //Функция, которая будет выполняться при успехе alert('Ваш комментарий отправлен!'); }, error: function(){ //функция, которая будет выполняться при неудаче alert('Ошибка! Попробуйте ещё раз!'); } }); }); }); </script>
Ну, это очень упрощенный вариант На самом деле, этих параметров хватит для большинства простых задач, а в следующей статье будут рассмотрены остальные параметры..
JQuery cheat sheet
Представляю вашему вниманию таблицу с подсказками по JQuery, позволяющую легко ориентироваться во множестве методов и свойств JQuery
Вот мы и познакомились с JQuery, хотя здесь рассмотрены далеко не всё, а только основные его свойства и методы. Кроме того, мы рассмотрели примеры работы с JQuery — а это залог успеха в изучении. Однако, мы не рассмотрели работу с данными и кое-что ещё. Это сделано умышленно, дабы не нагружать уважаемого читателя сразу кучей информации. Более подробно о JQuery с примерами, а также с нерассмотренными в этой статье темами, написано в следующей статье
[/gray]
Прежде чем задать вопрос Администратору подумайте вопрос о чем? Администраторы вопросах не отвечает только создает тему! Вопросы долько в том случай о том вопрос будет про Студии "RR"
|
|
| |