jQuery. Hello World!

Работа с jQuery построена на использовании специальной функции – jQuery(). Но чаще используют короткий псевдоним — $(). Давайте разместим заголовок второго уровня h2 и попробуем его выбрать в коллекцию, то есть получить к нему доступ.

Hello, world!

Сам скрипт нужно разместить перед закрывающим тегом body.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
	var h2_js = document.getElementsByTagName('h2');
	var h2_jq = $('h2');
	var h2_jq2 = jQuery('h2');
	console.log("JavaScript: " + h2_js);
	console.log("$(): " + h2_jq);
	console.log("jQuery(): " + h2_jq2);
</script>

Для полноты картины использованы три варианта - через стандартный JavaScript при помощи функции getElementsByTagName(), через метод $(), через метод jQuery().

Если по каким-то причинам скрипт подключается в начале страницы, то код будет немного другим.

<script>
	var h2_js = document.getElementsByTagName('h2');
	console.log(h2_js);
	$(function(){
		var h2_jq = $('h2');
		var h2_jq2 = jQuery('h2');
		console.log(h2_jq);
		console.log(h2_jq2);
	});
</script>

Также встречается устаревшая запись, когда проверяется, что страница загрузилась.

$(document).ready(function(){
	var h2_jq = $('h2');
	console.log(h2_jq);
});

Однако, продолжим. После того, как мы выбрали объект для опытов, можно что-то с ним сделать. Например, заставить его раствориться по щелчку. Допишем код в сценарии.

$(function()
    {
        h2_jq.click(function()
            {
                h2_jq.fadeOut();
            }
        );
    }
);

Мы создали отдельную переменную h2_jq, без неё пришлось бы писать так:

$(function()
    {
        $('h2').click(function()
            {
                $('h2').fadeOut();
            }
        );
    }
);

Для данного примера это не существенно, но в сложных сценариях переменные предпочтительнее. А пока можете щёлкнуть по заголовку и он исчезнет благодаря функции fadeOut().

На функции fadeOut() можно остановиться подробнее. Например, вы можете поэкспериментировать с этой функцией. Исправьте код следующий образом

fadeOut(5);

Также можете попробовать и такой вариант

fadeOut(fast)

Как вы поняли, подробную информацию о синтаксисе fadeOut() нужно искать в документации к библиотеке.

Реклама