сентября 23, 2011 | Published in JavaScript, jQuery
В этой статье мы разберемся с обработкой событий в jQuery.
Чтобы присоединить обработчик к событию необходимоо использовать функцию bind():
$(function(){
$('a.link-style').bind('click', function(){
alert("Welcome to RubyDev.ru!")
});
});
В примере выше функция bind() связывает с событием click (одиночный клик) с анонимной функцией, которая вызывает фнутри себя функцию alert(). Функция с которой связано событие называется обработчиком события.
Read the rest of this entry »
сентября 7, 2011 | Published in ClientSide, JavaScript, 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 »
августа 13, 2011 | Published in ClientSide, JavaScript, jQuery
jQuery ч.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 »
августа 7, 2011 | Published in ClientSide, JavaScript, jQuery
jQuery: jQuery(document).ready()
Поскольку это первая статья о jQuery, позвольте рассказать у ней о том, что же такое jQuery.
jQuery — это фрреймворк написанный на JavaScript и ориентирован на использование на стороне клиента. Заходя на ваш сайт пользователь скачивает jQuery вместе со всеми вашими скриптами, которые содержатся в отдельных файлах. jQuery необходим для следующих целей:
- Обеспечить кроссбраузерность вашего JavaScript кода
- Сократить количество кода, который пишется пользователем за счет готовых решений
- Предоставить программисту большой и удобный набор селекторов для выборки элементов страницы
- Предоставить программисту набор стандартных визуальных эффектов для оживления вебстраниц
Read the rest of this entry »