jQuery

jQuery ч.4: Обработка событий

сентября 23, 2011  |  Published in JavaScript, jQuery

jqueryВ этой статье мы разберемся с обработкой событий в jQuery.

Чтобы присоединить обработчик к событию необходимоо использовать функцию bind():

$(function(){
  $('a.link-style').bind('click', function(){
    alert("Welcome to RubyDev.ru!")
  });
});

В примере выше функция bind() связывает с событием click (одиночный клик) с анонимной функцией, которая вызывает фнутри себя функцию alert(). Функция с которой связано событие называется обработчиком события.
Read the rest of this entry »

Tags: ,

jQuery ч.3: Взаимодействие со стилями и свойствами

сентября 7, 2011  |  Published in ClientSide, JavaScript, jQuery

jqueryВ прошлой статье — главе мы познакомились с селекторами, а в этой мы научимся работать с атрибутами тегов: определять, переопределять, отменять их и т.д.

Проверяем имеют ли элементы определенный класс:

$('p:first').hasClass('super'); // проверяем имеет ли первый параграф класс super.

Добавляем класс определенному элементу (объекту DOM):

$("p.super").addClass("some-class"); // объявляем элементу p.super второй класс - some-class.

Удаляем определенный класс у определенного элемента:

$("p.some-class").removeClass("some-class");

Read the rest of this entry »

Tags: ,

jQuery ч.2: Введение в jQuery Селекторы

августа 13, 2011  |  Published in ClientSide, JavaScript, jQuery

jqueryjQuery ч.2: Введение в jQuery Селекторы
Селектором могут быть свойства тега, стили тега, имя тега, имя класса и идентификатора.
В этой статье мы будем использовать следущий HTML/CSS код:

<!DOCTYPE html>
<html>
  <head>
    <title>RubyDev.ru</title>
    <style>
      div.mega-div{width:640px;margin: 0 auto;background:#c00; border:10px solid #a22;padding:10px;overflow:hidden}
      ul{list-style-type:none;margin:0;padding:0;}
      a{color:#fff;font-size:11px;}
      div#nav{width:200px;background:#333;padding:10px;border:10px solid #222;float:left;margin-right:10px;}
      div#content{width:350px;background:#333;padding:10px;border:10px solid #222;float:left}
      #content p{color:#ddd;padding:0;margin:0;margin-bottom:10px;text-indent:20px;}
    </style>
    <script src="jquery-1.6.2.min.js"></script>
  </head>
  <body>
    <div class="maga-div">
      <div id="nav">
        <ul>
          <li><a href="/">RubyDev</a></li>
          <li><a href="#" style="link-style">This page</a></li>
          <li><a href="http://rubyonrails.org/">Ruby on Rails</a></li>
          <li><a href="http://rubyflow.ru">RubyFlow.ru</a></li>
          <li><a href="http://rubyflow.com" id="link-id">RubyFlow.com</a></li>
        </ul>
      </div>
      <div id="content">
        <p>Content content content Content content content Content.</p>
        <p>Content content content Content content content Content.</p>
        <p>Content content content Content content content Content.</p>
        <p>Content content content Content content <a href="#">content Content</a>.</p>
      </div>
    </div>
  </body>
</html>

Давайте сначала выберим все ссылки:
$(«a»)
Read the rest of this entry »

Tags: ,

jQuery ч.1: jQuery(document).ready()

августа 7, 2011  |  Published in ClientSide, JavaScript, jQuery

jQuery: jQuery(document).ready()
Поскольку это первая статья о jQuery, позвольте рассказать у ней о том, что же такое jQuery.

jqueryjQuery — это фрреймворк написанный на JavaScript и ориентирован на использование на стороне клиента. Заходя на ваш сайт пользователь скачивает jQuery вместе со всеми вашими скриптами, которые содержатся в отдельных файлах. jQuery необходим для следующих целей:

  • Обеспечить кроссбраузерность вашего JavaScript кода
  • Сократить количество кода, который пишется пользователем за счет готовых решений
  • Предоставить программисту большой и удобный набор селекторов для выборки элементов страницы
  • Предоставить программисту набор стандартных визуальных эффектов для оживления вебстраниц

Read the rest of this entry »

Tags: ,