Суббота, 23.09.2017, 14:00
RR - StUdIo___Добро Пожаловать Шамкир Гес___StUdIo...RR
Гипер-Софт
Главная Регистрация Вход
Приветствую Вас, гости · RSS
SamirMM Studio"RR" WWW.GES.MOY.SU
  
  Ключи и пин-коды
FIFA, Steam: случайные, Counter-Strike, Playstation Network, Hearthstone: Heroes of Warcraft, World of Warcraft, Xbox LIVE (Microsoft Points), Prepaid Credit Card, Far Cry, Assassin´s Creed, Diablo 3, Middle-earth: Shadow of Mordor, ...
  Электронные книги
Контрольные работы, Музыка, ноты, тексты песен, В помощь студенту, Фэнтази, Физика, История, Государство и право, Математика, Магия, оккультизм, мистика, Творческие личности, Рукоделие, Экономика, ...
  Цифровые товары
Игровые аккаунты, Аккаунты PSN, Аккаунты Xbox, iTunes & App Store, Telonko.ru, Приглашения /инвайты, Разное, Skype-аккаунты, Видео и аудиокурсы, уроки, Google Play, Анонимные прокси, Базы данных, ...
  Программное обеспечение
Разблокировка телефонов, Антивирусы, Принтеры, Программы > MMORPG, Программы для сотовых телефонов, Шифрование, Windows, Спортивные, SEO скрипты, Советники, Стратегии, Mногофункциональные утилиты, ...
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Модератор форума: ges 
форум для всех » Все для web мастера » Скрипты » Доступ к элементам с помощью JQuery (JQuery работает с объектной моделью документа (DOM))
Доступ к элементам с помощью JQuery
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>


Ну, это очень упрощенный вариант smile
На самом деле, этих параметров хватит для большинства простых задач, а в следующей статье будут рассмотрены остальные параметры..


JQuery cheat sheet

Представляю вашему вниманию таблицу с подсказками по JQuery, позволяющую легко ориентироваться во множестве методов и свойств JQuery



Вот мы и познакомились с JQuery, хотя здесь рассмотрены далеко не всё, а только основные его свойства и методы. Кроме того, мы рассмотрели примеры работы с JQuery — а это залог успеха в изучении. Однако, мы не рассмотрели работу с данными и кое-что ещё. Это сделано умышленно, дабы не нагружать уважаемого читателя сразу кучей информации. Более подробно о JQuery с примерами, а также с нерассмотренными в этой статье темами, написано в следующей статье

[/gray]
Прикрепления: 2398132.png(144Kb)


Прежде чем задать вопрос Администратору подумайте вопрос о чем?
Администраторы вопросах не отвечает только создает тему!
Вопросы долько в том случай о том вопрос будет про
Студии "RR"
 
форум для всех » Все для web мастера » Скрипты » Доступ к элементам с помощью JQuery (JQuery работает с объектной моделью документа (DOM))
Страница 1 из 11
Поиск:

© GES.MOY.SU 2007-2017 . Администрация не несёт ответственности за содержащие файлы на портале.   
Все материалы на сайте принадлежат исключительно их владельцам! 
Сайт оптимизирован для просмотра с разрешением более 1024x768, браузером FireFox или Opera.
 Разрешение вашего экрана : Ваш браузер: -
<< Сайт зарегистрирован в домене >>