ДЕНЬ 02–25.04.2016

Бонжур,

Действия - лучший способ убить тревогу.

Итак, продолжим с Free Code Camp. Сегодня мы будем изучать jQuery, что-то совершенно новое для меня.

Несколько замечаний по jQuery:

• функция готовности документа. Важно знать, что код, который вы поместите в эту функцию, будет запущен, как только ваш браузер загрузит вашу страницу.
• Все функции jQuery начинаются с символа $, который обычно называют оператором знака доллара или просто шиком.
• jQuery, чтобы добавить класс CSS «animated-bounce» ко всем вашим кнопкам с помощью функции jQuery addclass().

<script>
    $(document).ready(function(){
        $("button").addclass("animated bounce");//HTML tag
        $(".well").addClass("animated shake");//class
        $("#target3").addClass("animateed fadeout");//id
    });
</script>

• jQuery также можно использовать для удаления класса из существующего элемента.

<script>
 $(“button”).removeClass(“btn-default”); // remove class
});
</script>

• В jQuery есть функция .css(), которая позволяет изменять CSS элемента.

<script>
 $(document).ready(function() {
 $(“#target1”).css(“color”,”red”);
 });
</script>

• Вы также можете изменить не-CSS-свойства HTML-элементов с помощью jQuery. Например, вы можете отключить кнопки. В jQuery есть функция .prop(), которая позволяет настраивать свойства элементов.

<script>
 $(document).ready(function() {
 $(“#target1”).prop(“disabled”, “true”); //disable element with id
});

• В jQuery есть функция .html(), которая позволяет добавлять HTML-теги и текст внутри элемента.
• В jQuery также есть аналогичная функция с именем .text(), которая только изменяет текст без добавления тегов.

<script>
 $(document).ready(function() {
 $(“#target4”).html(“<em>#target4</em>”); 
 });
</script>

• В jQuery есть функция .remove(), которая полностью удаляет элемент HTML.

<script>
 $(document).ready(function() {
 $(“#target4”).remove();
});

• В jQuery есть функция appendTo(), которая позволяет выбирать элементы HTML и присоединять их к другому элементу.

<script>
 $(document).ready(function() {
 $(“#target2”).appendTo(“#right-well”);
});

• jQuery также поддерживает связывание функций . Это удобный способ добиться цели с помощью jQuery.

<script>
 $(document).ready(function() {
 $(“#target5”).clone().appendTo(“#left-well”);//function chaining
 });
</script>

• В jQuery есть функция parent(), которая позволяет вам получить доступ к родительскому элементу любого выбранного вами элемента.

<script>
 $(document).ready(function() {
 $(“#target1”).parent().css(“background-color”,”red”);//parent()
 });
</script>

• В jQuery есть функция children(), которая позволяет вам получить доступ к дочерним элементам любого выбранного вами элемента. Его использование похоже на использование parent() .
• jQuery можно использовать для определения конкретного дочернего элемента элемента.

<script>
 $(document).ready(function() {
 $(“.target:nth-child(2)”).addClass(“animated bounce”);//nth-child
});
</script>

• jQuery также можно использовать для определения элементов с четными и нечетными номерами .

<script>
 $(document).ready(function() {
 $(“.target:even”).addClass(“animated shake”);//even or odd elements
 });
</script>

• Есть один классный CSS-класс «hige», им интересно пользоваться :)

<script>
 $(document).ready(function() {
 $(“body”).addClass(“animated hinge”); //hinge
});
</script>

Обратите внимание, что jQuery имеет нулевую индексацию, что означает, что вопреки здравому смыслу :odd выбирает второй элемент, четвертый элемент и т. д.

Код бесплатного лагеря на 25.04.2016:

Я заканчиваю день с результатом 138. Далее следуют несколько практических проектов по созданию страницы трибьюта и страницы портфолио.

Наткнулся на отличное приложение Codepen — популярный браузерный редактор кода.

Сегодня все мои соседи по комнате взяли выходной и поиграли в футбол :)

Хорошие новости для болельщиков «Барсы», «Барселона» выиграла (4–3).

Шестой сезон GOT также вышел, хотя S06e01 не был чем-то особенным.

Это был очень плодотворный день :)

Наш кодовый лагерь прошел успешно.

До свидания