<section id="description">
<p>Используя jQuery, вы можете изменить текст между начальным и конечным тегами элемента. Вы даже можете изменить разметку HTML. В jQuery есть функция, называемая <code>.html()</code> которая позволяет добавлять HTML-теги и текст внутри элемента. Любое содержимое, ранее содержавшееся в элементе, будет полностью заменено содержимым, которое вы предоставляете, используя эту функцию. Вот как вы могли бы переписать и подчеркнуть текст нашего заголовка: <code>$("h3").html("&#x3C;em>jQuery Playground&#x3C;/em>");</code> jQuery также имеет аналогичную функцию под названием <code>.text()</code> которая изменяет текст без добавления тегов. Другими словами, эта функция не будет оценивать любые теги HTML, переданные ей, но вместо этого будет рассматривать ее как текст, который вы хотите заменить существующим контентом. Измените кнопку с id <code>target4</code> , выделив ее текст. Проверьте эту <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/em" target="_blank">ссылку,</a> чтобы узнать больше о различии между <code>&#x3C;i></code> и <code>&#x3C;em></code> и их использованием. Обратите внимание, что, хотя <code>&#x3C;i></code> традиционно используется для подчеркивания текста, с тех пор он был использован для использования в качестве тега для значков. Тег <code>&#x3C;em></code> теперь широко признан тегом для акцента. Либо будет работать для этой задачи.</p></section>

Change Text Inside an Element Using jQuery

<section id="description">
<p>Теперь мы готовы изучить jQuery, самый популярный инструмент JavaScript за все время. Прежде чем мы сможем начать использовать jQuery, нам нужно добавить некоторые вещи в наш HTML. Во-первых, добавьте элемент <code>script</code> в верхней части страницы. Не забудьте закрыть его в следующей строке. В вашем браузере будет запущен любой JavaScript внутри элемента <code>script</code> , включая jQuery. Внутри вашего <code>script</code> элемента добавьте этот код: <code>$(document).ready(function() {</code> в свой <code>script</code> . Затем закройте его в следующей строке (все еще внутри вашего элемента <code>script</code> ) с помощью: <code>});</code> Мы узнаем больше о <code>functions</code> позже. Важно знать, что код, введенный внутри этой <code>function</code> будет запущен, как только ваш браузер загрузит вашу страницу. Это важно, потому что без функции вашего <code>document ready function</code> , ваш код может работать до того, как ваш HTML будет отображаться, что приведет к ошибкам.</p></section>

Learn How Script Tags and Document Ready Work

<section id="description">
<p>Мы закончили играть с нашей игровой площадкой jQuery. Давайте разорвём его! jQuery может также нацеливаться на элемент <code>body</code> . Вот как мы можем заставить все тело исчезать: <code>$("body").addClass("animated fadeOut");</code> Но давайте сделаем что-то более драматичное. Добавьте <code>animated</code> классы и <code>hinge</code> к элементу вашего <code>body</code> .</p></section>

Use jQuery to Modify the Entire Page

<section id="description">
<p>Вы также можете настроить таргетинг на основе своих позиций с помощью <code>:odd</code> или <code>:even</code> селекторов. Обратите внимание, что jQuery индексируется с нулевой отметкой, что означает, что первый элемент в элементе выбора имеет позицию 0. Это может быть немного запутанным, как, напротив, интуитивно <code>:odd</code> выбирает второй элемент (позиция 1), четвертый элемент (позиция 3) , и так далее. Вот как вы бы нацеливали все нечетные элементы с помощью <code>target</code> <code>$(".target:odd").addClass("animated shake");</code> класса и давали им классы: <code>$(".target:odd").addClass("animated shake");</code> Попробуйте выбрать все четные <code>target</code> элементы и дать им классы <code>animated</code> и <code>shake</code> . Помните, что <strong>даже</strong> относится к позиции элементов с нулевой системой в виду.</p></section>

Target Even Elements Using jQuery

<section id="description">
<p>Вы видели, почему атрибуты id настолько удобны для таргетинга с помощью селекторов jQuery. Но у вас не всегда будут такие опрятные идентификаторы для работы. К счастью, у jQuery есть некоторые другие трюки для ориентации на нужные элементы. jQuery использует селектора CSS для целевых элементов. <code>target:nth-child(n)</code> селектор <code>target:nth-child(n)</code> CSS позволяет вам выбрать все n-ые элементы с целевым классом или типом элемента. Вот как вы бы дали третий элемент в каждой скважине класс отказов: <code>$(".target:nth-child(3)").addClass("animated bounce");</code> Сделайте второго ребенка в каждом из элементов вашего колодца. Вы должны выбрать дочерние элементы элементов с <code>target</code> классом.</p></section>

