jQuery это зло «Шаги в пучину зла»

Редакция автор: stain

Скрипты внедряются до их вызова. И если в браузере отключены, то не исполняются. Надо подгружать обработчик jQuery. 

Структура скрипта, функции jQuery.

Внешний контур
<script></script>

Внутренний контур
$(document).ready(function() {

});

Сам скрипт например создающий анимацию подпрыгивания всех кнопок
$("button").addClass("animated bounce");

Здесь button это объект(другие объекты указываются как в стилях css), для которого создается класс анимации(и указано какой конкретно).Кроме прочего там же в скрипте можно прописывать и другие известные классы например из Bootstrap.

Одному объекту может быть назначено много классов, как в одной функции так и для каждого класса отдельно.

например:
$("button").addClass("animated");
$("button").addClass("bounce");

Кроме добавления классов, можно их и отключать
$("button").removeClass(".btn-default");

Для изменения каких либо параметров css используется .css("name","value")
Например сменим цвет для идентификатора target1 голубой:
$("#target1").css("color", "blue");

Для изменения функций html элементов используется функция .prop("параметр", boolean)
Следующий пример делает все кнопки неактивными устанавливая параметр "disabled" в состояние истины:
$("button").prop("disabled", true);

Функция .html() позволяет заменять контент для указанного элемента, в примере ниже в заголовке замещается текст, и добавляются прочие элементы форматирования. Аналогичная ей функция .text() позволяет замещать текст, без внедрения элементов форматирования.
$("h3").html("<em>jQuery Playground</em>");

Функция .remove() позволяет удалять отображение html объектов. Ниже приведен пример удаления с экрана элемента которому присвоен идентификатор target4.
$("#target4").remove();

Функция .appendTo() позволяет перенести объект и прикрепить его в другом месте. Ниже показано как элемент с идентификатором target4 вставляется в конец объекта с идентификатором left-well.
$("#target4").appendTo("#left-well");

Функция .clone() позволяет клонировать объект с последующей привязкой через функцию .appendTo. Когда используется несколько функций подряд это называется Цепью функций(ну примерно).
В примере ниже клон элемента target5 встраивается в конец контейнера left-well.
$("#target5").clone().appendTo("#left-well");

Функция .parent() позволяет задавать параметры объекту в который вложен наш объект. В примере ниже, я через элемент target1 задаю красный фон его родителю.
$("#target1").parent().css("background-color", "red");

Детей не трогать!

Функция .children() позволяет задавать параметры для потомков. В примере через элемент right-well я обратился к его детям и он покрасил их оранжевым цветом.

$("#right-well").children().css("color", "orange");

Блин вот это не понял.

jQuery uses CSS Selectors to target elements. target:nth-child(n) css selector allows you to select all the nth elements with the target class or element type.

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

$(".target:nth-child(2)").addClass("animated bounce");

Аналогичные указатели :even - каждый, :odd,

Here's how you would target all the odd-numbered elements with class target and give them classes:

$(".target:odd").addClass("animated shake");

Note that jQuery is zero-indexed, meaning that, counter-intuitively, :odd selects the second element, fourth element, and so on.

Try selecting all the even-numbered elements and giving them the classes ofanimated and shake.

$(".target:even").addClass("animated shake");

Это просто  еще один элемент анимации hinge, демонстрирует как наш сайт свешивается на левом углу а затем падает. в никуда

$("body").addClass("animated hinge");

Элемент анимации fadeOut прячет элемент.

Для дальнейшего изучения, предлагаю ознакомиться jQuery API.
jQuery API

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.