BlogGitHub

Будь готов!

Теперь пора приступить к работе — возьмём какой-нибудь элемент на страничке и попробуем его изменить. Для этого в <head> вставим следующий код:

<script>
    // мы пытаемся найти все элементы <h2> на странице
    // и изменить цвет шрифта на красный
    jQuery("h2").css("color", "red");
</script>

Только подобный код ничего не сделает, так как на момент выполнения на странице ещё не будет тегов <h2> – слишком рано выполняется скрипт, до загрузки всего HTML-документа. Для того, чтобы код сработал верно, мы должны либо поместить код после искомого <h2>, а то и сразу в самый низ страницы, либо использовать метод ready() для отслеживания события load нашего document:

<script>
    // ждём загрузки всего документа
    // после этого будет выполнена анонимная функция
    // которую мы передали в качестве параметра
    jQuery(document).ready(function(){
        jQuery("h2").css("color", "red");
    });
</script>

Также можно использовать сокращённый вариант без явного вызова метода ready():

<script>
    $(function(){
        $("h2").css("color", "red");
    });
</script>

Последний вариант уже стоит считать основным для использования, ведь в jQuery 3.0 метод ready() уже помечен как deprecated.

Вы можете создать сколь угодно много подобных функций, не обязательно весь необходимый функционал помещать в одну.

Если ваш код добавлен на страницу и будет исполняться уже после наступления события load, то он будет вызван незамедлительно, никаких дополнительных манипуляций производить не нужно.

$() — это синоним для jQuery(). Чтобы у вас не возникало конфликтов с другими странами библиотеками за использование «$», советую ваш код оборачивать в анонимную функцию следующего вида (best practice, так сказать):

;(function($, undefined){
    // тут тихо и уютно
    // мы всегда будем уверены, что $ === jQuery
    // a undefined не переопределен ;)
})(jQuery);

Посмотрите на пример в ready.html. Откройте исходный код данной страницы и найдите тег <script>. Осмыслите и постарайтесь понять суть происходящего.

Previous10% Подключаем, находим, готовимNextСелекторы

Last updated