Главная > Блог > Web-разработка > JavaScript и TypeScript >

jQuery. Начало работы

15.04.2013

Для начала работы с библиотекой jQuery достаточно загрузить один файл — саму библиотеку — и связать его с html-документом, используя тег <script>. Впрочем, можно поступить еще проще — подключить последнюю версию библиотеки с официального сайта:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Выбор элементов страницы по id

При использовании библиотеки jQuery для доступа к ее возможностям применяется функция jquery(). Впрочем, существует и сокращенная форма записи — $().

Чтобы обратиться к элементу по его id, мы вызываем функцию $('#someid'):

<html>
<head>
<title>Выбор элемента по ID</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function setBackgroundColor() {
    $('#third').toggleClass('cyan');
}
</script>
<style type="text/css">
p.cyan {
    background-color: cyan;
}
</style>
</head>
<body>
<h1>Выбор элемента по id</h1>
<div>
  <p>Первый параграф</p>
  <p>Второй параграф</p>
  <p id="third">Третий параграф</p>
  <p>Четвертый параграф</p>
</div>
<input type="button" onclick="setBackgroundColor()" value="Поменять фон" />
</body>
</html>

Вместо функции toggleClass() можно использовать функции addClass() и removeClass():

function setBackgroundColor() {
    var third = $('#third');
    if ( ! third.hasClass('cyan') )
        third.addClass('cyan');
    else
        third.removeClass('cyan');
}

Выбор набора элементов

Передавая селектор функции jquery() — или в функцию $(), что, фактически, одно и то же, — мы выбираем набор элементов страницы.

Селекторы позволяют указывать, с какими элементами страницы мы хотим работать. Давайте выберем все элементы <p> на странице, используя селектор $('p'):

<html>
<head>
<title>Выбор набора элементов</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function count() {
    alert('На странице ' + $('p').size() + ' параграфов');
}
</script>
</head>
<body>
<h1>Выбор набора элементов</h1>
<div>
  <p>Первый параграф</p>
  <p>Второй параграф</p>
  <p>Третий параграф</p>
  <p>Четвертый параграф</p>
  <p>Пятый параграф</p>
</div>
<input type="button" onclick="count()" value="Количество параграфов" />
</body>
</html>

С помощью функции size() мы определяем количество элементов <p> в возвращенном наборе и отображаем результат в диалоговом окне. Вместо функции size() можно использовать свойство length.

Выбор элементов по классу CSS

Выбирать элементы страницы можно по классу CSS. Например, если на странице существует несколько абзацев с классом cyan, мы можем их выбрать с помощью $('p.cyan'):

<html>
<head>
<title>Выбор элементов по классу CSS</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function setBold() {
    $('p.cyan').toggleClass('bold');
}
</script>
<style type="text/css">
p.cyan {
    background-color: cyan;
}
.bold {
    font-weight: bold;
}
</style>
</head>
<body>
<h1>Выбор элементов по классу CSS</h1>
<div>
  <p>Первый параграф</p>
  <p class="cyan">Второй параграф</p>
  <p>Третий параграф</p>
  <p class="cyan">Четвертый параграф</p>
  <p>Пятый параграф</p>
</div>
<input type="button" onclick="setBold()" value="Поменять шрифт" />
</body>
</html>