jQuery-объект

164

посл. ред. 10.08.2016

Перед совершением действий над элементами страницы их необходимо выбрать. Функция jQuery() возвращает специальный объект, с которым можно работать.

jQuery-объект - это объект, который представляет элемент страницы (или несколько элементов) и содержит специальные свойства и методы для работы с ним.

jQuery позволяет работать с несколькими элементами страницы одновременно. Если jQuery-объект представляет группу элементов, тогда все свойства и методы будут применяться сразу ко всем элементам.

<html>
<head>
  <title>jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style>
    .old {
      color: red;
    }
  </style>
</head>
<body>
  <div>Начало документа</div>
  <div>Конец документа</div>
</body>
</html>
 
<script>
$('div').addClass('old');
/* добавление всем div-ам класса old */
</script>

Начало документа

Конец документа

Каждый jQuery-объект имеет свойство length, которое содержит количество элементов, представленных данным объектом.

Порядковый номер элемента в выборке определяется методом index().

Цепочки методов

Почти все методы jQuery-объекта после манипуляций с элементами страницы возвращают новый jQuery-объект этих элементов с учётом выполнения метода. Это позволяет вызывать любое количество методов в одном выражении, исключая повторный поиск необходимых элементов или использование промежуточных переменных.

$('div.old')
/* выбор div-ов с классом old */
  .removeClass('old')
/* удаление класса old у выбранных div-ов */
  .addClass('new');
/* добавление класса new тем же div-ам */

Такое выражение называется цепочкой методов. Удобство таких цепочек особенно заметно при использовании методов, позволяющих изменять представленную в jQuery-объекте группу элементов: добавлять, фильтровать или получать новую выборку на основе имеющейся. Описание методов, с помощью которых можно редактировать выборку элементов, приводится в соответствующем разделе.

Стандартные DOM-свойства

Методы jQuery-объекта представляют основную функциональность библиотеки, но они в основном направлены на совершение действий над элементами. jQuery-объект не имеет стандартных DOM-свойств элементов.

Чтобы получить значение DOM-свойства, можно воспользоваться jQuery-методом prop(). Например, имя тега можно получить командой .prop('tagName'). А вот чтобы запустить стандартный метод, необходимо получить ссылку на нужный DOM-элемент.

jQuery-объект имеет 2 метода, которые возвращают ссылку на представленный в нём DOM-элемент (элементы):

get(): Возвращает ссылку на DOM-элемент по его индексу.
toArray(): Возвращает ссылки на все содержащиеся DOM-элементы в виде массива.

Получить ссылку на нужный элемент можно и без этих методов. К jQuery-объекту можно обратиться как к нумерованному массиву, в котором содержатся ссылки на все элементы выборки. Нумерация элементов начинается с 0.

<html>
<head>
  <title>jQuery-объект</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
</body>
</html>
 
<script>
$('p')[0].innerHTML = 'Первый параграф';
</script>

Первый параграф

Параграф 2