Target a Specific Child of an Element Using jQuery

<section id="description">
<p>Когда HTML элементы размещены на один уровень ниже другого, они называются `дочерними` этого элемента. Например, элементы кнопки в этом задании с текстом "#target1", "#target2", и "#target3" являются `дочерними` элемента `<div class="well" id="left-well">`.
<p>В jQuery есть функция <code>children()</code>, которая позволяет вам получить доступ к дочерним элементам любого выбранного вами элемента.</p>
<p>Ниже пример того, как бы вы использовали функцию <code>children()</code>, чтобы дать <code>синий</code> цвет дочерним элементам вашего <code>left-well</code>.</p>
<p><code>$("#left-well").children().css("color", "blue")</code></p>
</div></p></section>

Target the Children of an Element Using jQuery

<section id="description">
<p>Каждый HTML элемент имеет `родительский` элемент, от которого он `наследует` свойства. </p><p>Например, ваш элемент <code>jQuery Playground h3</code> имеет родительский элемент <code>&#x3C;div class="container-fluid"></code>, который в свою очередь имеет в качестве родителя <code>body</code>.</p>
<p>В jQuery есть функция называющаяся <code>parent()</code>, которая позволяет вам получить доступ к родителю любого элемента, который вы выбрали.</p>
<p>Вот пример того, как бы вы использовали функцию <code>parent()</code>, если бы вы захотели дать синий фон родительскому элементу элемента <code>left-well</code>. </p>
<p><code>$("#left-well").parent().css("background-color", "blue")</code></p>
</section>

Target the Parent of an Element Using jQuery

<section id="description">
<p>В дополнение к движущимся элементам вы также можете копировать их из одного места в другое. jQuery имеет функцию <code>clone()</code> которая делает копию элемента. Например, если мы хотим скопировать <code>target2</code> из нашей <code>left-well</code> <code>target2</code> в нашу <code>right-well</code> <code>target2</code> , мы будем использовать: <code>$("#target2").clone().appendTo("#right-well");</code> Вы заметили, что это связано с объединением двух функций jQuery? Это называется <code>function chaining</code> и это удобный способ добиться успеха с помощью jQuery. <code>target5</code> свой элемент <code>target5</code> и добавьте его в <code>left-well</code> <code>target5</code> .</p></section>

Clone an Element Using jQuery

<section id="description">
<p>Теперь давайте попробуем переместить элементы из одного <code>div</code> в другой. Функция jQuery имеет функцию <code>appendTo()</code> которая позволяет вам выбирать элементы HTML и добавлять их к другому элементу. Например, если мы хотим перенести <code>target4</code> с нашей правой скважины на нашу левую скважину, мы будем использовать: <code>$("#target4").appendTo("#left-well");</code> Переместите элемент <code>target2</code> с <code>left-well</code> на <code>right-well</code> .</p></section>

Use appendTo to Move Elements with jQuery

<section id="description">
<p>Теперь давайте удалим HTML-элемент с вашей страницы с помощью jQuery. Функция jQuery имеет функцию <code>.remove()</code> , которая полностью удалит элемент HTML. Удалите элемент <code>target4</code> со страницы с помощью функции <code>.remove()</code> .</p></section>

Remove an Element Using jQuery

<section id="description">
<p>You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.</p>
<p>When you disable a button, it will become grayed-out and can no longer be clicked.</p>
<p>jQuery has a function called <code>.prop()</code> that allows you to adjust the properties of elements.</p>
<p>Here's how you would disable all buttons:</p><p><code>$("button").prop("disabled", true);</code></p>
<p>Disable only the <code>target1</code> button.</p></section>

Disable an Element Using jQuery

