jQuery для начинающих или простой jQuery.
Думаю, что не ошибусь, если скажу, что с появлением jQuery JavaScript перестал быть страшным и тошнотворным для большинства веб-мастеров. Если раньше каждый скрипт приходилось проверять на работоспособность в различных браузерах (есть некоторые различия в интерпретации ими кода), то сейчас всю эту заботу взял на себя замечательный фреймворк jQuery.
Если вы считаете, что jQuery сложный и непонятный, то вы заблуждаетесь. Скорее всего, вы пытаетесь объять необъятное и изучить все, что есть в этом фреймворке за раз. На мой взгляд, это ошибочный подход при изучении любого нового языка или технологии.
Я подготовил небольшую статью «jQuery для начинающих», которая строится по принципу 20/80. Думаю, вы уже слышали об этом принципе Парето, который применим практически ко всем областям. Суть его заключается в том, что, например, только 20% наших действий приводят к 80% результата, а остальные 80% действий дают отдачу всего лишь в 20%. В английском языке в 80% ситуаций используется лишь 10-15-20% слов, а остальной словарный запас нужен лишь в 20% (или даже меньше) случаях. Поэтому не нужно учить сразу все, нужно сосредоточиться на 20%, которые дадут эффект на 80% отдачи.
Это касается и изучения jQuery. Опыт разработки сайтов показывает, что чаще всего задействуется очень и очень ограниченный набор методов данного фреймворка. В остальных случаях обычно используются и настраиваются уже готовые плагины.
В «jQuery для начинающих» я попытался собрать и объяснить как раз эти наиболее распространенные методы jQuery. Думаю, эта статья послужит для вас хорошим справочным руководством.
Итак, приступим.
Подключение библиотеки jQuery на сайте. Чтобы jQuery работал на наших страницах, мы должны загрузить эту библиотеку, точно также, как мы подключаем и загружаем css-стили. Сделать это можно двумя способами.
Первый – скачать последнюю версию библиотеки с официального сайта jquery.com, поместить скачанные файлы в корень вашего сайта, а затем указать в «шапке» путь к библиотеке, например, так.
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>Моя страница</title> <script type='text/javascript' src='/js/ jquery.min.js '></script> </head> <body> </body> </html> |
Как видите, скачанный файл jquery.min.js мы помещаем в папку js, расположенную в корне нашего сайта.
Второй способ более простой – подключение jQuery по ссылке:
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>Моя страница</title> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script> </head> <body> </body> </html> |
Теперь мы можем использовать jQuery на страницах нашего сайта.
Методы jQuery заключаются в теги script точно также, как обычный JavaScript. Пример:
1 2 3 4 5 |
<script>
$(document).ready(function(){
$("div.new").html("Здесь я могу расположить любой html-код");
});
</script>
|
Этот кусок кода мы можем вставить в любое место html-кода нашей страницы. Давайте, наконец, разберем, что же мы такое написали.
Конструкция
1 2 3 |
$(document).ready(function(){
});
|
означает, что то, что находится внутри ее должно выполниться только после того, как DOM будет готов. Проще говоря, когда структура страницы будет сформирована (этот момент наступает раньше, чем загрузятся целиком картинки и всевозможные «подтягиваемые» файлы).
Есть более короткая альтернатива данной конструкции:
1 2 3 |
$(function() {
//наш код
});
|
Вы уже обратили внимание на символ $, который мы тут использовали. Вместо него мы могли бы писать jQuery, то есть $ — это синоним объекта jQuery. Мы можем для краткости использовать этот символ, однако если на сайте подключаются еще другие библиотеки, использующие его, то лучше делать обращения через jQuery.
В jQuery также есть специальный метод, который используется, чтобы избежать конфликта с другими библиотеками по поводу $:
1 |
$.noConflict(); |
Этот метод нужно использовать после того, как вы подгрузили библиотеку jQuery и другие библиотеки. Метод, по сути, говорит jQuery, что дальше все конструкции с использованием $ данного фреймворка не касаются, а используются другими библиотеками. Вместо символа $ для jQuery в коде будет использоваться имя «jQuery».
1 2 3 4 5 6 |
<script type="text/javascript" src="other_lib.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $.noConflict(); // Здесь код, который будут использовать другие библиотеки и включающий в себя $. </script> |
Разбираем наш код дальше. Выше мы использовали $(«div.new»). Что это означает? Тут мы говорим, что работаем со всеми элементами div, имеющих класс «new». Мы можем записать это покороче — $(«.new»). Если вам нужно задействовать элемент с идентификатором id = «new», то вместо точки мы пишем символ #: $(«#new»)
Запомните:
для класса — точка (.)
для id — решетка (#)
Все имена классов или идентификаторов заключаются в кавычки.
В jQuery есть множество более сложных способов обращения к различным элементам на странице. В качестве основы пока запомните, то, что мы разобрали выше, а если захотите получить больше информации, то можете почитать Работа с селекторами в jQuery.
Вернемся к нашему примеру:
1 2 3 4 5 |
<script>
$(document).ready(function(){
$("div.new").html("Здесь я могу расположить любой html-код");
});
</script>
|
Метод html() позволяет заменить html-содержимое любого указанного нами элемента. В нашем случае мы заменяем содержимое всех блочных элементов div с классом new.
Допустим, у нас есть на странице такой блок:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Моя страница</title> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script> </head> <body> <div class="new"> <span>Первый текст</span> </div> </body> </html> |
Мы хотим заменить содержимое данного блока div другим содержимым. Для этого нам как раз окажется полезным метод html():
1 2 3 4 5 |
<script>
$(document).ready(function(){
$("div.new").html("<span>Второй текст</span>");
});
</script>
|
В результате наш блок div будет выглядеть так:
1 2 3 |
<div class="new"> <span>Второй текст</span> </div> |
Если в скобках html() вы ничего не укажите, то блок окажется пустым, то есть мы удалим все его содержимое. Данный метод позволяет проводить мощные манипуляции с имеющейся веб-страницей, меняя ее структуру динамически без перезагрузки страницы.
Изменение атрибутов, добавление и удаление классов стилей
С помощью jQuery мы можем легко изменить атрибуты элементов на странице. Для этого можно использовать метод attr(). Рассмотрим пример.
1 2 3 4 5 |
<script>
$(document).ready(function(){
$("a.favorite").attr('rel', 'my_value');
});
</script>
|
В данном примере мы находим все ссылки c классом «favorite» и присваиваем их атрибуту rel значение «my_value». То есть мы получим что-то вроде следующего:
1 2 3 |
<div> <a href="page.html" class="favorite" rel="my_value">Текст ссылки</a> </div> |
Если нам нужно получить содержимое данного атрибута, то мы делаем так:
1 2 3 4 5 |
<script>
$(document).ready(function(){
rel_val=$("a.favorite").attr('rel');
});
</script>
|
В результате в переменной rel_val окажется текущее значение атрибута rel ссылки с классом favorite.
Метод addClass() позволяет добавить к какому-то элементу определенный класс, например:
1 2 3 4 5 |
<script>
$(document).ready(function(){
$("p").addClass('new');
});
</script>
|
После выполнения данного кода все элементы p будут иметь класс ‘new':
1 2 3 4 5 6 |
<p class="new"> Текст 1 </p> <p class="new"> Текст 2 </p> |
Метод removeClass() позволяет удалить определенный класс у элемента(-ов):
1 2 3 4 5 |
<script>
$(document).ready(function(){
$("p").removeClass('new');
});
</script>
|
Мы удалили у всех элементов p класс new, который присвоили ранее и теперь получим:
1 2 3 4 5 6 |
<p> Текст 1 </p> <p> Текст 2 </p> |
Получаем значение из полей формы на jQuery. Метод val().
Допустим, у нас есть следующие поля формы на странице.
1 2 |
<input type="text" name="first_name" id="first_name" value=""> <input type="text" name="last_name" id="last_name" value=""> |
Как нам в любой момент получить содержимое поля с id равным «first_name»? Мы можем использовать метод val().
1 2 3 4 5 |
<script>
$(document).ready(function(){
my_var=$("#first_name").val();
});
</script>
|
Метод val() извлечет значение из текстового поля и поместит его в переменную my_var.
Также мы можем использовать ранее рассмотренный метод attr():
1 2 3 4 5 |
<script>
$(document).ready(function(){
my_var=$("#first_name").attr('value');
});
</script>
|
Перебор элементов. Метод each().
Допустим у нас есть на странице некоторый список:
1 2 3 4 |
<ul>
<li>Дима</li>
<li>Саша</li>
</ul>
|
У нас есть задача перебрать все элементы li данного списка и получить их текстовое значение. Для этого мы можем использовать метод each(), который перебирает все элементы, указанные нами. Пример:
1 2 3 |
$( "li" ).each(function( index ) {
alert( index + ": " + $(this).text() );
});
|
Как видите, мы базис данного кода это:
1 2 3 |
$( "li" ).each(function() {
});
|
Метод each «проходит» по каждому элементу li и вызывает нашу пользовательскую функцию (мы ее указали в скобках). Кроме того, в качестве аргумента мы передаем порядковый номер элемента li (отчет начинается с 0) в переменной index.
Внутри нашей функции мы можем обращаться к текущему элементу li через this (указывает на текущий элемент). Чтобы получить текстовое значение данного li мы используем метод text():
1 |
$(this).text(); |
На каждом шаге цикла (итерации) будет выводится модальное окно с информацией о текущем индексе элемента и его текстовом значении. Для этого используется js-функция alert().
Обработка клика и других событий.
Допустим у нас есть кнопка с классом «check».
1 |
<button class="check">кликни</button> |
При клике на нее нам нужно вывести сообщение «клик на кнопке» методом alert(). Чтобы отловить клик мы будет использовать метод jQuery click().
1 2 3 4 5 6 7 |
<script>
$(document).ready(function(){
$(".check").click(function(){
alert("клик на кнопке");
});
});
</script>
|
Наверное, вы обратили внимание, что мы «обернули» наш код в метод ready, чтобы начать ловить клик только после того, как структура документа будет сформирована. Эту обертку мы должны были использовать и выше, но не писали для краткости примеров.
Из данного примера видно, что мы привязываем метод click() к объекту $(«.check»). При клике будет вызвана наша функция, которую мы указали в скобках метода click().
Стоит заметить, что если кнопка с классом check добавляется на страницу позднее динамически, то наш код не отработается. Для того, чтобы ловить события для элементов, которые появляются позже, мы можем использовать другой метод live(). Указанный выше код мы можем переписать следующим образом:
1 2 3 4 5 6 7 |
<script>
$(document).ready(function(){
$(".check").live('click', function(){
alert("клик на кнопке");
});
});
</script>
|
Вместо метода live() можно использовать еще один метод delegate(), который тоже подходит для обработки событий для динамически появляющихся элементов на странице. Перепишем последний пример следующим образом:
1 2 3 4 5 |
<script>
$("body").delegate(".check", "click", function(){
alert("клик на кнопке");
});
</script>
|
Помимо клика по элементам мы можем «отлавливать» и множество других событий. Вот небольшой список:
blur
change
dbclick
focus
focusout
keydown
keypress
и др.
Поиск родителя элемента
Давайте рассмотрим следующий html-код.
1 2 3 4 5 6 7 8 9 10 11 |
<ul class="level1">
<li class="item1">1</li>
<li class="item2">2
<ul class="level2">
<li class="item-a">A</li>
<li class="item-b">B</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item3">3</li>
</ul>
|
Как видите, здесь список, в котором один из элементов li имеет вложенный список. Теперь нам нужно для вложенного списка с классом «level2″ задать свой цвет фона. Мы можем обратиться к данному списку по классу, что достаточно просто. Но если такой класс не задан, то мы можем отыскать этот список через поиск родителя для одного из его дочерних элементов li (ul с классом «level2″ является родителем для элементов li с классами «item-a», «item-b» и «item-с»). Задействуем метод поиска родителя parent().
1 |
$('li.item-a').parent().css('background-color', 'green');
|
Наверное, вы немного удивлены столь длинной конструкцией, однако, это распространенная практика в jQuery использовать цепочку методов, идущими друг за другом. Порой это делает код значительно компактнее. Для удобства чтения методы можно располагать по одной на каждой строке:
1 2 |
$('li.item-a').parent()
.css('background-color', 'green');
|
В нашем примере сначала мы находим родителя для li с классом «item-a», а затем используем метод css() для изменения его свойства ‘background-color’.
Эффекты на jQuery.
Чтобы скрыть какой-то элемент на странице, мы можем динамически присвоить ему атрибут «display:none;», используя метод css():
1 |
$(".something").css('display', 'none')
|
Также мы можем использовать метод hide(), что будет равносильно методу css():
1 |
$(".something").hide();
|
Однако, метод hide() дает нам значительно больше возможностей. Например, мы можем указать скорость, с которой элемент будет скрываться.
1 |
$(".something").hide(1500);
|
В данном примере — 1500 миллисекунд.
Вместо числового значения мы можем использовать параметры «slow» и «fast», что равносильно значениям 600 и 200.
1 |
$(".something").hide("slow");
|
Противоположным методу hide() является метод show().
1 |
$(".something").show("slow");
|
Продолжение следует.
Категория: jQuery
Доброго здоровья. А вот такой вопрос-
есть стандартный код вывода изображений-
И есть необходимость присоеденить, (не удаляя из дочернего элемента) в родительском — атрибут title.
Тоесть:
$(document).ready(function(){
$(«tema a») attr(«title»)
????????????????????
)};
Если проще: у меня есть атрибут tittle, но он автоматически прописывается в дочернем элементе , а мне необходимо, его закрепить в ссылке…
Буду благодарен за совет
Сложно ответить, не видя кусок вашего html-кода. Но задача вполне решаемая — извлечь title из картинки и присвоить его значение родительскому элементу ссылке.