TOC

This article is currently in the process of being translated into Russian (~54% done).

Вводная часть:

Hello, world!

Каждый приличный урок по программированию обязательно начинается с "Hello, world!" примера и наш курс не является исключением. В предыдущих главах мы научились, как добавлять jQuery на страницу, так что теперь ничего не мешает нам использовать все его преимущества. Однако сначала было бы неплохо узнать, как все-таки работает jQuery. Давайте сразу обратимся к примеру:

<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>

Итак, у нас есть тег div с id "divTest1". В JavaScript мы используем значок доллара $ чтобы вызвать нужный нам фреймворк jQuery, затем мы выбираем все элементы с указанным id (в примере у нас только один такой элемент) и присваиваем ему текст "Hello, world!". Пока что вам необязательно понимать, почему это работает именно так, но по ходу уроков все элементы будут рассмотрены более подробно.

Давайте выполним ту же самую задачу в JavaScript без jQuery и сравним результат. Хм, кажется, нам нужно больше строк на этот раз:

<div id="divTest2"></div>
<script type="text/javascript">
document.getElementById("divTest2").innerHTML = "Hello, world!";
</script>

And it would be even longer if our HTML element didn't have an ID, but for instance just a class.

Normally though, you should wait for the document to enter the READY state before you start manipulating its content. The above examples will work in most browsers and likely even work when you do more advanced stuff, but certain tasks may fail if you try to do them before the document is loaded and ready. Fortunately, jQuery makes this very easy as well, as we will see in the next chapter. After that, we will start looking into one of the most important aspects of jQuery, which has already been used in the above example: Selectors.