<section id="description">
<p>Теперь вы знаете три способа таргетинга элементов: по типу: <code>$("button")</code> , по классу: <code>$(".btn")</code> и по id <code>$("#target1")</code> . Хотя можно добавить несколько классов в один <code>.addClass()</code> , давайте добавим их в один и тот же элемент <em>тремя разными способами</em> . Используя <code>.addClass()</code> , добавьте только один класс за один раз к одному и тому же элементу, тремя разными способами: добавьте <code>animated</code> класс ко всем элементам с <code>button</code> типа. Добавьте класс <code>shake</code> ко всем кнопкам с классом <code>.btn</code> . Добавьте <code>btn-primary</code> к кнопке с идентификатором <code>#target1</code> . <strong>Заметка</strong> <br> Вы должны ориентироваться только на один элемент и одновременно добавлять только один класс. В целом, ваши три отдельных селектора в конечном итоге <code>btn-primary</code> три класса <code>shake</code> , <code>animated</code> и <code>btn-primary</code> в <code>#target1</code> .</p></section>

Target the Same Element with Multiple jQuery Selectors

<section id="description">
<p>Мы также можем изменить CSS элемента HTML непосредственно с помощью jQuery. Функция jQuery имеет функцию под названием <code>.css()</code> которая позволяет вам изменять CSS элемента. Вот как мы изменим его цвет на синий: <code>$("#target1").css("color", "blue");</code> Это немного отличается от обычного объявления CSS, поскольку свойство CSS и его значение находятся в кавычках и разделены запятой, а не двоеточием. Удалите селектор jQuery, оставив свободную <code>document ready function</code> . Выберите <code>target1</code> и измените цвет на красный.</p></section>

Change the CSS of an Element Using jQuery

<section id="description">
<p>Таким же образом вы можете добавлять классы к элементу с <code>addClass()</code> jQuery, вы можете удалить их с <code>removeClass()</code> функции <code>removeClass()</code> jQuery. Вот как вы это сделаете для конкретной кнопки: <code>$("#target2").removeClass("btn-default");</code> Давайте удалим <code>btn-default</code> из всех элементов <code>button</code> .</p></section>

Remove Classes from an Element with jQuery

<section id="description">
<p>Сначала эти анимации были классными, но теперь они становятся отвлекающими. Удалите все три из этих функций jQuery из функции <code>document ready function</code> , но не оставляйте свою <code>document ready function</code> неповрежденной.</p></section>

Delete Your jQuery Functions

<section id="description">
<p>Вы также можете настраивать элементы по их атрибутам id. Сначала <code>target3</code> элемент <code>button</code> с <code>target3</code> с помощью селектора <code>$("#target3")</code> . Обратите внимание, что, как и в объявлениях CSS, вы вводите <code>#</code> перед именем id. Затем используйте <code>.addClass()</code> jQuery для добавления классов <code>animated</code> и <code>fadeOut</code> . Вот как вы делаете элемент <code>button</code> с id <code>target6</code> исчезающим: <code>$("#target6").addClass("animated fadeOut")</code> .</p></section>

Target Elements by id Using jQuery

<section id="description">
<p>Вы видите, как мы отбросили все ваши элементы <code>button</code> ? Мы выбрали их с помощью <code>$("button")</code> , затем мы добавили к ним некоторые классы CSS с <code>.addClass("animated bounce");</code> , Вы только что использовали <code>.addClass()</code> jQuery, которая позволяет добавлять классы к элементам. Во- первых, давайте нацеливать свои <code>div</code> элементы с классом <code>well</code> с помощью <code>$(".well")</code> селектор. Обратите внимание, что, как и в объявлениях CSS, вы вводите a <code>.</code> перед именем класса. Затем с помощью jQuery в <code>.addClass()</code> функцию , чтобы добавить классы <code>animated</code> и <code>shake</code> . Например, вы можете сделать все элементы с <code>$(".text-primary").addClass("animated shake");</code> типа <code>text-primary</code> , добавив следующее к вашей <code>document ready function</code> : <code>$(".text-primary").addClass("animated shake");</code></p>
</section>

Target Elements by Class Using jQuery

<section id="description">
<p>Теперь у нас есть <code>document ready function</code> . Теперь давайте напишем наш первый оператор jQuery. Все функции jQuery начинаются с <code>$</code> , обычно называемого <code>dollar sign operator</code> , или как <code>bling</code> . jQuery часто выбирает элемент HTML с <code>selector</code> , затем делает что-то с этим элементом. Например, давайте сделаем все ваши элементы <code>button</code> отскоком. Просто добавьте этот код в свою готовую документ: <code>$("button").addClass("animated bounce");</code> Обратите внимание, что мы уже включили библиотеку jQuery и библиотеку Animate.css в фоновом режиме, чтобы вы могли использовать их в редакторе. Таким образом, вы используете jQuery для применения класса <code>bounce</code> Animate.css к вашим элементам <code>button</code> .</p></section>