Просмотров: 2 784

Javascript и Jquery селекторы. Выбор элемента по id.

Задача, которая очень часто встает перед начинающими разработчиками javascript это выбор элемента на веб-странице по его атрибуту id.

Предположим, что у нас есть код на странице.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="elem">Содержимое блока.</div>
</body>
</html>

Каким образом можно выбрать элемент с id=»elem» и произвести с ним ряд каких-то действий?

Здесь есть несколько вариантов решения проблемы. Давайте их сейчас рассмотрим.

Вариант 1. Воспользоваться методом Javascript getElementById.

Есть способ, как можно обратиться к элементу по его id используя «чистый» javascript код, без использования каких-то сторонних библиотек. Этот способ заключается в использовании метода ggetElementById(«id_элемента»). Таким образом мы обращаемся к нужному нам элементу по его id.

Давайте посмотрим, как это работает на простом примере.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="elem">Содержимое блока.</div>
<script type="text/javascript">
alert(document.getElementById("elem").innerHTML);
</script>
</body>
</html>

Добавилось всего несколько строк кода.

Обратите внимание, что эти строки кода (скрипт) находится ниже самого элемента. Это обязательное условие работы этого скрипта, т.к. код Javascript  выполняется по мере загрузки страницы. Если расположить код выше, то мы будем обращаться к элементу на странице, который еще не подгрузился, т.е. его в коде, на момент выполнения скрипта, еще не будет. Есть способы, как этого можно избежать, но это выходит за рамки данной статьи.

В итоге, если все правильно работает, мы получим всплывающее окно. В этом окне будет выводиться текст, который находится внутри блока div.

13-05-2013 11-00-55

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

Вариант 2. С помощью библиотеки Jquery.

Второй вариант выбора элемента по его id, заключается в использовании библиотеки Jquery. На практике, в современных скриптах, чаще всего пользуются именно этим способом. Он намного более удобен и легче запоминается.

Для того, чтобы обратиться к элементу по его id нужно воспользоваться конструкцией:

$("#elem")

Здесь elem – имя, которое содержится в атрибуте id.

Т.к. мы будем использовать стороннюю библиотеку Javascript, которая называется Jquery, то эту библиотеку нужно сначала подключить.

Добавляется она в разделе <head>, одним из способов, как это можно сделать, нужно добавить следующую строку кода:

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Чтобы библиотека могла подгрузиться должно быть соединение с Интернет.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="elem">Содержимое блока.</div>
<script type="text/javascript">
alert($("#elem").html());
</script>
</body>
</html>

Сам скрипт, как и в предыдущем примере, должен находиться ниже по коду того элемента, с которым вы хотите взаимодействовать.

Таким образом, мы с вами разобрали два способа, как можно выбрать элемент на веб-странице по его атрибуту id и взаимодействовать с ним. Выбирайте тот способ, который вам подходит, и используйте его на практике.