Подключение библиотеки JQuery

Основы Jquery

Подключение библиотеки

все библиотеки можно посмотреть здесь или перейдя по этой ссылке вручную. https://developers.google.com/speed/libraries/

Например вот так для работы с файлом, который вы скачали и поместили в папку вашего сайта. Этот метод более предпочтительный при работе на локальном сервере

<script type = "text/javascript" src = "jquery.js"></script>

Или вот так для любого другого сайта находящегося в интернете:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script >

Для того, чтобы код выполнялся после загрузки самого документа его надо вставить внутрь вот такой функции:

$(document).ready(function)(){
//all JQuery code goes here.
});

Выбор элементов

С помощью библиотеки можно выбрать практически любой документ DOM. Добиться этого можно при использовании селекторов. Селектор это знак $ и рядом внутри круглых скобок мы указываем какой элемент мы хотим выбрать.

• $("div") - выбирает все divна странице.
• $("#myDiv") - по ID
• $("p.myClass") - выбирает все теги р с классом myClass

Это расширяет возможности использования библиотеки, потому что просто JavaScript-ом мы можем обратиться к элементу только с определенным ID - document.getElementById()

Методы и Действия JQuery

Как только объект выбран мы можем произвести над ним какие-то действия.

Например

• $("div")addClass("myClass"); - позволяет добавить выбранным элементам класс
• $("#myDiv").css("color","red"); - позволяет добавить css. (Метод css)
• Var myElement=$("#myElement").html();Позволяет получить html - код выбранного элемента (Метод html). В этом случае мы создаем переменную, которая получает весь код от элемента с id. Это моэет быть слово, параграф, изображение или вся страница целиком. Далее мы можем использовать эту структуры в своих собственных целях.

События JQuery

Данная библиотека очень хорошо проявляет себя в обработке событий.Например вот функция, которая будет вызываться при клике на ссылку:

$("a").click(function(){
//здесь сама функция.
});

Можно например окрасить все ссылки в определенный цвет или сделать какое-либо другое действие.

Например:

• Blur - размытие
• Focus - резкость
• Hover - наведение
• Key Down - нажатие клавиши "стрелка вниз"
• Load - загрузка

На сайте JQuery можно найти полный список всех событий (Events)

Показать или скрыть

• $("#myElement").hide(function(){//here some function}); скрывает элемент с ID
• $("#myElement").show(function(){//here some function}); показывает ID
• $("#myElement").toggle(function(){//here some function}); переключение между "показать" и "скрыть"
• $("#myElement").slideDown("fast",function(){//here some function});- перемещает элемент вниз со скоростью "fast" и второй параметр это функция, которая будет выполнена по завершении перемещения
• $("#myElement").slideUp("slow",function(){//here some function}); - тоже самое "вверх"
• $("#myElement").slideToggle(1000,function(){//here some function}); - переключение между перемещениями с числовым параметром скорости