Селекторы jQuery используются для выбора необходимого элемента на странице.

Команды jQuery

Код jQuery как и код JavaScript состоит из последовательно идущих команд. Команды являются основной структурной единицей jQuery.

Стандартный синтаксис jQuery команд:

$(селектор).метод();

Знак $ сообщает, что символы идущие после него являются jQuery кодом;
Селектор позволяет выбрать элемент на странице;
Метод задает действие, которое необходимо совершить над выбранным элементом. Методы в jQuery разделяются на следующие группы:
- Методы для манипулирования DOM;
- Методы для оформления элементов;
- Методы для создания AJAX запросов;
- Методы для создания эффектов;
- Методы для привязки обработчиков событий.

Символ $

jQuery можно комбинировать с обычным JavaScript.

Если строка начинается с $ - это jQuery, если $ вначале строки отсутствует - это строка JavaScript кода.

Пример

function start() {
//Скроем абзац с id="hid" с помощью jQuery 
   $("p#hid").hide();
//Изменим содержимое абзаца с id="change"
   document.getElementById("change").innerHTML="Данное содержимое было изменено с помощью JavaScript.";
}

Попробовать в редакторе

Некоторые JavaScript библиотеки тоже используют $ для обозначения своего кода. Для того, чтобы избежать конфликта имен между ними в jQuery предусмотрена команда noConflict(). С помощью команды noConflict() Вы можете заменить знак $ на любой другой.

Синтаксис:

var произвольное_имя=jQuery.noConflict();

Пример

//Изменим стандартный символ $ на nsign   
var nsign=jQuery.noConflict();
//Изменим цвет абзаца используя nsign вместо $
nsign(document).ready(function(){

   nsign("p").css("color","green");

});

Попробовать в редакторе

Быстрый просмотр

Селекторы jQuery

С помощью селекторов Вы можете выбирать элементы на странице для применения к ним определенных действий.

Ниже располагается таблица с различными примерами использования селекторов для выбора желаемых элементов:

Пример	Результат
$("p")	Будут выбраны все элементы p, которые находятся на странице.
$(".par")	Будут выбраны все элементы на странице с class="par".
$("#par")	Будет выбран первый элемент на странице с id="par".
$(this)	Позволяет выбрать текущий HTML элемент. Щелкните на $(this) слева, чтобы посмотреть пример использования данного селектора в онлайн редакторе.
$("p.par")	Будут выбраны все элементы p на странице с class="par".
$("p#par")	Будут выбраны все элементы p на странице с id="par".
$(".par,.header,#heat")	Будут выбраны все элементы на странице со значениями атрибутов class="par", class="header" и id='heat'.
$("[src]")	Будут выбраны все элементы на странице, имеющие атрибут src.
$("[src='значение']")	Будут выбраны все элементы со значениям атрибута src="значение".
$("[src$='.gif']")	Будут выбраны все элементы со значениями атрибута src заканчивающимися на .gif.
$("div#wrap .par1")	Будут выбраны все элементы с class=par1, которые находятся внутри элементов div с id=wrap.
$(":input")	Будут выбраны все input элементы на странице.
$(":тип")	Будут выбраны все input элементы с <input type='тип' />. Например :button выберет все <input type='button' /> элементы, :text выберет все <input type='text' /> элементы и т.д.

Пример

$(document).ready(function(){

//Установим размер шрифта всех абзацев равным 20 пикселям
   $("p").css("fontSize","20px");
//Изменим на зеленый цвет шрифта элемента с id=el2
   $("#el2").css("color","green");
//Изменим на красный цвет шрифта элемента с class=el3
   $(".el3").css("color","red");
//Сделаем жирным шрифт элементов с id=el2 и class=el3
   $("#el2,.el3").css("fontWeight","bold");
//Изменим на синий цвет текста кнопки
   $(":input").css("color","blue");
//Установим размер шрифта всех элементов имеющих атрибут href равным 20 пикселям
   $("[href]").css("fontSize","20px");
//Изменим на зеленый цвет ссылки на www.wisdomweb.ru 
   $("[href='/']").css("color","green");

});

Попробовать в редакторе

Быстрый просмотр

Полный список селекторов jQuery Вы можете найти в нашем jQuery справочнике.

Предотвращение преждевременного выполнения кода

Из учебника по JavaScript Вы наверно помните, что выполнение кода до полной загрузки документа часто приводит к ошибкам.

Дело в том, что скрипт может обратится к еще не загруженному содержимому, а это всегда приводит к ошибкам или неожиданным результатам.

Для того, чтобы избежать этого мы часто помещали код в функцию, которая начинала выполнение только после полной загрузки документа.

Предотвращение преждевременного выполнения кода в JavaScript:

<html>
<head>
<script type="text/javascript">
function start()
{
   Код который будет выполнен после полной загрузки документа
}
</script>
</head>
<body onload="start()">
</body>
</html>

В jQuery можно избавиться от преждевременного выполнения кода следующими способами:

Предотвращение преждевременного выполнения кода в jQuery:

<script type='text/javascript'>
//Первый способ:
$(document).ready(function(){
   Код который будет выполнен после полной загрузки документа
});

//Второй способ:
$().ready(function(){
   Код который будет выполнен после полной загрузки документа
});

//Третий способ:
$(function(){
   Код который будет выполнен после полной загрузки документа
});
</script>

Существует еще один альтернативный способ также помогающий избежать преждевременное выполнение JavaScript и jQuery кода и позволяющий также ускорить загрузку страниц (благодарим за напоминание о нем пользователя Ghringo Americano).

Необходимо помещать код в самый конец тела документа (т.е. перед </body>) в данном случае интерпретатор JavaScript встроенный в браузер начнет разбирать код только после загрузки документа. В предыдущем же способе загрузка скриптов происходит одновременно с загрузкой документа, а выполняется этот код после загрузки документа.

<body>
<p>Содержимое тела документа</p>
<div>Содержимое тела документа</div>

<script type='text/javascript'>
  Код который будет выполнен после полной загрузки документа
</script>
</body>

Цепочки команд в jQuery

Для того, чтобы сократить размер кода Вы можете соединять команды jQuery в цепочки.

Команды в цепочке будут выполняться поочередно слева направо.

<script type='text/javascript'>
//Код без сокращения
$("p").css("color","green");
$("p").css("font-size","30px");
//Сокращенный код
$("p").css("color","green").css("font-size","30px");
</script>

Сделайте сами

Задание 1 измените цвет и размер шрифта, перечисленных ниже элементов, для того, чтобы выделить буквы кодового слова.

Измените цвет и размер шрифта:

Элемента с id=meadow;
Элемента с class=rainbow;
Элемента с id=future находящегося внутри элемента с id=fut; (данный элемент необходимо выделить цветом отличным от красного);
Элемента имеющего атрибут set;
Элемента с атрибутом last=code.

Обратите внимание: для изменения цвета текста элемента используйте метод: css('color','новый_цвет_текста'), для изменения размера шрифта используйте метод: css('font-size','размер_шрифта_px').

Пример

$(document).ready(function(){

   $("div div").css("color","red");  
//Пишите код здесь

});

Попробовать в редакторе

Задание 2 измените оформление элементов согласно их содержимому (подробности в редакторе).

Пример

$(document).ready(function(){

//Пишите код здесь

});

Попробовать в редакторе

« Предыдущая глава Следующая глава »